reza added video compo

master
Reza_ashrafi 3 years ago
parent 9244c105e7
commit 948de6f627
  1. 2
      package.json
  2. BIN
      src/assets/Video/film.mp4
  3. 25
      src/views/Auth/Login/index.js
  4. 49
      src/views/Auth/Splash/ProgressBar/index.js
  5. 47
      src/views/Auth/Splash/ProgressBar/index.scss
  6. 26
      src/views/Auth/Splash/index.js
  7. 59
      src/views/Auth/Splash/index.scss
  8. 57
      src/views/Product/AddToCart/index.js
  9. 58
      src/views/Product/AddToCart/index.scss
  10. 6
      src/views/Product/BreadCrumb/index.js
  11. 37
      src/views/Product/Comment/index.js
  12. 25
      src/views/Product/Comment/index.scss
  13. 15
      src/views/Product/Info/index.js
  14. 17
      src/views/Product/Info/index.scss
  15. 156
      src/views/Product/index.js
  16. 13
      src/views/Product/index.scss
  17. 3
      src/views/QR/BookContent/index.js
  18. 33
      src/views/QR/BookContent/index.scss
  19. 59
      src/views/QR/VideoBox/React-video-js-player/index.js
  20. 36
      src/views/QR/VideoBox/React-video-js-player/index.scss
  21. 6
      src/views/QR/VideoBox/index.js
  22. 3
      src/views/QR/VideoBox/index.scss
  23. 1
      src/views/QR/VoiceBox/index.scss
  24. 217
      yarn.lock

@ -20,6 +20,7 @@
"jalali-moment": "^3.3.10",
"mapir-react-component": "^1.8.1",
"material-ui-audio-player": "https://github.com/RezaAshrafi77/material-ui-audio-player.git",
"material-ui-player": "^0.2.2",
"prettier": "^2.3.1",
"react": "^17.0.2",
"react-audio-player": "^0.17.0",
@ -34,6 +35,7 @@
"react-soundplayer": "^1.0.5",
"react-swipeable-views": "^0.14.0",
"react-toastify": "^7.0.4",
"react-video-js-player": "^1.1.1",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",

Binary file not shown.

@ -2,6 +2,8 @@ import React, { Component } from "react";
import Cellphone from "./Cellphone/index";
import Code from "./Code/index";
import Splash from "../Splash/index";
import { otp } from '../../../Redux/actions/public';
import { login } from '../../../Redux/actions/user';
import { connect } from 'react-redux';
@ -11,6 +13,7 @@ class Login extends Component {
super(props);
this.state = {
page: 0,
splash : true,
};
}
@ -20,13 +23,33 @@ class Login extends Component {
if (page && cellphone && otp) this.props.login({ cellphone, otp });
}
componentDidMount() {
setTimeout(() =>{
this.setState({
splash: false,
})
},6000);
}
resend = () => {
const {cellphone} = this.state;
this.props.otp({cellphone});
}
render() {
return <>{this.state.page === 0 ? <Cellphone parent={this} /> : <Code parent={this} />}</>;
return (
<>
{
this.state.page === 0 ?
( !this.state.splash ? <Cellphone parent={this} /> : null) :
<Code parent={this} />
}
{
this.state.splash ? <Splash /> : null
}
</>
);
}
}

@ -0,0 +1,49 @@
import React, { useState, useEffect } from "react";
import "./index.scss";
export default class ProgressBar extends React.Component {
state = {
percent: 0,
};
componentDidMount() {
this.percentInterval = setInterval(() => {
this.setPercent();
}, this.props.interval);
}
componentWillUnmount() {
clearInterval(this.percentInterval);
}
setPercent = () => {
this.setState({ percent: this.state.percent + this.props.offset });
};
render() {
return (
<>
{window.innerWidth > 1000 ? (
<div className="progresss d-flex">
<div style={{ width: this.state.percent + "%" }}>
{
this.state.percent ?
<span className="d-flex align-items-center justify-content-center">{this.state.percent}%</span> : null
}
</div>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-progress d-flex">
<div style={{ width: this.state.percent + "%" }}>
{
this.state.percent ?
<span className="d-flex align-items-center justify-content-center">{this.state.percent}%</span> : null
}
</div>
</div>
) : null}
</>
);
}
}

@ -0,0 +1,47 @@
.mobile-progress{
width: 100%;
max-width: 400px;
background-color: white;
border-radius: 30px;
height: 43px;
position: relative;
margin-top: 20px;
div{
position: absolute;
left: 0px;
top: 0px;
background-color: #00CC69;
height: 100%;
border-radius: 30px;
span{
font-size: 20px;
height: 100%;
color: white;
font-family: numeralMedium;
}
}
}
.progresss{
width: 100%;
max-width: 800px;
background-color: white;
border-radius: 30px;
height: 35px;
position: relative;
margin-top: 20px;
div{
position: absolute;
left: 0px;
top: 0px;
background-color: #00CC69;
height: 100%;
border-radius: 30px;
span{
font-size: 20px;
height: 100%;
color: white;
font-family: numeralMedium;
}
}
}

@ -0,0 +1,26 @@
import React from "react";
import ProgressBar from "./ProgressBar/index";
import logo from "../../../assets/icons/logo.png";
import "./index.scss";
export default function Splash(props) {
return (
<>
{window.innerWidth > 1000 ? (
<div className="splash d-flex flex-column justify-content-center align-items-center">
<img src={logo} alt="لوگو" />
<ProgressBar interval={600} offset={10} />
<span className="splash__span">در حال بارگیری اطلاعات از سرور</span>
</div>
) : null}
{window.innerWidth < 1000 ? (
<div className="mobile-splash d-flex flex-column justify-content-center align-items-center">
<img src={logo} alt="لوگو" />
<ProgressBar interval={600} offset={10} />
<span className="mobile-splash__span">در حال بارگیری اطلاعات از سرور</span>
</div>
) : null}
</>
);
}

@ -0,0 +1,59 @@
.mobile-splash {
width: 100vw;
height: 100vh;
padding: 0px 10px;
background: linear-gradient(
270deg,
hsla(0, 0%, 100%, 1) 0%,
hsla(100, 100%, 60%, 1) 100%
);
background: -moz-linear-gradient(
270deg,
hsla(0, 0%, 100%, 1) 0%,
hsla(100, 100%, 60%, 1) 100%
);
background: -webkit-linear-gradient(
270deg,
hsla(0, 0%, 100%, 1) 0%,
hsla(100, 100%, 60%, 1) 100%
);
&__span{
font-family: numeralLight;
margin-top: 20px;
color: #02733C;
font-size: 16px;
letter-spacing: -1px;
}
}
.splash {
width: 100vw;
height: 100vh;
padding: 0px 10px;
background: linear-gradient(
270deg,
hsla(0, 0%, 100%, 1) 0%,
hsla(100, 100%, 60%, 1) 100%
);
background: -moz-linear-gradient(
270deg,
hsla(0, 0%, 100%, 1) 0%,
hsla(100, 100%, 60%, 1) 100%
);
background: -webkit-linear-gradient(
270deg,
hsla(0, 0%, 100%, 1) 0%,
hsla(100, 100%, 60%, 1) 100%
);
&__span{
font-family: numeralLight;
margin-top: 20px;
color: #02733C;
font-size: 16px;
letter-spacing: -1px;
}
}

@ -1,15 +1,56 @@
import React, { Component } from 'react';
import React, { Component } from "react";
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
div: window.innerWidth > maxDesktopSize ? 13 : window.innerWidth / 95,
strong: window.innerWidth > maxDesktopSize ? 24 : window.innerWidth / 70,
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
button: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 100,
},
};
import './index.scss';
export default function AddToCart(props) {
return(
const { price, off } = props;
return (
<>
{
window.innerWidth > 1000 ?
{window.innerWidth > 1000 ? (
<section className="product-addtocart d-flex flex-column">
</section> : null
}
<div className="product-addtocart__box d-flex flex-column">
<div className="product-addtocart__box--price d-flex">
<div style={{ fontSize: fontSize.desktop.div }}>
<strong style={{ fontSize: fontSize.desktop.strong }}>
{price}
</strong>{" "}
تومان
</div>
<span style={{ fontSize: fontSize.desktop.span }}>{off} نخفیف</span>
</div>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--sampleButton">
مشاهده نمونه کتاب
</button>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--digitalButton">
خرید نسخه دیجیتال
</button>
<button style={{ fontSize: fontSize.desktop.button }} className="product-addtocart__box--addButton">
افزپدن به سبد خریذ
</button>
<div className="product-addtocart__box--accept d-flex">
<input type="checkbox" />
<p style={{ fontSize: fontSize.desktop.p }}>
نکته هایی که در هنگام خرید باید به آن توجه داشته باشید در این
قسمت از سایت سمت چپ قرار خواهند گرفت. در این قسمت فروشنده موارد
لازم را به خریدار یادآوری می کند.
</p>
</div>
</div>
<footer className="product-addtocart__footer d-flex mt-3"></footer>
</section>
) : null}
</>
);
}

@ -1,5 +1,61 @@
.product-addtocart{
flex: 3.5;
background-color: #eee;
margin: 10px;
&__box{
box-shadow: 0px 0px 13px #D5D5D5B0;
border-radius: 13px;
padding: 20px 10px;
&--price{
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
span{
background-color: #FFDD00;
padding: 10px;
color: #4D4D4F;
font-family: numeralLight;
border-radius: 5px;
}
div{
color: #848484;
font-family: numeralLight;
strong{
font-family: numeralBold;
color: #4D4D4F;
}
}
}
button{
font-family: numeralLight;
border-radius: 7px;
margin-bottom: 10px;
padding: 10px;
}
&--sampleButton{
color: #FF1616;
border: 1px solid #FF1616;
background-color: white;
}
&--digitalButton{
color: #2B95FF;
border: 1px solid #2B95FF;
background-color: white;
}
&--addButton{
background-color: #0080FFD4;
color: white;
border: 1px solid #0080FFD4;
}
&--accept{
input{
margin: 3px 0px 0px 10px;
}
p{
color: #9E9E9E;
font-family: numeralLight;
text-align: justify;
letter-spacing: -1px;
}
}
}
}

@ -20,14 +20,14 @@ const fontSize = {
export default function ActiveLastBreadcrumb() {
return (
<Breadcrumbs aria-label="breadcrumb">
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}>
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to={'/products'} onClick={handleClick}>
محصولات
</Link>
<Link style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}>
<Link style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile}} to="/products" onClick={handleClick}>
پایه هفتم
</Link>
<Link
style={{ fontSize: window.innerWidth > maxDesktopSize ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}}
style={{ fontSize: window.innerWidth > 1000 ? fontSize.desktop : fontSize.mobile, color: '#00CC69'}}
to="/products/1"
onClick={handleClick}
>

@ -2,13 +2,40 @@ import React from "react";
import moment from "jalali-moment";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 550;
const fontSize = {
desktop : {
strong: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 70,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 12 : window.innerWidth / 95,
},
mobile : {
strong: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 20,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 27,
span: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
},
}
export default function Comment(props) {
const { comment } = props;
return (
<div className="mobile-comment d-flex flex-column">
<strong>{comment.username}</strong>
<p>{comment.text}</p>
<span>{moment(comment.date).format('YYYY/MM/DD')}</span>
</div>
<>
{window.innerWidth < 1000 ? (
<div className="mobile-comment d-flex flex-column">
<strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
<p style={{ fontSize: fontSize.mobile.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.mobile.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
</div>
) : null}
{window.innerWidth > 1000 ? (
<div className="comment d-flex flex-column">
<strong style={{fontSize: fontSize.desktop.strong }}>{comment.username}</strong>
<p style={{ fontSize: fontSize.desktop.p }}>{comment.text}</p>
<span style={{ fontSize: fontSize.desktop.span }}>{moment(comment.date).format("YYYY/MM/DD")}</span>
</div>
) : null}
</>
);
}

@ -27,3 +27,28 @@
}
}
.comment{
padding : 30px 20px 20px;
border-radius: 10px;
background-color: #fffac9;
margin-bottom: 10px;
color: #72891edc;
position: relative;
width: 100%;
p{
text-align: justify;
font-family: numeralLight;
}
strong{
font-family: numeralMedium;
margin-bottom: 5px;
}
span{
position: absolute;
left: 10px;
top: 10px;
font-family: numeralLight;
}
}

@ -1,13 +1,26 @@
import React, { Component } from 'react';
import './index.scss';
const maxDesktopSize = 1250;
const fontSize = {
desktop : {
h1: window.innerWidth > maxDesktopSize ? 22 : window.innerWidth / 55,
span: window.innerWidth > maxDesktopSize ? 14: window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 80,
}
}
export default function Info(props) {
const {title , subTitle, description} = props;
return(
<>
{
window.innerWidth > 1000 ?
<section className="product-info d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{title}</h1>
<span style={{ fontSize: fontSize.desktop.span }}>{subTitle}</span>
<p style={{ fontSize: fontSize.desktop.p }}>{description}</p>
</section> : null
}
</>

@ -1,5 +1,20 @@
.product-info{
flex: 6;
background-color: #eee;
margin: 10px;
padding: 0px 10px;
h1{
font-family: numeralBold;
color: #373737;
margin-bottom: 10px;
}
span , p{
font-family: numeralLight;
}
span{
margin-bottom: 10px;
color: #00CC69;
}
p{
color: #6F7074;
}
}

@ -8,13 +8,27 @@ import Breadcrumbs from "./BreadCrumb/index";
import Gallery from "./Gallery/index";
import Info from "./Info/index";
import AddToCart from "./AddToCart/index";
import HomeScroll from "../Home/HomeScroll/index";
import HomeSlider from "../Home/HomeSlider/index";
import book2 from "../../assets/images/book2.png";
import book1 from '../../assets/images/book1.png';
import book3 from '../../assets/images/book3.png';
import book4 from '../../assets/images/book4.png';
import book5 from '../../assets/images/book5.png';
import "./index.scss";
const maxDesktopSize = 1250;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
}
}
export default class Product extends Component {
render() {
const { product } = this.props;
const { product,sameProducts } = this.props;
return (
<>
{window.innerWidth > 1000 ? (
@ -24,9 +38,20 @@ export default class Product extends Component {
<Breadcrumbs />
<header class="product__header d-flex mt-4">
<Gallery />
<Info />
<AddToCart />
<Info
subTitle={product.subTitle}
title={product.title}
description={product.description}
/>
<AddToCart price={product.price} off={product.off} />
</header>
<div className="product__comments d-flex flex-column">
<h1 style={{ fontSize: fontSize.desktop.h1 }}>نظرات خریداران</h1>
<div className="product__comments--list d-flex flex-column">
<Comment comment={product.comments[0]} />
</div>
</div>
<Identifier item={sameProducts} />
</div>
<Footer />
</>
@ -98,12 +123,110 @@ export default class Product extends Component {
}
Product.defaultProps = {
sameProducts: {
type: window.innerWidth > 1000 ? "slider" : "scroll",
title: "محصولات مرتبط",
moreText: "لیست کتابها",
height: window.innerWidth > 1000 ? 470 : 320,
design: window.innerWidth > 1000 ? "simple" : "product",
number: window.innerWidth > 1000 ? 4 : 2.8,
data: [
{
id: 0,
image: book1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 1,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 2,
image: book3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
},
{
id: 3,
image: book4,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
},
{
id: 4,
image: book5,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
},
{
id: 5,
image: book1,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "78.000",
oldPrice: "",
date: new Date(),
},
{
id: 6,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
oldPrice: "59.000",
date: new Date(),
},
{
id: 7,
image: book3,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "21.000",
oldPrice: "",
date: new Date(),
},
{
id: 8,
image: book4,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه دهم ابتدایی",
price: "",
oldPrice: "",
date: new Date(),
},
{
id: 9,
image: book5,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه هفتم ابتدایی",
price: "59.000",
oldPrice: "",
date: new Date(),
},
],
},
product: {
id: 1,
image: book2,
title: "منفجر کردن مغز خود را به ما بسپارید",
subTitle: "پایه ششم ابتدایی",
price: "39.000",
off: "30%",
oldPrice: "59.000",
date: new Date(),
abstraction:
@ -163,3 +286,30 @@ Product.defaultProps = {
const Item = (props) => {
return <li>+ {props.item}</li>;
};
const Identifier = (props) => {
return (
<>
{props.item.type === "scroll" ? (
<HomeScroll
number={props.item.number}
height={props.item.height}
title={props.item.title}
data={props.item.data}
designType={props.item.design}
moreText={props.item.moreText}
/>
) : null}
{props.item.type === "slider" ? (
<HomeSlider
designType={props.item.design}
number={props.item.number}
height={props.item.height}
title={props.item.title}
data={props.item.data}
/>
) : null}
</>
);
};

@ -158,4 +158,17 @@
height: 470px;
padding: 0px 10px;
}
&__comments{
width: 100%;
margin-top: 30px;
h1{
font-family: numeralBold;
color: #6f7074;
letter-spacing: -1px;
margin-bottom: 30px;
}
&--list{
width: 100%;
}
}
}

@ -1,6 +1,7 @@
import React, { Component, useState } from "react";
import ppt from "../../../assets/icons/ppt.svg";
import MaterialAudioPlayer from '../VoiceBox/Material-audio-player/index';
import "./index.scss";
@ -47,7 +48,7 @@ const Identifier = (props) => {
<span></span>
{props.data.title}
</h2>
<div></div>
<MaterialAudioPlayer />
</a>
) : null}
{props.data.type === "video" ? (

@ -66,6 +66,33 @@
background-color: #8dfac541;
padding: 10px 10px;
margin: 10px 0px;
text-decoration: none;
.MuiPaper-elevation1{
box-shadow: none !important;
}
.MuiGrid-container{
flex-wrap: nowrap !important;
flex-direction: row-reverse;
background-color: rgba(255,255,255,0) !important;
padding: 0px !important;
}
.MuiGrid-item{
display: flex !important;
flex-direction: row !important;
padding: 0px !important;
margin-right: 5px !important;
p{
color: #02A255 !important;
}
}
.MuiSvgIcon-root{
color: #37D386 !important;
font-size: 50px !important;
}
.MuiSlider-root{
color: #37D386;
}
h2{
font-family: numeralLight;
color: #02733C;
@ -77,11 +104,7 @@
margin-left: 5px;
}
}
div{
width: 100%;
height: 40px;
background-color: #02733C;
}
}
&-video{
width: 100%;

@ -0,0 +1,59 @@
import React, { Component } from "react";
import VideoPlayer from "react-video-js-player";
import film from "../../../../assets/Video/film.mp4";
import "./index.scss";
class VideoApp extends Component {
player = {};
state = {
video: {
src: film,
},
};
onPlayerReady(player) {
console.log("Player is ready: ", player);
this.player = player;
}
onVideoPlay(duration) {
console.log("Video played at: ", duration);
}
onVideoPause(duration) {
console.log("Video paused at: ", duration);
}
onVideoTimeUpdate(duration) {
console.log("Time updated: ", duration);
}
onVideoSeeking(duration) {
console.log("Video seeking: ", duration);
}
onVideoSeeked(from, to) {
console.log(`Video seeked from ${from} to ${to}`);
}
onVideoEnd() {
console.log("Video ended");
}
render() {
return (
<VideoPlayer
controls={true}
src={this.state.video.src}
onReady={this.onPlayerReady.bind(this)}
onPlay={this.onVideoPlay.bind(this)}
onPause={this.onVideoPause.bind(this)}
onTimeUpdate={this.onVideoTimeUpdate.bind(this)}
onSeeking={this.onVideoSeeking.bind(this)}
onSeeked={this.onVideoSeeked.bind(this)}
onEnd={this.onVideoEnd.bind(this)}
/>
);
}
}
export default VideoApp;

@ -0,0 +1,36 @@
.video-js{
width: 100% !important;
height: 100% !important;
border-radius: 20px;
button{
&:focus{
outline: none !important;
}
}
.vjs-tech{
border-radius: 20px;
}
.vjs-big-play-button{
font-size: 3.3em;
width: 50px;
height: 48px;
transform: translateX(25px);
background-color: #37D386;
border-radius: 50%;
border: 0px;
}
.vjs-control-bar{
direction: ltr !important;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
.vjs-progress-control{
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
& > * {
direction: ltr !important;
}
}
}
}

@ -1,4 +1,6 @@
import React from 'react';
import {VideoCard} from 'material-ui-player';
import ReactVideoJsPlayer from './React-video-js-player/index';
import './index.scss';
@ -10,14 +12,14 @@ export default function VideoBox(props){
window.innerWidth > 1000 ?
<div className="video-box d-flex flex-column" id="video">
<h2 style={{fontSize: props.fontSize.desktop.content.h2 }} className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
<ReactVideoJsPlayer />
</div> : null
}
{
window.innerWidth < 1000 ?
<div className="mobile-video-box d-flex flex-column" id="video">
<h2 className="d-flex align-items-center"><span></span>{props.data.title}</h2>
<div></div>
<ReactVideoJsPlayer />
</div> : null
}
</>

@ -24,7 +24,8 @@
border-radius: 10px;
background-color: #eee;
margin: 15px auto;
height: calc(100vh / 3);
height: calc(100vh / 2.5);
min-height: 300px;
position: relative;
h2{
font-family: numeralMedium;

@ -28,7 +28,6 @@
box-shadow: none !important;
}
.MuiGrid-container{
width: 20px !important;
flex-wrap: nowrap !important;
flex-direction: row-reverse;
background-color: rgba(255,255,255,0) !important;

@ -2298,6 +2298,38 @@
"@typescript-eslint/types" "4.26.1"
eslint-visitor-keys "^2.0.0"
"@videojs/http-streaming@2.9.1":
version "2.9.1"
resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-2.9.1.tgz#16b59efe24a832b89b5bd6a6c52f0d80ad7996a2"
integrity sha512-QAtlrBBILOflrei1KE0GcSDDWiP888ZOySck6zWlQNYi/pXOm6QXTJHzOMIKiRQOndyJIZRTfLHedeUdUIDNLA==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/vhs-utils" "^3.0.2"
aes-decrypter "3.1.2"
global "^4.4.0"
m3u8-parser "4.7.0"
mpd-parser "0.17.0"
mux.js "5.11.1"
video.js "^6 || ^7"
"@videojs/vhs-utils@^3.0.0", "@videojs/vhs-utils@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-3.0.2.tgz#0203418ecaaff29bc33c69b6ad707787347b7614"
integrity sha512-r8Yas1/tNGsGRNoIaDJuiWiQgM0P2yaEnobgzw5JcBiEqxnS8EXoUm4QtKH7nJtnppZ1yqBx1agBZCvBMKXA2w==
dependencies:
"@babel/runtime" "^7.12.5"
global "^4.4.0"
url-toolkit "^2.2.1"
"@videojs/xhr@2.5.1":
version "2.5.1"
resolved "https://registry.yarnpkg.com/@videojs/xhr/-/xhr-2.5.1.tgz#26bc5a79dbb3b03bfb13742c6ce559f89e90719e"
integrity sha512-wV9nGESHseSK+S9ePEru2+OJZ1jq/ZbbzniGQ4weAmTIepuBMSYPx5zrxxQA0E786T5ykpO8ts+LayV+3/oI2w==
dependencies:
"@babel/runtime" "^7.5.5"
global "~4.4.0"
is-function "^1.0.1"
"@webassemblyjs/ast@1.9.0":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@ -2526,6 +2558,16 @@ adjust-sourcemap-loader@3.0.0:
loader-utils "^2.0.0"
regex-parser "^2.2.11"
aes-decrypter@3.1.2:
version "3.1.2"
resolved "https://registry.yarnpkg.com/aes-decrypter/-/aes-decrypter-3.1.2.tgz#3545546f8e9f6b878640339a242efe221ba7a7cb"
integrity sha512-42nRwfQuPRj9R1zqZBdoxnaAmnIFyDi0MNyTVhjdFOd8fifXKKRfwIHIZ6AMn1or4x5WONzjwRTbTWcsIQ0O4A==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/vhs-utils" "^3.0.0"
global "^4.4.0"
pkcs7 "^1.0.4"
agent-base@6:
version "6.0.2"
resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@ -4607,6 +4649,11 @@ dom-serializer@^1.0.1:
domhandler "^4.2.0"
entities "^2.0.0"
dom-walk@^0.1.0:
version "0.1.2"
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.2.tgz#0c548bef048f4d1f2a97249002236060daa3fd84"
integrity sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==
domain-browser@^1.1.1:
version "1.2.0"
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@ -4768,7 +4815,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
dependencies:
once "^1.4.0"
enhanced-resolve@^4.3.0:
enhanced-resolve@^4.3.0, enhanced-resolve@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
@ -5771,6 +5818,14 @@ global-prefix@^3.0.0:
kind-of "^6.0.2"
which "^1.3.1"
global@^4.3.1, global@^4.4.0, global@~4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
dependencies:
min-document "^2.19.0"
process "^0.11.10"
globals@^11.1.0:
version "11.12.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@ -6273,6 +6328,11 @@ indexes-of@^1.0.1:
resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
individual@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/individual/-/individual-2.0.0.tgz#833b097dad23294e76117a98fb38e0d9ad61bb97"
integrity sha1-gzsJfa0jKU52EXqY+zjg2a1hu5c=
infer-owner@^1.0.3, infer-owner@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
@ -6541,6 +6601,11 @@ is-fullwidth-code-point@^3.0.0:
resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
is-function@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
is-generator-fn@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
@ -7417,7 +7482,7 @@ kdbush@^3.0.0:
resolved "https://registry.yarnpkg.com/kdbush/-/kdbush-3.0.0.tgz#f8484794d47004cc2d85ed3a79353dbe0abc2bf0"
integrity sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==
keycode@^2.1.7:
keycode@^2.1.7, keycode@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ=
@ -7675,6 +7740,15 @@ lz-string@^1.4.4:
resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
m3u8-parser@4.7.0:
version "4.7.0"
resolved "https://registry.yarnpkg.com/m3u8-parser/-/m3u8-parser-4.7.0.tgz#e01e8ce136098ade1b14ee691ea20fc4dc60abf6"
integrity sha512-48l/OwRyjBm+QhNNigEEcRcgbRvnUjL7rxs597HmW9QSNbyNvt+RcZ9T/d9vxi9A9z7EZrB1POtZYhdRlwYQkQ==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/vhs-utils" "^3.0.0"
global "^4.4.0"
magic-string@^0.25.0, magic-string@^0.25.7:
version "0.25.7"
resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
@ -7762,6 +7836,11 @@ mapir-react-component@^1.8.1:
dependencies:
classnames "^2.2.6"
material-ui-player@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/material-ui-player/-/material-ui-player-0.2.2.tgz#0a742c0f9a60d65de8f47af099ea1962f7785801"
integrity sha512-J87dm1BYhFES29jY7wF0wS5CudGlyxS6lrnbQFbVDcYuwgWzifTyAlRpUc5D8/4iqhlwDvmy43DqbbCA1306IA==
md5.js@^1.3.4:
version "1.3.5"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@ -7894,6 +7973,13 @@ mimic-fn@^2.1.0:
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
min-document@^2.19.0:
version "2.19.0"
resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
dependencies:
dom-walk "^0.1.0"
min-indent@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@ -8028,6 +8114,16 @@ move-concurrently@^1.0.1:
rimraf "^2.5.4"
run-queue "^1.0.3"
mpd-parser@0.17.0:
version "0.17.0"
resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-0.17.0.tgz#d7f3002edcb706f98993ef75846a713d056d3332"
integrity sha512-oKS5G0jCcHHJ3sHYlcLeM9Xcbuixl08eAx7QW0Th7ChlZiI0YvLtGaHE/L0aKUBJFNvtkeksIr8XgJgSBBsS4g==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/vhs-utils" "^3.0.2"
global "^4.4.0"
xmldom "^0.5.0"
ms@2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@ -8071,6 +8167,13 @@ mute-stream@0.0.8:
resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
mux.js@5.11.1:
version "5.11.1"
resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.11.1.tgz#531192c2c5ee5e9abb6243ba58e2c1ef916b35eb"
integrity sha512-U/JKEU4GZfk2BpEQpPfmH81nF79UKK2a1QOb6PF9viPspJpexGt11YzR/nTKNWdfjWG0DGjcSU+zb2F52Z/q8w==
dependencies:
"@babel/runtime" "^7.11.2"
nan@^2.12.1:
version "2.14.2"
resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19"
@ -8761,6 +8864,13 @@ pirates@^4.0.1:
dependencies:
node-modules-regexp "^1.0.0"
pkcs7@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/pkcs7/-/pkcs7-1.0.4.tgz#6090b9e71160dabf69209d719cbafa538b00a1cb"
integrity sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==
dependencies:
"@babel/runtime" "^7.5.5"
pkg-dir@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
@ -10073,6 +10183,25 @@ react-transition-group@^4.4.0:
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-video-js-player@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-video-js-player/-/react-video-js-player-1.1.1.tgz#7123537b39a8cb6a0a3e3dcd3bea8187a8fcac27"
integrity sha512-IjbZkYC29DkXId+I0hP4vfaqdG8vZh7rB73vLbyYMSHKK6BmSdVtpbt1C97vRlyBXhNLuX3P/Fkxfoxx/SZJtw==
dependencies:
prop-types "^15.6.2"
react "^16.6.3"
video.js "^7.4.1"
webpack "^4.26.1"
react@^16.6.3:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
react@^17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@ -10540,6 +10669,13 @@ run-queue@^1.0.0, run-queue@^1.0.3:
dependencies:
aproba "^1.1.1"
rust-result@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/rust-result/-/rust-result-1.0.0.tgz#34c75b2e6dc39fe5875e5bdec85b5e0f91536f72"
integrity sha1-NMdbLm3Dn+WHXlveyFteD5FTb3I=
dependencies:
individual "^2.0.0"
rw@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
@ -10567,6 +10703,13 @@ safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1,
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
safe-json-parse@4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz#7c0f578cfccd12d33a71c0e05413e2eca171eaac"
integrity sha1-fA9XjPzNEtM6ccDgVBPi7KFx6qw=
dependencies:
rust-result "^1.0.0"
safe-regex@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@ -11896,6 +12039,11 @@ url-parse@^1.4.3, url-parse@^1.5.1:
querystringify "^2.1.1"
requires-port "^1.0.0"
url-toolkit@^2.2.1:
version "2.2.2"
resolved "https://registry.yarnpkg.com/url-toolkit/-/url-toolkit-2.2.2.tgz#51ef27b56d3187185f9ecf4a8ac7e8f55203c89d"
integrity sha512-l25w6Sy+Iy3/IbogunxhWwljPaDnqpiKvrQRoLBm6DfISco7NyRIS7Zf6+Oxhy1T8kHxWdwLND7ZZba6NjXMug==
url@^0.11.0:
version "0.11.0"
resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@ -12003,6 +12151,37 @@ vendors@^1.0.0:
resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
"video.js@^6 || ^7", video.js@^7.4.1:
version "7.13.3"
resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.13.3.tgz#5efab7bd56267406307f64d110662b2ccb3d7530"
integrity sha512-rIGPFRh3v0HqSdfj+/iByKRDBgLVqILK/4i/hW15DfjvgCGhwbw53bRBoJXy496hwh/XYeOAqckc87L2FN375g==
dependencies:
"@babel/runtime" "^7.12.5"
"@videojs/http-streaming" "2.9.1"
"@videojs/vhs-utils" "^3.0.2"
"@videojs/xhr" "2.5.1"
aes-decrypter "3.1.2"
global "^4.4.0"
keycode "^2.2.0"
m3u8-parser "4.7.0"
mpd-parser "0.17.0"
mux.js "5.11.1"
safe-json-parse "4.0.0"
videojs-font "3.2.0"
videojs-vtt.js "^0.15.3"
videojs-font@3.2.0:
version "3.2.0"
resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-3.2.0.tgz#212c9d3f4e4ec3fa7345167d64316add35e92232"
integrity sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==
videojs-vtt.js@^0.15.3:
version "0.15.3"
resolved "https://registry.yarnpkg.com/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz#84260393b79487fcf195d9372f812d7fab83a993"
integrity sha512-5FvVsICuMRx6Hd7H/Y9s9GDeEtYcXQWzGMS+sl4UX3t/zoHp3y+isSfIPRochnTH7h+Bh1ILyC639xy9Z6kPag==
dependencies:
global "^4.3.1"
vm-browserify@^1.0.1:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@ -12190,6 +12369,35 @@ webpack@4.44.2:
watchpack "^1.7.4"
webpack-sources "^1.4.1"
webpack@^4.26.1:
version "4.46.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.46.0.tgz#bf9b4404ea20a073605e0a011d188d77cb6ad542"
integrity sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==
dependencies:
"@webassemblyjs/ast" "1.9.0"
"@webassemblyjs/helper-module-context" "1.9.0"
"@webassemblyjs/wasm-edit" "1.9.0"
"@webassemblyjs/wasm-parser" "1.9.0"
acorn "^6.4.1"
ajv "^6.10.2"
ajv-keywords "^3.4.1"
chrome-trace-event "^1.0.2"
enhanced-resolve "^4.5.0"
eslint-scope "^4.0.3"
json-parse-better-errors "^1.0.2"
loader-runner "^2.4.0"
loader-utils "^1.2.3"
memory-fs "^0.4.1"
micromatch "^3.1.10"
mkdirp "^0.5.3"
neo-async "^2.6.1"
node-libs-browser "^2.2.1"
schema-utils "^1.0.0"
tapable "^1.1.3"
terser-webpack-plugin "^1.4.3"
watchpack "^1.7.4"
webpack-sources "^1.4.1"
websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
version "0.7.4"
resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.4.tgz#89ad5295bbf64b480abcba31e4953aca706f5760"
@ -12492,6 +12700,11 @@ xmlchars@^2.2.0:
resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
xmldom@^0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.5.0.tgz#193cb96b84aa3486127ea6272c4596354cb4962e"
integrity sha512-Foaj5FXVzgn7xFzsKeNIde9g6aFBxTPi37iwsno8QvApmtg7KYrr+OPyRHcJF7dud2a5nGRBXK3n0dL62Gf7PA==
xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"

Loading…
Cancel
Save