first commit

common/resources/client/player/providers/html-video-provider.tsx

@@ -0,0 +1,54 @@
+import {usePlayerStore} from '@common/player/hooks/use-player-store';
+import {useContext, useEffect, useRef} from 'react';
+import {PlayerStoreContext} from '@common/player/player-context';
+import {useHtmlMediaInternalState} from '@common/player/providers/html-media/use-html-media-internal-state';
+import {useHtmlMediaEvents} from '@common/player/providers/html-media/use-html-media-events';
+import {useHtmlMediaApi} from '@common/player/providers/html-media/use-html-media-api';
+
+export function HtmlVideoProvider() {
+  const ref = useRef<HTMLVideoElement>(null);
+
+  const autoPlay = usePlayerStore(s => s.options.autoPlay);
+  const muted = usePlayerStore(s => s.muted);
+  const cuedMedia = usePlayerStore(s => s.cuedMedia);
+  const store = useContext(PlayerStoreContext);
+
+  const state = useHtmlMediaInternalState(ref);
+  const events = useHtmlMediaEvents(state);
+  const providerApi = useHtmlMediaApi(state);
+
+  useEffect(() => {
+    store.setState({
+      providerApi,
+    });
+  }, [store, providerApi]);
+
+  let src = cuedMedia?.src;
+  if (src && cuedMedia?.initialTime) {
+    src = `${src}#t=${cuedMedia.initialTime}`;
+  }
+
+  return (
+    <video
+      className="w-full h-full"
+      ref={ref}
+      src={src}
+      playsInline
+      poster={cuedMedia?.poster}
+      autoPlay={autoPlay}
+      muted={muted}
+      {...events}
+    >
+      {cuedMedia?.captions?.map((caption, index) => (
+        <track
+          key={caption.id}
+          label={caption.label}
+          kind="subtitles"
+          srcLang={caption.language || 'en'}
+          src={caption.src}
+          default={index === 0}
+        />
+      ))}
+    </video>
+  );
+}