Merge branch 'develop' into release

urfit-tech · Dec 13, 2023 · 43e4ce2 · 43e4ce2
2 parents 0f0294f + ff52054
commit 43e4ce2
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 67 deletions.
diff --git a/src/components/library/VideoLibraryItem.tsx b/src/components/library/VideoLibraryItem.tsx
@@ -127,60 +127,39 @@ export const PreviewButton: React.VFC<
         return
       }
 
-      const url = videoUrl.includes('hls') ? `${videoUrl.split('hls')[0]}*` : `${videoUrl.split('manifest')[0]}*`
       axios
-        .post(
-          `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/auth/sign-cloudfront-url`,
-          {
-            url,
+        .get(`${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos/${videoId}/sign`, {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
           },
-          {
-            headers: {
-              Authorization: `Bearer ${authToken}`,
-            },
-          },
-        )
-        .then(({ data }) => {
-          const search = new URL(data.result).search
-          const pathname = new URL(videoUrl).pathname
-          setSources([
-            {
-              type: 'application/x-mpegURL',
-              src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${pathname}${search}`,
-            },
-          ])
         })
-        .catch(error => console.log(error.toString()))
-        .finally(() => setLoading(false))
-      // getCaptions
-      const captionsPath = videoUrl.includes('hls')
-        ? url.replace('output', 'captions')
-        : url.replace('manifest', 'text')
-      axios
-        .post(
-          `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/auth/sign-cloudfront-url`,
-          {
-            url: `${captionsPath}`,
-          },
-          {
-            headers: {
-              Authorization: `Bearer ${authToken}`,
-            },
-          },
-        )
         .then(({ data }) => {
-          const search = new URL(data.result).search
-          axios
-            .get(`${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos/${videoId}/captions`, {
-              headers: {
-                Authorization: `Bearer ${authToken}`,
-              },
-            })
-            .then(response => {
-              const urls = response.data.result
-              const signedUrls = urls.map((key: any) => `${key}${search}`)
-              setCaptions(signedUrls)
-            })
+          const { signedVideoUrl, signedCaptionUrl, cloudfrontOptions, captionPaths } = data.result
+          const videoSearch = new URL(signedVideoUrl).search
+          const captionSearch = new URL(signedCaptionUrl).search
+          const hlsPath = cloudfrontOptions?.playPaths ? new URL(cloudfrontOptions.playPaths.hls).pathname : null
+          const dashPath = cloudfrontOptions?.playPaths ? new URL(cloudfrontOptions.playPaths.dash).pathname : null
+          const cloudfrontMigratedHlsPath = cloudfrontOptions?.path ? new URL(cloudfrontOptions.path).pathname : null
+          const source = cloudfrontOptions?.playPaths
+            ? [
+                {
+                  type: 'application/x-mpegURL',
+                  src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${hlsPath}${videoSearch}`,
+                },
+                {
+                  type: 'application/dash+xml',
+                  src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${dashPath}${videoSearch}`,
+                },
+              ]
+            : [
+                {
+                  type: 'application/x-mpegURL',
+                  src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${cloudfrontMigratedHlsPath}${videoSearch}`,
+                },
+              ]
+          const captions = captionPaths?.map((captionUrl: string) => `${captionUrl}${captionSearch}`)
+          setSources(source)
+          setCaptions(captions)
         })
         .catch(error => console.log(error))
         .finally(() => setLoading(false))

diff --git a/src/components/library/VidoePlayer.tsx b/src/components/library/VidoePlayer.tsx
@@ -26,14 +26,14 @@ const VideoPlayer: React.VFC<VideoJsPlayerProps> = props => {
   const videoOptions: VideoJsPlayerOptions = {
     html5: {
       vhs: {
-        overrideNative: true,
+        overrideNative: !(isMobile && isIOS),
         limitRenditionByPlayerDimensions: false,
         useBandwidthFromLocalStorage: true,
         useNetworkInformationApi: true,
       },
-      nativeTextTracks: false,
-      nativeAudioTracks: false,
-      nativeVideoTracks: false,
+      nativeTextTracks: isMobile && isIOS,
+      nativeAudioTracks: isMobile && isIOS,
+      nativeVideoTracks: isMobile && isIOS,
     },
     language: currentLocale,
     playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
@@ -93,7 +93,11 @@ const VideoPlayer: React.VFC<VideoJsPlayerProps> = props => {
     })
     for (let i = 0; i < textTracks.length; i++) {
       let track = textTracks[i]
-      if (track.kind === 'captions' || track.kind === 'subtitles') {
+      if (track.kind === 'captions') {
+        track.mode = 'hidden'
+        break
+      }
+      if (track.kind === 'subtitles') {
         track.mode = 'showing'
         break
       }
@@ -128,11 +132,14 @@ const VideoPlayer: React.VFC<VideoJsPlayerProps> = props => {
         className="video-js vjs-big-play-centered"
         ref={ref => {
           if (ref && !playerRef.current && Number(videoOptions.sources?.length) > 0) {
-            playerRef.current = videojs(ref, videoOptions, function () {})
+            playerRef.current = videojs(ref, videoOptions, function () {
+              this.on('loadeddata', () => {
+                setCaption(playerRef.current as VideoJsPlayer)
+              })
+            })
             props.onChangePlayerInstance(playerRef.current)
           }
         }}
-        onLoadedData={handleOnLoadedData}
         autoPlay
         controls
       />

diff --git a/src/hooks/data.ts b/src/hooks/data.ts
@@ -1005,7 +1005,7 @@ export const useAttachments = (options?: { contentType?: string; status?: string
 export const useCaptions = (videoAttachmentId?: string) => {
   const captionLanguages = [
     { srclang: 'zh', language: 'Mandarin Chinese', label: '中文' },
-    { srclang: 'en', language: ' English', label: 'English' },
+    { srclang: 'en', language: 'English', label: 'English' },
     { srclang: 'ko', language: 'Korean', label: '조선말' },
     { srclang: 'ja', language: 'Japanese', label: '日本語' },
     { srclang: 'hi', language: 'Hindi', label: 'हिन्दी' },
@@ -1053,11 +1053,14 @@ export const useCaptions = (videoAttachmentId?: string) => {
   const deleteCaption = useCallback(
     (languageCode: string) =>
       axios
-        .delete(`${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos/${videoAttachmentId}/captions/${languageCode}`, {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
+        .delete(
+          `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos/${videoAttachmentId}/captions/${languageCode}`,
+          {
+            headers: {
+              Authorization: `Bearer ${authToken}`,
+            },
           },
-        })
+        )
         .then(({ data: { code } }) => {
           code === 'SUCCESS' && refetchCaption()
         }),

diff --git a/src/pages/MediaLibraryPage/MediaLibraryPage.tsx b/src/pages/MediaLibraryPage/MediaLibraryPage.tsx
@@ -60,8 +60,9 @@ export const configAwsS3MultipartUppy = ({
       companionUrl: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/storage`,
       createMultipartUpload: async file => {
         const id = origin?.id || uuid()
-        const fileName = dayjs().format('YYYYMMDDHHmmss') + '_' + (origin?.name || file.name)
-        const key = `vod/${appId}/${id.substring(0, 2)}/${id}/video/${fileName}`
+        const key = `vod/${appId}/${id.substring(0, 2)}/${id}/video/${
+          dayjs().format('YYYYMMDDHHmmss') + '_' + file.name
+        }`
 
         const createResponse = await axios.post(
           `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/storage/multipart/create`,
@@ -92,16 +93,15 @@ export const configAwsS3MultipartUppy = ({
       },
       completeMultipartUpload: async (file, opts) => {
         const duration = await getVideoDuration(file.data as File)
-        const fileName = origin?.name || file.name
-
         const attachmentId = origin?.id || opts.key.split('/')[3]
         const completedUploadResponse = await axios.post(
           `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/storage/multipart/complete`,
           {
             params: { Key: opts.key, UploadId: opts.uploadId, MultipartUpload: { Parts: opts.parts } },
-            file: { name: fileName, type: file.type, size: file.size },
+            file: { name: file.name, type: file.type, size: file.size },
             appId: appId,
             attachmentId,
+            attachmentName: origin?.name || file.name,
             authorId: currentMemberId,
             duration,
           },