reza added JOL player

package.json

@@ -54,6 +54,7 @@
     "jest-circus": "26.6.0",
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
+    "jol-player": "^2.2.0",
     "mapir-react-component": "^2.0.1",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",

src/components/JolPlayer/index.js

@@ -0,0 +1,27 @@
+import JoLPlayer from "jol-player";
+import file from "../../assets/videos/sea.mp4";
+
+const Video = () => {
+  return (
+    <div style={{direction: 'ltr', textAlign: 'left'}}>
+      <JoLPlayer
+        option={{
+          videoSrc: `https://dnvn.ir/api/v1/file/0`,
+          width: '100%',
+          height: 400,
+          theme : '#4dd35b',
+          language : 'en',
+          isShowMultiple: true,
+          hideMouseTime : 10000,
+          isShowPicture : true,
+          isShowScreenshot : true,
+          quality: [{
+            name: "SD", url : `https://dnvn.ir/api/v1/file/0`,
+          }]
+        }}
+      />
+    </div>
+  );
+};
+
+export default Video;

src/views/VideoTube/index.scss

@@ -14,10 +14,10 @@
       }
       h1{
         color: white;
+        margin-bottom: 20px;
       }
       p{
         color: white;
-        margin-top: 20px;
       }
     }
     &--comments{

src/views/VideoTube/index.tsx

@@ -6,6 +6,7 @@ import Attachments from "./Attachments/index";
 import Book from "./Book/index";
 import Comment from "./Comment/index";
 import AddComment from "./AddComment/index";
+import Video from '../../components/JolPlayer';
 
 import "./index.scss";
 import listIcon from "../../assets/icons/list.png";
@@ -24,9 +25,10 @@ function VodTube({ videoList, getList, list, selectedVideo, comments }: any) {
       <main className="d-flex">
         <div className="video-tube__content d-flex flex-column">
           <section className="video-tube__content--display d-flex flex-column">
-            <video controls>
+            {/* <video controls>
               <source src={selectedVideo.src} />
-            </video>
+            </video> */}
+            <Video />
             <span className="desktop">درس دوم / بیست و یکم</span>
             <h1 className="desktop">{selectedVideo.name}</h1>
             <p className="desktop">{selectedVideo.text}</p>

yarn.lock

@@ -4260,7 +4260,7 @@ core-js-pure@^3.0.0:
   resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.9.0.tgz"
   integrity sha512-3pEcmMZC9Cq0D4ZBh3pe2HLtqxpGNJBLXF/kZ2YzK17RbKp94w0HFbdbSx8H8kAlZG5k76hvLrkPm57Uyef+kg==
 
-core-js@^2.4.0:
+core-js@^2.4.0, core-js@^2.6.10:
   version "2.6.12"
   resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
@@ -7570,6 +7570,16 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
+jol-player@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/jol-player/-/jol-player-2.2.0.tgz#e9043c9469460338e7fbce5e26d81d6ba482dd87"
+  integrity sha512-9hrGgxrHcufVzSevuFZ1Agnl1DoO6sbl2rN2T8izd5qwFU0fmC1nymq3WKF+NjzKiBO0T/IDGr9+CDmk9R7iEw==
+  dependencies:
+    core-js "^2.6.10"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+    screenfull "^5.0.0"
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -10915,6 +10925,11 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+screenfull@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.1.0.tgz#85c13c70f4ead4c1b8a935c70010dfdcd2c0e5c8"
+  integrity sha512-dYaNuOdzr+kc6J6CFcBrzkLCfyGcMg+gWkJ8us93IQ7y1cevhQAugFsaCdMHb6lw8KV3xPzSxzH7zM1dQap9mA==
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"