Trouble shooting - video player from swarmify

[emily40830]

1. iphone 無法正常播放

部分客戶反應用iphone會有不能撥放和嚴重延遲情形，安桌和電腦撥放是順暢的

Steps to reproduce:
(目前無法重現問題，無法播放的原因只是在 s3 上抓不到資料)

1. 用 iphone 任一瀏覽器，進入 https://sunk.lodestar-dev.cc ，帳密資訊在 trello 或向 @emily40830 索取
2. 進入 https://sunk.lodestar-dev.cc/programs/7756fef8-1d53-45b8-abdf-c390d9f7ff27/contents/13814cbe-8364-4920-b138-09f50a4c46dd 後觀看影片

Expected result： 正常播放
Actual result： 正常播放
Reported by: sunk
Source URL: https://sunk.fun/programs/835448a1-9d94-4d83-9bea-8054fb56101b/contents/e83d3229-17be-42dd-a577-9e898815d6c5

2. 手機版字幕顯示異常

Steps to reproduce:

1. 登入管理員帳密，帳密資訊在 trello 或向 @emily40830 索取
2. 在手機任一瀏覽器 進入 https://www.xuemi.co/programs/3391160d-3574-4922-85d4-5c988f0d39f6/contents/f41d69c2-e0ff-49c3-ab00-88733bbbc161?back=project_50b678a6-14b0-4148-b706-724d7e834e20

Actual Result： 字幕隨著影片畫面放到正確位置

Expected Result： 使用 iphone safari 測試字幕跑版，點擊播放後變成全螢幕，字幕消失，但實際上是跑版到播放器區塊外。用 iphone chrome 測試也是在手機橫放全螢幕播放的時候字幕消失

Reported by: @zihrou2

SourceURL: https://www.xuemi.co/programs/3391160d-3574-4922-85d4-5c988f0d39f6/contents/f41d69c2-e0ff-49c3-ab00-88733bbbc161?back=project_50b678a6-14b0-4148-b706-724d7e834e20

Capture in: Safari in iPhone & chrome

3. 未登入狀況無法觀看影片

課程項目列為試看者，新版播放器會無法播放

Steps to reproduce:
目前暫時將所有試看影片都用 vimeo 播放器，因此重現此問題需在 local 自行修改部分程式碼
將lodestar-app#ProgramContentTrialModal.tsx
的 isSwarmifyAvailable 改為 true

Actual Result： 播放器整個消失

預期狀況： 要像 vimeo 的樣子

Reported by: Emily ([email protected])

Source URL:
為避免客戶的看課權益受損，先在 local 重現此問題並修正
http://localhost:3333/programs/099956ea-ce64-429e-9ce8-201eaea3d203

Console: View console logs

Captured in Chrome 92.0.4515.131, 1422 x 675 viewport, @1.7999999523162842x pixel ratio, 90% zoom, OS X 10.15.7

4. 影片按下暫停鍵後 音檔依舊繼續撥放

客戶反應

目前只有一位客戶反應此問題，且不只出現一次，換分頁也會一直播
客戶錄製 影片輔助
https://trello-attachments.s3.amazonaws.com/5d5114df987edd314be50baa/60e4ffa39c93f26b00336c6e/c4ec964778ff4486afd651bc774cc388/line_oa_chat_210702_154341.mp4

工程確認

目前無法重現此問題

5. 在播放時調快倍速後，跳到其他秒數，會變回原本的倍速

Steps to reproduce:
測試連結：https://demo.lodestar-dev.cc/programs/099956ea-ce64-429e-9ce8-201eaea3d203/contents/e55053a9-ac63-4930-9e79-dc05ef440ab3
登入帳密 在 trello 或向 @emily40830 索取

1. 讓影片維持播放
2. 調整播放速率
3. 用滑鼠點擊到播放軸的任一位置或鍵盤左右鍵點擊

Actual result:
有外力介入播放狀態，會導致播放速率變回初始值 https://recordit.co/IwNn9nfDhn

Expected result:
維持調整後的速率

Reported by: Emily ([email protected])

Source URL: https://demo.lodestar-dev.cc/programs/099956ea-ce64-429e-9ce8-201eaea3d203/contents/e55053a9-ac63-4930-9e79-dc05ef440ab3

Console: View console logs

Captured in Chrome 92.0.4515.159, 1280 x 608 viewport, @2x pixel ratio, 100% zoom, OS X 10.15.7

6. 調左右鍵控制播放軸，音量會變回初始值

Steps to reproduce:
測試連結：https://demo.lodestar-dev.cc/programs/099956ea-ce64-429e-9ce8-201eaea3d203/contents/e55053a9-ac63-4930-9e79-dc05ef440ab3
登入帳密 在 trello 或向 @emily40830 索取

1. 調整音量控制閥
2. 利用鍵盤左右鍵控制播放軸位置

Actual result:
如影片 https://recordit.co/IwNn9nfDhn
調整音量控制閥後，透過滑鼠或鍵盤左右鍵調整播放軸，都會讓音量變回初始狀態(100%)
Expected result:
調整音量控制閥後，無論播放軸透過什麼方式變動(滑鼠點擊或是鍵盤左右鍵)，都要維持調整後的音量

Reported by: Emily ([email protected])

Source URL: https://demo.lodestar-dev.cc/programs/099956ea-ce64-429e-9ce8-201eaea3d203/contents/e55053a9-ac63-4930-9e79-dc05ef440ab3

Console: View console logs

Captured in Chrome 92.0.4515.159, 1280 x 608 viewport, @2x pixel ratio, 100% zoom, OS X 10.15.7

7. progress event 多次觸發

https://recordit.co/rWoUGRmmFZ
位置：lodestar-app -> ProgramContentPlayer.tsx
SmartVideo 這個 component 內

player.on('progress', (e: Event) => {
        if (smartVideoPlayer.current._lastEndedTime === null) {
          return
        }
        console.log('prograss on!!!', player.currentTime())
        onEvent({
          type: 'progress',
          progress: player.currentTime() / player.duration(),
          videoState: {
            playbackRate: player.playbackRate(),
            startedAt: smartVideoPlayer.current._lastEndedTime || 0,
            endedAt: player.currentTime(),
          },
        })
      })