fix seeking for dash

src/components/App/App.tsx

@@ -1,5 +1,4 @@
 import type MediasoupClient from 'mediasoup-client';
-import type { MediaPlayerClass } from 'dashjs';
 import axios from 'axios';
 import React from 'react';
 import {
@@ -74,7 +73,6 @@ declare global {
       videoRefs: HTMLVideoElementDict;
       videoPCs: PCDict;
       webtorrent: WebTorrent.Instance | null;
-      dashPlayer: MediaPlayerClass | undefined;
     };
   }
 }
@@ -84,7 +82,6 @@ window.watchparty = {
   videoRefs: {},
   videoPCs: {},
   webtorrent: null,
-  dashPlayer: undefined,
 };
 
 interface AppProps {
@@ -451,7 +448,7 @@ export default class App extends React.Component<AppProps, AppState> {
           }
           this.YouTubeInterface.stopVideo();
 
-          window.watchparty.dashPlayer = undefined;
+          this.Player().clearDashState();
           if (!this.isLocalStreamAFile) {
             this.Player().clearState();
           }
@@ -561,7 +558,7 @@ export default class App extends React.Component<AppProps, AppState> {
             const dashPlayer = Dash.MediaPlayer().create();
             this.setState({ isLiveStream: true });
             dashPlayer.initialize(leftVideo, src);
-            window.watchparty.dashPlayer = dashPlayer;
+            this.Player().setDashState(dashPlayer);
           } else if (isHls(src) && window.MediaSource) {
             // Prefer using hls.js if MediaSource Extensions are supported
             // otherwise fallback to native HLS support using video tag (i.e. iPhones)

src/components/App/HTML.ts

@@ -1,26 +1,42 @@
 import { default as toWebVTT } from 'srt-webvtt';
 import { Player } from './Player';
+import { MediaPlayerClass } from 'dashjs';
 
 export class HTML implements Player {
   elId: string;
+  dashStartUTC: number;
+  dashPlayer: MediaPlayerClass | undefined;
   constructor(elId: string) {
     this.elId = elId;
+    this.dashStartUTC = Math.floor(Date.now() / 1000);
+    this.dashPlayer = undefined;
   }
 
+  clearDashState = () => {
+    this.dashPlayer = undefined;
+  };
+
+  setDashState = (player: MediaPlayerClass) => {
+    this.dashPlayer = player;
+    this.dashStartUTC = Math.floor(Date.now() / 1000);
+  };
+
   getVideoEl = (): HTMLMediaElement => {
     return document.getElementById(this.elId) as HTMLMediaElement;
   };
 
   getCurrentTime = () => {
+    if (this.dashPlayer) {
+      return this.dashPlayer.time();
+    }
     return this.getVideoEl()?.currentTime ?? 0;
   };
 
   getDuration = () => {
-    return (
-      window.watchparty.dashPlayer?.duration() ??
-      this.getVideoEl()?.duration ??
-      0
-    );
+    if (this.dashPlayer) {
+      return this.dashPlayer.duration();
+    }
+    return this.getVideoEl()?.duration ?? 0;
   };
 
   isMuted = () => {
@@ -62,7 +78,9 @@ export class HTML implements Player {
   };
 
   seekVideo = (time: number) => {
-    if (this.getVideoEl()) {
+    if (this.dashPlayer) {
+      this.dashPlayer.seek(time);
+    } else if (this.getVideoEl()) {
       this.getVideoEl().currentTime = time;
     }
   };

src/components/App/Player.ts

@@ -1,3 +1,5 @@
+import type { MediaPlayerClass } from 'dashjs';
+
 export abstract class Player {
   public abstract getCurrentTime: () => number;
   public abstract getDuration: () => number;
@@ -22,4 +24,6 @@ export abstract class Player {
   public abstract getTimeRanges: () => { start: number; end: number }[];
   public abstract setLoop: (loop: boolean) => void;
   public abstract getVideoEl: () => HTMLMediaElement;
+  public abstract clearDashState: () => void;
+  public abstract setDashState: (player: MediaPlayerClass) => void;
 }

src/components/App/YouTube.ts

@@ -1,10 +1,14 @@
+import { MediaPlayerClass } from 'dashjs';
 import { Player } from './Player';
 
 export class YouTube implements Player {
   watchPartyYTPlayer: YT.Player | null;
   constructor(watchPartyYTPlayer: YT.Player | null) {
     this.watchPartyYTPlayer = watchPartyYTPlayer;
   }
+  clearDashState = () => {};
+  setDashState = (player: MediaPlayerClass) => {};
+
   getCurrentTime = () => {
     return this.watchPartyYTPlayer?.getCurrentTime() ?? 0;
   };