fix: enable eslint & run eslint:fix

.vscode/settings.json

@@ -1,9 +1,9 @@
 {
   // At some point, we'll watch to flick this on and uncomment lines 5 & 6 below.
-  "eslint.enable": false,
+  "eslint.enable": true,
   // Disable the default formatter, use eslint instead
-  // "prettier.enable": false,
-  // "editor.formatOnSave": false,
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
 
   // Auto fix
   "editor.codeActionsOnSave": {

eslint.config.mjs

@@ -17,7 +17,9 @@ export default antfu({
     indent: 2,
     quotes: 'single',
   },
-  ignores: ['node_modules', 'dist'],
+  // Many are ignored by default.
+  // https://github.com/antfu/eslint-config/blob/main/src/globs.ts#L56
+  ignores: ['**/.astro/'],
   plugins: {
     'jsx-a11y': jsxA11y,
   },

examples/html-demo/package.json

@@ -1,9 +1,9 @@
 {
   "name": "html-demo",
+  "type": "module",
   "version": "1.0.0",
-  "description": "HTML example for Video.js 10",
   "private": true,
-  "type": "module",
+  "description": "HTML example for Video.js 10",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

examples/react-demo/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-demo",
+  "type": "module",
   "version": "1.0.0",
-  "description": "React example for Video.js 10",
   "private": true,
-  "type": "module",
+  "description": "React example for Video.js 10",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

examples/react-demo/src/App.tsx

@@ -1,7 +1,8 @@
-import { MediaProvider, MediaSkinDefault, MediaSkinToasted, Video } from '@vjs-10/react';
+import type { ChangeEventHandler } from 'react';
 
+import { MediaProvider, MediaSkinDefault, MediaSkinToasted, Video } from '@vjs-10/react';
+import { useCallback, useMemo, useState } from 'react';
 import './globals.css';
-import { useCallback, useMemo, useState, type ChangeEventHandler } from 'react';
 
 const skins = [{
   key: 'default',
@@ -18,19 +19,19 @@ type SkinKey = (typeof skins)[number]['key'];
 const mediaSources = [{
   key: '1',
   name: 'Mux 1',
-  value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8'
+  value: 'https://stream.mux.com/fXNzVtmtWuyz00xnSrJg4OJH6PyNo6D02UzmgeKGkP5YQ.m3u8',
 }, {
   key: '2',
   name: 'Mux 2',
-  value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8'
+  value: 'https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8',
 }, {
   key: '3',
   name: 'Mux 3',
-  value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4'
+  value: 'https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/high.mp4',
 }, {
   key: '4',
   name: 'Mux 4',
-  value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8'
+  value: 'https://stream.mux.com/lyrKpPcGfqyzeI00jZAfW6MvP6GNPrkML.m3u8',
 }] as const;
 
 type MediaSourceKey = (typeof mediaSources)[number]['key'];
@@ -103,21 +104,21 @@ export default function App(): JSX.Element {
   return (
     <>
       <header className="fixed top-0 inset-x-0 bg-white dark:bg-stone-800 shadow shadow-black/10 after:h-px after:absolute after:inset-x-0 after:top-full after:bg-black/5">
-        <div className='grid grid-cols-5 h-2' aria-hidden="true">
-          <div className='bg-yellow-500'></div>
-          <div className='bg-orange-500'></div>
-          <div className='bg-red-500'></div>
-          <div className='bg-purple-500'></div>
-          <div className='bg-blue-500'></div>
+        <div className="grid grid-cols-5 h-2" aria-hidden="true">
+          <div className="bg-yellow-500"></div>
+          <div className="bg-orange-500"></div>
+          <div className="bg-red-500"></div>
+          <div className="bg-purple-500"></div>
+          <div className="bg-blue-500"></div>
         </div>
 
         <div className="py-3 px-6 flex items-center justify-between">
           <div className="space-y-1">
             <h1 className="font-medium text-lg tracking-tight leading-tight dark:text-white">Playground</h1>
-            <small className='block text-stone-400 text-sm'>Test out the various skins for Video.js.</small>
+            <small className="block text-stone-400 text-sm">Test out the various skins for Video.js.</small>
           </div>
 
-          <nav className='flex items-center gap-3'>
+          <nav className="flex items-center gap-3">
             <select value={mediaSourceKey} onChange={onChangeMediaSource}>
               {mediaSources.map(({ key, name }) => (
                 <option key={key} value={key}>
@@ -137,7 +138,7 @@ export default function App(): JSX.Element {
       </header>
 
       <main className="min-h-screen flex justify-center items-center bg-radial bg-size-[16px_16px] from-stone-300 dark:from-stone-700 via-10% via-transparent to-transparent">
-        <div className='w-full max-w-4xl mx-auto p-6'>
+        <div className="w-full max-w-4xl mx-auto p-6">
           <MediaProvider key={key}>
             <Skin className={skinClassName}>
               {/* @ts-ignore -- types are incorrect */}
@@ -149,4 +150,3 @@ export default function App(): JSX.Element {
     </>
   );
 }
-

examples/react-demo/src/globals.css

@@ -4,7 +4,9 @@
 @source "../../../packages/react";
 
 @theme {
-  --font-sans: InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-sans:
+    InterVariable, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
 }
 
 .body {

examples/react-demo/tsconfig.json

@@ -1,9 +1,9 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "baseUrl": "."
   },
   "include": ["src"]
 }

examples/react-demo/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite';
-
 import tailwindcss from '@tailwindcss/vite';
+
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
 
 // https://vitejs.dev/config
 export default defineConfig({

package.json

@@ -14,7 +14,7 @@
     "npm": ">=10.9.3"
   },
   "scripts": {
-    "//prepare": "simple-git-hooks",
+    "prepare": "simple-git-hooks",
     "build:libs": "turbo run build --filter=./packages/**",
     "build:website": "turbo run build --filter=website",
     "build": "turbo run build",
@@ -27,6 +27,7 @@
     "format:check": "prettier . --check --log-level warn --cache",
     "format": "prettier . --write --log-level warn --cache",
     "lint": "eslint . --cache",
+    "lint:fix": "eslint . --fix --cache",
     "test": "turbo run test",
     "typecheck": "pnpm run generate:icons && tsc --build --noEmit"
   },
@@ -50,10 +51,10 @@
     "turbo": "^2.5.8",
     "typescript": "^5.9.2"
   },
-  "//simple-git-hooks": {
+  "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"
   },
-  "//lint-staged": {
+  "lint-staged": {
     "*": "eslint --fix"
   }
 }

packages/core/core/package.json

@@ -3,15 +3,24 @@
   "type": "module",
   "version": "0.1.0",
   "description": "Core components and utilities for Video.js",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "license": "Apache-2.0",
+  "keywords": [
+    "core",
+    "components",
+    "media",
+    "player",
+    "ui",
+    "time-range"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     }
   },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
@@ -22,15 +31,6 @@
     "test": "echo \"No tests yet\"",
     "clean": "rm -rf dist"
   },
-  "keywords": [
-    "core",
-    "components",
-    "media",
-    "player",
-    "ui",
-    "time-range"
-  ],
-  "license": "Apache-2.0",
   "dependencies": {
     "nanostores": "^1.0.1"
   },

packages/core/core/src/components/range.ts

@@ -92,7 +92,7 @@ export class Range {
       evt.clientX,
       evt.clientY,
       { x: rect.left, y: rect.bottom },
-      { x: rect.right, y: rect.top }
+      { x: rect.right, y: rect.top },
     );
   }
 
@@ -122,7 +122,7 @@ export class Range {
   }
 }
 
-export type Point = { x: number; y: number };
+export interface Point { x: number; y: number }
 
 /**
  * Get progress ratio of a point on a line segment.
@@ -144,5 +144,5 @@ export function getPointProgressOnLine(x: number, y: number, p1: Point, p2: Poin
 }
 
 export function distance(p1: Point, p2: Point): number {
-  return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  return Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
 }

packages/core/core/src/components/time-range.ts

@@ -23,10 +23,12 @@ export class TimeRange extends Range {
     let _fillWidth = 0;
     if (state._dragging) {
       _fillWidth = state._pointerRatio * 100;
-    } else if (state.duration > 0) {
+    }
+    else if (state.duration > 0) {
       if (this.#seekingTime !== null && this.#oldCurrentTime === state.currentTime) {
         _fillWidth = (this.#seekingTime / state.duration) * 100;
-      } else {
+      }
+      else {
         _fillWidth = (state.currentTime / state.duration) * 100;
         this.#seekingTime = null;
       }
@@ -90,8 +92,8 @@ export class TimeRange extends Range {
   }
 }
 
-const formatTime = (time: number): string => {
+function formatTime(time: number): string {
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);
   return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-};
+}

packages/core/core/src/components/volume-range.ts

@@ -19,7 +19,8 @@ export class VolumeRange extends Range {
     let _fillWidth = 0;
     if (state._dragging) {
       _fillWidth = state._pointerRatio * 100;
-    } else {
+    }
+    else {
       _fillWidth = state.muted ? 0 : (state.volume || 0) * 100;
     }
 
@@ -74,6 +75,6 @@ export class VolumeRange extends Range {
   }
 }
 
-const formatVolume = (volume: number): string => {
+function formatVolume(volume: number): string {
   return `${Math.round(volume * 100)}%`;
-};
+}

packages/core/core/src/utils/state.ts

@@ -3,7 +3,7 @@
  * so we may treat them specifically as unequal if they are not a) both arrays
  * or b) don't contain the same (shallowly compared) elements.
  */
-export const shallowEqual = (objA: any, objB: any): boolean => {
+export function shallowEqual(objA: any, objB: any): boolean {
   // Using Object.is as a first pass, as it covers a lot of the "simple" cases that are
   // more complex than strict equality and is a built-in. For discussion, see, e.g.:
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#description
@@ -35,12 +35,12 @@ export const shallowEqual = (objA: any, objB: any): boolean => {
   for (let i = 0; i < keysA.length; i++) {
     // NOTE: Since we've already guaranteed the keys list lengths are the same, we can safely cast to string here (CJP)
     if (
-      !globalThis.hasOwnProperty.call(objB, keysA[i] as string) ||
-      !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
+      !globalThis.hasOwnProperty.call(objB, keysA[i] as string)
+      || !Object.is(objA[keysA[i] as string], objB[keysA[i] as string])
     ) {
       return false;
     }
   }
 
   return true;
-};
+}