reza added video compo

package.json

@@ -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",

src/views/Auth/Login/index.js

@@ -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
+        }
+      </>
+    );
   }
 }
 

src/views/Auth/Splash/ProgressBar/index.js

@@ -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}
+      </>
+    );
+  }
+}

src/views/Auth/Splash/ProgressBar/index.scss

@@ -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;
+    }
+  }
+}

src/views/Auth/Splash/index.js

@@ -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}
+    </>
+  );
+}

src/views/Auth/Splash/index.scss

@@ -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;
+  }
+}

src/views/Product/AddToCart/index.js

@@ -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">
-          
+          <div className="product-addtocart__box d-flex flex-column">
-        </section> : null
+            <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}
     </>
   );
-}
+}

src/views/Product/AddToCart/index.scss

@@ -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;
+      }
+    }
+  }
 }

src/views/Product/BreadCrumb/index.js

@@ -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}
       >

src/views/Product/Comment/index.js

@@ -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>
+      {window.innerWidth < 1000 ? (
-      <p>{comment.text}</p>
+        <div className="mobile-comment d-flex flex-column">
-      <span>{moment(comment.date).format('YYYY/MM/DD')}</span>
+          <strong style={{ fontSize: fontSize.mobile.strong }}>{comment.username}</strong>
-    </div>
+          <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}
+    </>
   );
 }

src/views/Product/Comment/index.scss

@@ -26,4 +26,29 @@
     font-size: calc(100vw / 30);
 
   }
+}
+
+.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;
+  }
 }

src/views/Product/Info/index.js

@@ -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
       }
     </>

src/views/Product/Info/index.scss

@@ -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;
+  }
 }

src/views/Product/index.js

@@ -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 />
+                <Info
-                <AddToCart />
+                  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}
+      
+    </>
+  );
+};

src/views/Product/index.scss

@@ -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%;
+    }
+  }
 }

src/views/QR/BookContent/index.js

@@ -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" ? (

src/views/QR/BookContent/index.scss

@@ -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%;

src/views/QR/VideoBox/React-video-js-player/index.js

@@ -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;

src/views/QR/VideoBox/React-video-js-player/index.scss

@@ -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;
+        
+      }
+    }
+    
+  }
+}

src/views/QR/VideoBox/index.js

@@ -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
             }   
         </>

src/views/QR/VideoBox/index.scss

@@ -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;

src/views/QR/VoiceBox/index.scss

@@ -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;

yarn.lock

@@ -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"