@banou/media-player 0.4.5 → 0.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "",
   "type": "module",
   "main": "build/index.js",

package/src/components/chrome.tsx

@@ -15,6 +15,8 @@ const style = css`
   display: flex;
   justify-content: center;
   align-items: center;
+  height: 100%;
+  width: 100%;
 
   & > div:not(:last-of-type) {
     position: absolute;
@@ -33,6 +35,7 @@ const style = css`
     height: 100%;
     width: 100%;
     background-color: black;
+    object-fit: contain;
   }
 
   &.hide {

package/src/components/progress-bar.tsx

@@ -143,6 +143,7 @@ export const ProgressBar = () => {
     setProgressBarOverTime(undefined)
   }
 
+  // file download % does not equal video time %, as the video contains sometimes, big headers including fonts, which might be ~50mb
   const loadedParts = useMemo(() =>
     mediaPlayerContext
       .downloadedRanges

package/src/index.tsx

@@ -17,6 +17,7 @@ const FKNVideoRootStyle = css`
   justify-content: center;
   background-color: #111;
   height: 100%;
+  width: 100%;
   overflow: hidden;
 `
 

package/src/state-machines/subtitles.ts

@@ -149,8 +149,17 @@ export default fromAsyncCallback<SubtitlesEvents, SubtitlesInput, SubtitlesEmitt
         throw new Error('newSubtitleStreams is undefined')
       }
       const parsedHeader = parse(newSubtitleStreams.header.content)
-      const modifiedHeader = { ...parsedHeader, info: { ...parsedHeader.info, ScaledBorderAndShadow: 'no' as const } }
-      jassubInstance.setTrack(stringify(modifiedHeader))
+      const modifiedHeader = {
+        ...parsedHeader,
+        info: {
+          ...parsedHeader.info,
+          ScaledBorderAndShadow: 'no' as const,
+          LayoutResX: '',
+          LayoutResY: ''
+        }
+      }
+      const header = stringify(modifiedHeader)
+      jassubInstance.setTrack(header)
       jassubInstance.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
       for (const styleIndex in newSubtitleStreams.header.parsed.styles) {
         const style = newSubtitleStreams.header.parsed.styles.style[Number(styleIndex)]
@@ -212,11 +221,20 @@ export default fromAsyncCallback<SubtitlesEvents, SubtitlesInput, SubtitlesEmitt
         } else if (subtitlePart.type === 'header') {
           if (!jassubInstance) {
             const parsedHeader = parse(subtitlePart.content)
-            const modifiedHeader = { ...parsedHeader, info: { ...parsedHeader.info, ScaledBorderAndShadow: 'no' as const } }
+            const modifiedHeader = {
+              ...parsedHeader,
+              info: {
+                ...parsedHeader.info,
+                ScaledBorderAndShadow: 'no' as const,
+                LayoutResX: '',
+                LayoutResY: ''
+              }
+            }
+            const header = stringify(modifiedHeader)
             jassubInstance = new JASSUB({
               video,
               canvas,
-              subContent: stringify(modifiedHeader),
+              subContent: header,
               workerUrl: subtitlesRendererOptions.workerUrl,
               modernWasmUrl: subtitlesRendererOptions.wasmUrl,
               fonts: attachments.filter(Boolean).map(([filename, data]) => data),