Revert "Merge branch 'release'"

This reverts commit a6f711b, reversing
changes made to 82ea717.

src/components/library/VideoLibraryItem.tsx

@@ -127,38 +127,60 @@ export const PreviewButton: React.VFC<
         return
       }
 
+      const url = videoUrl.includes('hls') ? `${videoUrl.split('hls')[0]}*` : `${videoUrl.split('manifest')[0]}*`
       axios
-        .get(`${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos/${videoId}/sign`, {
-          headers: {
-            Authorization: `Bearer ${authToken}`,
+        .post(
+          `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/auth/sign-cloudfront-url`,
+          {
+            url,
           },
+          {
+            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 {
-            videoSignedPaths: { hlsPath, dashPath, cloudfrontMigratedHlsPath },
-            captionSignedUrls,
-          } = data.result
-
-          const source =
-            hlsPath && dashPath
-              ? [
-                  {
-                    type: 'application/x-mpegURL',
-                    src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${hlsPath}&token=${authToken}`,
-                  },
-                  {
-                    type: 'application/dash+xml',
-                    src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${dashPath}&token=${authToken}`,
-                  },
-                ]
-              : [
-                  {
-                    type: 'application/x-mpegURL',
-                    src: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/videos${cloudfrontMigratedHlsPath}&token=${authToken}`,
-                  },
-                ]
-          setSources(source)
-          setCaptions(captionSignedUrls)
+          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)
+            })
         })
         .catch(error => console.log(error))
         .finally(() => setLoading(false))

src/components/library/VidoePlayer.tsx

@@ -26,14 +26,14 @@ const VideoPlayer: React.VFC<VideoJsPlayerProps> = props => {
   const videoOptions: VideoJsPlayerOptions = {
     html5: {
       vhs: {
-        overrideNative: !(isMobile && isIOS),
+        overrideNative: true,
         limitRenditionByPlayerDimensions: false,
         useBandwidthFromLocalStorage: true,
         useNetworkInformationApi: true,
       },
-      nativeTextTracks: isMobile && isIOS,
-      nativeAudioTracks: isMobile && isIOS,
-      nativeVideoTracks: isMobile && isIOS,
+      nativeTextTracks: false,
+      nativeAudioTracks: false,
+      nativeVideoTracks: false,
     },
     language: currentLocale,
     playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
@@ -93,11 +93,7 @@ const VideoPlayer: React.VFC<VideoJsPlayerProps> = props => {
     })
     for (let i = 0; i < textTracks.length; i++) {
       let track = textTracks[i]
-      if (track.kind === 'captions') {
-        track.mode = 'hidden'
-        break
-      }
-      if (track.kind === 'subtitles') {
+      if (track.kind === 'captions' || track.kind === 'subtitles') {
         track.mode = 'showing'
         break
       }
@@ -132,14 +128,11 @@ 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 () {
-              this.on('loadeddata', () => {
-                setCaption(playerRef.current as VideoJsPlayer)
-              })
-            })
+            playerRef.current = videojs(ref, videoOptions, function () {})
             props.onChangePlayerInstance(playerRef.current)
           }
         }}
+        onLoadedData={handleOnLoadedData}
         autoPlay
         controls
       />

src/hooks/data.ts

@@ -1003,7 +1003,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: 'हिन्दी' },

src/pages/MediaLibraryPage/MediaLibraryPage.tsx

@@ -60,9 +60,8 @@ export const configAwsS3MultipartUppy = ({
       companionUrl: `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/storage`,
       createMultipartUpload: async file => {
         const id = origin?.id || uuid()
-        const key = `vod/${appId}/${id.substring(0, 2)}/${id}/video/${
-          dayjs().format('YYYYMMDDHHmmss') + '_' + file.name
-        }`
+        const fileName = dayjs().format('YYYYMMDDHHmmss') + '_' + (origin?.name || file.name)
+        const key = `vod/${appId}/${id.substring(0, 2)}/${id}/video/${fileName}`
 
         const createResponse = await axios.post(
           `${process.env.REACT_APP_LODESTAR_SERVER_ENDPOINT}/storage/multipart/create`,
@@ -93,15 +92,16 @@ 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: file.name, type: file.type, size: file.size },
+            file: { name: fileName, type: file.type, size: file.size },
             appId: appId,
             attachmentId,
-            attachmentName: origin?.name || file.name,
             authorId: currentMemberId,
             duration,
           },

src/pages/MemberAdminPage/MemberHistoryAdminBlock.tsx

@@ -1,5 +1,6 @@
-import { gql, useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 import { Breadcrumb, DatePicker, Slider, Timeline } from 'antd'
+import { gql } from '@apollo/client'
 import moment, { Moment } from 'moment'
 import { RangeValue } from 'rc-picker/lib/interface'
 import React, { useState } from 'react'
@@ -15,37 +16,7 @@ const MemberHistoryAdminBlock: React.VFC<{ memberId: string }> = ({ memberId })
       endedAt: dateRange?.[1],
     },
   })
-
-  const isValidLog = (log: ProgramContentLog) => log.ended_at - log.started_at > 1
-
-  // sort Logs desc first
-  const sortedLogs = (data?.program_content_log || [])
-    .filter(isValidLog)
-    .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-
-  type ProgramContentLog = hasura.GET_HISTORY['program_content_log'][number]
-
-  const mergedLogs = sortedLogs
-    .reduce<ProgramContentLog[]>((accumulatedLogs, currentLog) => {
-      const lastLog = accumulatedLogs[accumulatedLogs.length - 1]
-
-      if (lastLog && lastLog.program_content.id === currentLog.program_content.id) {
-        // Merge consecutive logs with the same program_content ID.
-        // Update the last log to have the earliest 'started_at' and the latest 'ended_at'.
-        const updatedLog = {
-          ...lastLog,
-          started_at: Math.min(lastLog.started_at, currentLog.started_at),
-          ended_at: Math.max(lastLog.ended_at, currentLog.ended_at),
-        }
-        accumulatedLogs[accumulatedLogs.length - 1] = updatedLog
-      } else {
-        // If not consecutive, add the current log as a new entry.
-        accumulatedLogs.push({ ...currentLog })
-      }
-      return accumulatedLogs
-    }, [])
-    .filter(isValidLog)
-
+  const logs = data?.program_content_log.filter(v => v.ended_at - v.started_at > 1) || []
   return (
     <>
       <DatePicker.RangePicker
@@ -60,11 +31,11 @@ const MemberHistoryAdminBlock: React.VFC<{ memberId: string }> = ({ memberId })
         onChange={dates => setDateRange(dates)}
       />
       <AdminBlock>
-        {!loading && mergedLogs.length === 0 ? (
+        {!loading && logs.length === 0 ? (
           <div>No history.</div>
         ) : (
           <Timeline pending={loading ? 'Loading...' : null}>
-            {mergedLogs.map(v => (
+            {logs.map(v => (
               <Timeline.Item key={v.id}>
                 <span className="mr-2">{moment(v.created_at).format('MM-DD HH:mm')}</span>
                 <div className="row">
@@ -98,16 +69,12 @@ const MemberHistoryAdminBlock: React.VFC<{ memberId: string }> = ({ memberId })
                         </a>
                       </Breadcrumb.Item>
                     </Breadcrumb>
-                    <div>
-                      {v.program_content.duration > 0
-                        ? `${Math.round(((v.ended_at - v.started_at) / v.program_content.duration) * 100)}% watched`
-                        : '0% watched'}
-                    </div>
+                    <div>{Math.round(((v.ended_at - v.started_at) / v.program_content.duration) * 100)}% watched</div>
                   </div>
                   <div className="col-12 col-lg-6">
                     <Slider
                       range
-                      max={Math.round(v.program_content.duration)}
+                      max={v.program_content.duration}
                       defaultValue={[v.started_at, v.ended_at]}
                       disabled
                       tipFormatter={v => v && new Date(v * 1000).toISOString().substr(11, 8)}

src/translations/locales/zh-tw.json

@@ -1663,7 +1663,6 @@
   "member.ui.switchTable": "切換列表模式",
   "member.ui.newTask":"新增待辦",
   "member.ui.editTask":"編輯待辦",
-  "member.ui.memberPage": "學員主頁",
   "member.status.priorityHigh":"High",
   "member.status.priorityMedium":"Medium",
   "member.status.priorityLow":"Low",