Merge pull request #111 from nebulabroadcast/use-frames-in-video-player

Rewrite video player to use frames as base

Author: martastain

frontend/eslint.config.js

@@ -1,15 +1,18 @@
-import js from '@eslint/js';
+// eslint.config.js
+import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import prettier from 'eslint-plugin-prettier';
+import importPlugin from 'eslint-plugin-import';
 import globals from 'globals';
 
-export default [
+export default tseslint.config(
   {
     ignores: ['node_modules', 'build', 'dist', 'eslint.config.js', 'src/pubsub.js'],
   },
-  js.configs.recommended, // Base JS rules
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
   {
     languageOptions: {
       parser: tseslint.parser,
@@ -22,26 +25,79 @@ export default [
         ...globals.node,
       },
     },
+
+    // React plugin configuration
     plugins: {
-      '@typescript-eslint': tseslint.plugin,
-      react: react,
-      'react-hooks': reactHooks,
-      prettier: prettier,
+      react: reactPlugin,
+      'react-hooks': reactHooksPlugin,
+      import: importPlugin,
+    },
+    rules: {
+      // React rules
+      'react/jsx-uses-react': 'error',
+      'react/jsx-uses-vars': 'error',
+      'react/react-in-jsx-scope': 'off', // Not needed with React 17+
+      'react/prop-types': 'off', // TypeScript handles prop validation
+      'react/display-name': 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      '@typescript-eslint/explici/t-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+
+      // Import rules
+      'import/order': [
+        'warn',
+        {
+          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+          'newlines-between': 'always',
+          alphabetize: { order: 'asc', caseInsensitive: true },
+        },
+      ],
     },
+    // Different settings for different file types
     settings: {
       react: {
         version: 'detect',
       },
     },
-    rules: {
-      'prettier/prettier': 'warn',
-      'no-unused-vars': 'off', // Handled by TypeScript
-      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': 'warn',
-      '@typescript-eslint/no-explicit-any': 'warn',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-      '@typescript-eslint/consistent-type-imports': 'warn',
+  },
+  {
+    // Apply to all JavaScript and TypeScript files
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2022,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
     },
   },
-];
+  {
+    // TypeScript-specific rules
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: tseslint.parser,
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+    },
+  },
+  {
+    // JavaScript-specific rules (for JSX files)
+    files: ['**/*.{js,jsx}'],
+    rules: {
+      '@typescript-eslint/no-var-requires': 'off',
+    },
+  }
+);

frontend/package.json

@@ -7,7 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix",
+    "lint": "eslint src/**/*.{jsx,tsx,js,ts} --fix",
     "format": "prettier . --write",
     "generate": "openapi-ts"
   },
@@ -45,6 +45,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.20.1",
     "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.1.0",

frontend/src/actions.js

@@ -1,4 +1,5 @@
 import nebula from '/src/nebula';
+
 import { createSlice } from '@reduxjs/toolkit';
 import { isNaN } from 'lodash';
 
@@ -33,6 +34,7 @@ const contextSlice = createSlice({
     },
 
     reloadBrowser: (state, action) => {
+      const _a = action;
       state.browserRefresh = state.browserRefresh + 1;
       return state;
     },

frontend/src/app.jsx

@@ -1,8 +1,11 @@
 import axios from 'axios';
+
 import nebula from '/src/nebula';
 
 import { useState, useEffect, Suspense } from 'react';
+
 import { useLocalStorage } from '/src/hooks';
+
 import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
 
 import { DialogProvider } from './hooks/useDialog';

frontend/src/components/BaseInput.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+
 import { getTheme } from './theme';
 
 const BaseInput = styled.input`

frontend/src/components/Button.tsx

@@ -1,7 +1,8 @@
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
+
 import { getTheme } from './theme';
-import { forwardRef } from 'react';
-import clsx from 'clsx';
 
 const BaseButton = styled.button`
   border: 0;

frontend/src/components/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useLayoutEffect } from 'react';
 import styled from 'styled-components';
+
 import Button from './Button';
 
 const ContextMenuWrapper = styled.div`

frontend/src/components/Dialog.jsx

@@ -1,6 +1,6 @@
+import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
 import styled from 'styled-components';
-import clsx from 'clsx';
 
 const StyledDialog = styled.dialog`
   color: var(--color-text);

frontend/src/components/Dropdown.jsx

@@ -1,6 +1,7 @@
-import Button from './Button';
-import styled from 'styled-components';
 import clsx from 'clsx';
+import styled from 'styled-components';
+
+import Button from './Button';
 
 const DropdownContainer = styled.div`
   position: relative;
@@ -77,6 +78,7 @@ const DropdownOption = ({
       <Button
         label={label}
         icon={icon}
+        style={style}
         iconStyle={hlColor ? { color: hlColor } : {}}
         disabled={disabled || currentValue === value}
         onClick={() => onClick(value)}
@@ -94,7 +96,6 @@ const Dropdown = ({
   contentStyle = {},
   value = null,
   disabled = false,
-  defaultValue = null,
   iconOnRigth = false,
 }) => {
   if (align === 'right') contentStyle['right'] = 0;

frontend/src/components/InputColor.jsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import styled from 'styled-components';
+
 import BaseInput from './BaseInput';
 
 const BaseColorInput = styled(BaseInput)`