Merge pull request #34 from WeAreAVP/sprint_139

Sprint 139
WeAreAVP · Dec 7, 2023 · ff131fc · ff131fc
2 parents 8cb4e0d + d234e66
commit ff131fc
Show file tree

Hide file tree

Showing 7 changed files with 364 additions and 9 deletions.
diff --git a/src/assets/css/videojs.css b/src/assets/css/videojs.css
@@ -1742,4 +1742,28 @@ video::-webkit-media-text-track-display {
     font-weight: normal;
     font-style: normal; }
 .vjs-icon-custombutton:before {
-    content: "\f11f"; }
+    content: "\f11f"; }
+
+.vjs-audio {
+    margin-top: 10%;
+}
+
+.vjs-audio > .vjs-big-play-button
+{
+    display: none;
+}
+.vjs-audio > .vjs-control-bar {
+    display: flex;
+}
+
+.vjs-audio > .vjs-control-bar > .vjs-control > .vjs-menu{
+    top: 156px;
+}
+
+.vjs-audio > .vjs-control-bar > .vjs-control > .vjs-menu > .vjs-menu-content{
+    display: flex;
+    flex-direction: column-reverse;
+}
+.vjs-menu-content {
+    bottom: 13px !important;
+}
diff --git a/src/components/annotations/TranscriptData.js b/src/components/annotations/TranscriptData.js
@@ -85,7 +85,29 @@ const TranscriptData = (props) => {
           }
 
         </div>
-        <div className="w-3/4 transcript_text">{ReactHtmlParser(props.point.text)}</div>
+        <div className="w-3/4 transcript_text">{ReactHtmlParser(props.point.text)}
+        <div>{props.point?.child && props.point?.child?.length>0 ? 
+        props.point?.child.map(function(object, i){
+          return (<div className="flex border-b-2" key={i}>
+            <div className="first">
+            <div onClick={handleTranscriptTextClick}
+          starttime={object.starttime} style={{ cursor: 'pointer', fontWeight: '600' }} className="cursor-pointer hover:underline hover:text-blue-800 w-1/4 transcript_time">
+            {moment.utc(object.starttime * 1000).format('HH:mm:ss')}
+          </div>
+          {
+            object.endtime ? <div onClick={handleTranscriptTextEndTimeClick}
+            endtime={object.endtime} style={{ cursor: 'pointer', fontWeight: '600' }} className="cursor-pointer hover:underline hover:text-blue-800 w-1/4 transcript_time">
+              {moment.utc(object.endtime * 1000).format('HH:mm:ss')}
+            </div> : ''
+          }
+          </div>
+            <div className="inline-flex ml-2">{object.text}</div>
+
+            </div>);
+        })
+        : "" }</div>
+        </div>
+
         <hr />
       </div>
     </>

diff --git a/src/components/annotations/transcripts.js b/src/components/annotations/transcripts.js
@@ -5,6 +5,7 @@ import { descLoader } from '../../helpers/loaders'
 import { getTranscripts } from "../../helpers/utils";
 import Search from "./menu/search";
 import Select from 'react-select';
+import axios from 'axios';
 
 const Transcripts = (props) => {
     const selectStyles = {
@@ -26,6 +27,7 @@ const Transcripts = (props) => {
     const isMouseOverRef = React.useRef(isMouseOver);
     const [transcriptNames, selectTranscriptNames] = useState([])
     const [transcriptPoints, selectTranscriptPoints] = useState([])
+    const [transcriptText, setTranscriptText] = useState("")
     const [tagsColors] = useState(['#A2849A','#C6A5AC','#DC9A83','#E1BE90','#CED1AB'])
     const setIsMouseOver = (state) => {
         isMouseOverRef.current = state;
@@ -62,7 +64,7 @@ const Transcripts = (props) => {
 
     }, [props, selectedVideo]);
 
-    const processTranscripts = (ids,val) => {
+    const processTranscripts = async (ids,val) => {
         let ann = JSON.parse(JSON.stringify(val));
         let names = [];
         let transcripts = []
@@ -74,6 +76,10 @@ const Transcripts = (props) => {
                 transcripts = transcripts.concat(item.transcript)
                 names.push([colorCode,item.label])
             }
+            if(item && item.kind && item.kind == "text"){
+                const response = await axios.get(item.src);
+                setTranscriptText(response.data)
+            }
         }
         let arrObj = transcripts.sort((a, b) => (parseFloat(a.starttime) > parseFloat(b.starttime)) ? 1 : -1)
         selectTranscriptNames(names)
@@ -89,6 +95,7 @@ const Transcripts = (props) => {
         let ids = e.map((i, key) => {
             return  i.value;
         })
+        setTranscriptText("")
         processTranscripts(ids,annotations);
     }
 
@@ -187,6 +194,7 @@ const Transcripts = (props) => {
                             return <TranscriptData point={point} index={index} autoScrollAndHighlight={autoScrollAndHighlight} key={index} searchWords={searchWords} />
                         }
                         )}
+                        {transcriptText ? transcriptText : ''}
                     </>
                 </div>
             </div>

diff --git a/src/components/player/Video.js b/src/components/player/Video.js
@@ -22,7 +22,7 @@ const Video = () => {
   };
 
   if (carouselID?.format.includes("audio/")) {
-    // videoJsOptions.aspectRatio = '1:0';
+    videoJsOptions.aspectRatio = '1:0';
     videoJsOptions.controlBar = {
       "fullscreenToggle": false,
       'pictureInPictureToggle': false

diff --git a/src/components/player/VideoJS.js b/src/components/player/VideoJS.js
@@ -27,6 +27,24 @@ export const VideoJS = (props) => {
                 console.log("player is ready");
                 onReady && onReady(player);
             }));
+            player.ready(function () {
+                if(carouselID.captions.length > 0)
+                {
+                    carouselID.captions.map((caption, index) => {
+                        let defaultIndex = '';
+                        if(index == 0) defaultIndex = 'showing';
+                        let captionOption = {
+                            kind: caption.kind,
+                            srclang: caption.language,
+                            label: caption.label,
+                            src: caption.src,
+                            mode: defaultIndex,
+                        }
+                        player.addRemoteTextTrack(captionOption);
+                    });
+                    const tracks = player.remoteTextTracks();
+                }
+            });
             // player.pip();
         }
 
@@ -39,7 +57,14 @@ export const VideoJS = (props) => {
                 player.vr({ projection: 'AUTO' });
             }
 
-            player.currentTime(0);
+            if(carouselID?.start_time)
+            {
+                player.currentTime(carouselID?.start_time);
+            }
+            else
+            {
+                player.currentTime(0);
+            }
         }
     }, [options, onReady, videoRef]);