@banou/media-player 0.6.0 → 0.6.2

package/README.md

@@ -1,6 +1,6 @@
-## Media Player
-
-A player that somehow manages to playback MKV files
-
-
-Todo: add support for multi audio tracks
+## Media Player
+
+A player that somehow manages to playback MKV files
+
+
+Todo: add support for multi audio tracks

package/package.json

@@ -1,51 +1,51 @@
-{
-  "name": "@banou/media-player",
-  "version": "0.6.0",
-  "description": "",
-  "type": "module",
-  "main": "build/index.js",
-  "files": [
-    "build",
-    "tsconfig.json",
-    "tsconfig.node.json",
-    "src"
-  ],
-  "scripts": {
-    "dev": "vite --port 4560",
-    "build-dev": "vite build --watch",
-    "build": "vite build && npm run types",
-    "build-for-dev": "vite build && npm run copy-dependencies && npm run types",
-    "copy-dependencies": "npm run copy-libass && npm run copy-worker && npm run copy-worker-wasm",
-    "copy-worker": "shx cp node_modules/libav-wasm/build/worker.js build/libav.js",
-    "copy-worker-wasm": "shx cp node_modules/libav-wasm/build/libav.wasm build/libav.wasm",
-    "copy-libass": "copyfiles -u 3 ./node_modules/jassub/dist/* build",
-    "types": "tsc"
-  },
-  "author": "Banou26",
-  "devDependencies": {
-    "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@vitejs/plugin-react": "^4.3.4",
-    "concurrently": "^7.6.0",
-    "copyfiles": "^2.4.1",
-    "mime": "^3.0.0",
-    "shx": "^0.3.4",
-    "typescript": "^5.8.2",
-    "vite": "^6.2.1"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@xstate/react": "^5.0.1",
-    "ass-compiler": "^0.1.15",
-    "jassub": "^1.7.18",
-    "libav-wasm": "^0.6.0",
-    "osra": "^0.1.2",
-    "p-queue": "^7.3.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-feather": "^2.0.10",
-    "react-tooltip": "^5.28.0",
-    "xstate": "^5.19.1"
-  }
-}
+{
+  "name": "@banou/media-player",
+  "version": "0.6.2",
+  "description": "",
+  "type": "module",
+  "main": "build/index.js",
+  "files": [
+    "build",
+    "tsconfig.json",
+    "tsconfig.node.json",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite --port 4560",
+    "build-dev": "vite build --watch",
+    "build": "vite build && npm run types",
+    "build-for-dev": "vite build && npm run copy-dependencies && npm run types",
+    "copy-dependencies": "npm run copy-libass && npm run copy-worker && npm run copy-worker-wasm",
+    "copy-worker": "shx cp node_modules/libav-wasm/build/worker.js build/libav.js",
+    "copy-worker-wasm": "shx cp node_modules/libav-wasm/build/libav.wasm build/libav.wasm",
+    "copy-libass": "copyfiles -u 3 ./node_modules/jassub/dist/* build",
+    "types": "tsc"
+  },
+  "author": "Banou26",
+  "devDependencies": {
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^7.6.0",
+    "copyfiles": "^2.4.1",
+    "mime": "^3.0.0",
+    "shx": "^0.3.4",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.1"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@xstate/react": "^5.0.1",
+    "ass-compiler": "^0.1.15",
+    "jassub": "^1.7.18",
+    "libav-wasm": "^0.6.2",
+    "osra": "^0.1.2",
+    "p-queue": "^7.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-feather": "^2.0.10",
+    "react-tooltip": "^5.28.0",
+    "xstate": "^5.19.1"
+  }
+}

package/src/assets/picture-in-picture.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-picture-in-picture">
-	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-	<path d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4" />
-	<path d="M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-picture-in-picture">
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4" />
+	<path d="M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z" />
+</svg>

package/src/components/chrome.tsx

@@ -1,95 +1,95 @@
-/// <reference types="@emotion/react/types/css-prop" />
-import { MouseEventHandler, ReactNode, useContext, useRef, type HTMLAttributes } from 'react'
-
-import { css } from '@emotion/react'
-
-import { MediaMachineContext } from '../state-machines'
-import { MediaPlayerContext } from '../utils/context'
-import { togglePlay } from '../utils/actor-utils'
-import { Overlay } from './overlay'
-import ControlBar from './control-bar'
-
-const style = css`
-  position: relative;
-  background-color: black;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-
-  & > div:not(:last-of-type) {
-    position: absolute;
-    z-index: 2;
-  }
-
-  canvas {
-    height: 100%;
-    width: 100%;
-    pointer-events: none;
-    position: absolute;
-    z-index: 1;
-  }
-
-  .video, video {
-    height: 100%;
-    width: 100%;
-    background-color: black;
-    object-fit: contain;
-  }
-
-  &.hide {
-    cursor: none;
-  }
-`
-
-export type ChromeOptions = {
-  mediaInformation?: ReactNode
-  loadingInformation?: ReactNode
-} & HTMLAttributes<HTMLDivElement>
-
-export const Chrome = ({ children, mediaInformation, loadingInformation }: ChromeOptions) => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const mediaPlayerContext = useContext(MediaPlayerContext)
-  const isPaused = MediaMachineContext.useSelector((state) => state.context.media.paused)
-  const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
-  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
-
-  const autoHide = useRef<number>()
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const mouseMove: MouseEventHandler<HTMLDivElement> = (ev) => {
-    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: false }))
-    if (autoHide.current) clearInterval(autoHide.current)
-    const timeout = setTimeout(() => {
-      mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
-    }, 3_000) as unknown as number
-    autoHide.current = timeout
-  }
-
-  const mouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
-    if (ev.currentTarget.parentElement !== ev.relatedTarget && ev.relatedTarget !== null) return
-    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
-  }
-
-  return (
-    <div
-      css={style}
-      ref={containerRef}
-      onMouseMove={mouseMove}
-      onMouseOut={mouseOut}
-      className={mediaPlayerContext.hideUI ? 'hide' : ''}
-    >
-      <Overlay loadingInformation={loadingInformation}/>
-      <ControlBar mediaInformation={mediaInformation} containerRef={containerRef}/>
-      <div
-        className='video'
-        onClick={() => togglePlay(mediaActor, isPaused, duration, currentTime)}
-      >
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default Chrome
+/// <reference types="@emotion/react/types/css-prop" />
+import { MouseEventHandler, ReactNode, useContext, useRef, type HTMLAttributes } from 'react'
+
+import { css } from '@emotion/react'
+
+import { MediaMachineContext } from '../state-machines'
+import { MediaPlayerContext } from '../utils/context'
+import { togglePlay } from '../utils/actor-utils'
+import { Overlay } from './overlay'
+import ControlBar from './control-bar'
+
+const style = css`
+  position: relative;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+
+  & > div:not(:last-of-type) {
+    position: absolute;
+    z-index: 2;
+  }
+
+  canvas {
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .video, video {
+    height: 100%;
+    width: 100%;
+    background-color: black;
+    object-fit: contain;
+  }
+
+  &.hide {
+    cursor: none;
+  }
+`
+
+export type ChromeOptions = {
+  mediaInformation?: ReactNode
+  loadingInformation?: ReactNode
+} & HTMLAttributes<HTMLDivElement>
+
+export const Chrome = ({ children, mediaInformation, loadingInformation }: ChromeOptions) => {
+  const mediaActor = MediaMachineContext.useActorRef()
+  const mediaPlayerContext = useContext(MediaPlayerContext)
+  const isPaused = MediaMachineContext.useSelector((state) => state.context.media.paused)
+  const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
+  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
+
+  const autoHide = useRef<number>()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const mouseMove: MouseEventHandler<HTMLDivElement> = (ev) => {
+    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: false }))
+    if (autoHide.current) clearInterval(autoHide.current)
+    const timeout = setTimeout(() => {
+      mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
+    }, 3_000) as unknown as number
+    autoHide.current = timeout
+  }
+
+  const mouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
+    if (ev.currentTarget.parentElement !== ev.relatedTarget && ev.relatedTarget !== null) return
+    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
+  }
+
+  return (
+    <div
+      css={style}
+      ref={containerRef}
+      onMouseMove={mouseMove}
+      onMouseOut={mouseOut}
+      className={mediaPlayerContext.hideUI ? 'hide' : ''}
+    >
+      <Overlay loadingInformation={loadingInformation}/>
+      <ControlBar mediaInformation={mediaInformation} containerRef={containerRef}/>
+      <div
+        className='video'
+        onClick={() => togglePlay(mediaActor, isPaused, duration, currentTime)}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Chrome