Merge pull request #999 from qtchaos/fix/subtitles

Update maximums of subtitle settings and add padding

package.json

@@ -49,6 +49,7 @@
     "immer": "^10.0.3",
     "jwt-decode": "^4.0.0",
     "lodash.isequal": "^4.5.0",
+    "lodash.merge": "^4.6.2",
     "million": "^2.6.4",
     "nanoid": "^5.0.4",
     "node-forge": "^1.3.1",
@@ -79,6 +80,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/fscreen": "^1.0.4",
     "@types/lodash.isequal": "^4.5.8",
+    "@types/lodash.merge": "^4.6.9",
     "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^20.10.5",
     "@types/pako": "^2.0.3",

pnpm-lock.yaml

@@ -81,6 +81,9 @@ dependencies:
   lodash.isequal:
     specifier: ^4.5.0
     version: 4.5.0
+  lodash.merge:
+    specifier: ^4.6.2
+    version: 4.6.2
   million:
     specifier: ^2.6.4
     version: 2.6.4
@@ -167,6 +170,9 @@ devDependencies:
   '@types/lodash.isequal':
     specifier: ^4.5.8
     version: 4.5.8
+  '@types/lodash.merge':
+    specifier: ^4.6.9
+    version: 4.6.9
   '@types/lodash.throttle':
     specifier: ^4.1.9
     version: 4.1.9
@@ -268,7 +274,7 @@ devDependencies:
     version: 0.5.9(prettier@3.1.1)
   rollup-plugin-visualizer:
     specifier: ^5.11.0
-    version: 5.11.0(@rollup/wasm-node@4.12.0)
+    version: 5.11.0(@rollup/wasm-node@4.12.1)
   tailwind-scrollbar:
     specifier: ^3.0.5
     version: 3.0.5(tailwindcss@3.4.0)
@@ -2062,7 +2068,7 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: false
 
-  /@rollup/plugin-babel@5.3.1(@babel/core@7.23.6)(@rollup/wasm-node@4.12.0):
+  /@rollup/plugin-babel@5.3.1(@babel/core@7.23.6)(@rollup/wasm-node@4.12.1):
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
@@ -2075,36 +2081,36 @@ packages:
     dependencies:
       '@babel/core': 7.23.6
       '@babel/helper-module-imports': 7.22.15
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.12.0)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.12.1)
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
     dev: true
 
-  /@rollup/plugin-node-resolve@11.2.1(@rollup/wasm-node@4.12.0):
+  /@rollup/plugin-node-resolve@11.2.1(@rollup/wasm-node@4.12.1):
     resolution: {integrity: sha512-yc2n43jcqVyGE2sqV5/YCmocy9ArjVAP/BeXyTtADTBBX6V0e5UMqwO8CdQ0kzjb6zu5P1qMzsScCMRvE9OlVg==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
       rollup: npm:@rollup/wasm-node
     dependencies:
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.12.0)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.12.1)
       '@types/resolve': 1.17.1
       builtin-modules: 3.3.0
       deepmerge: 4.3.1
       is-module: 1.0.0
       resolve: 1.22.4
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
     dev: true
 
-  /@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.12.0):
+  /@rollup/plugin-replace@2.4.2(@rollup/wasm-node@4.12.1):
     resolution: {integrity: sha512-IGcu+cydlUMZ5En85jxHH4qj2hta/11BHq95iHEyb2sbgiN0eCdzvUcHw5gt9pBL5lTi4JDYJ1acCoMGpTvEZg==}
     peerDependencies:
       rollup: npm:@rollup/wasm-node
     dependencies:
-      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.12.0)
+      '@rollup/pluginutils': 3.1.0(@rollup/wasm-node@4.12.1)
       magic-string: 0.25.9
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
     dev: true
 
-  /@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.12.0):
+  /@rollup/pluginutils@3.1.0(@rollup/wasm-node@4.12.1):
     resolution: {integrity: sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==}
     engines: {node: '>= 8.0.0'}
     peerDependencies:
@@ -2113,11 +2119,11 @@ packages:
       '@types/estree': 0.0.39
       estree-walker: 1.0.1
       picomatch: 2.3.1
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
     dev: true
 
-  /@rollup/wasm-node@4.12.0:
+  /@rollup/wasm-node@4.12.1:
-    resolution: {integrity: sha512-sqy3+YvV/uWX6bPZOR5PlEdH6xyMPXoelllRQ/uZ13tzy9f4pXZTbajnoWN8IHHXwTNKPiLzsePLiDEVmkxMNw==}
+    resolution: {integrity: sha512-5j3BVQEccCzCb8fkl++IbDgAsnlsKBPz049C4C//j5s3pFKxKGlybl63QApdJKl1fNLr7HIwQEJcBImQtA3ZHg==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
     dependencies:
@@ -2262,17 +2268,23 @@ packages:
   /@types/lodash.isequal@4.5.8:
     resolution: {integrity: sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==}
     dependencies:
-      '@types/lodash': 4.14.197
+      '@types/lodash': 4.14.202
+    dev: true
+
+  /@types/lodash.merge@4.6.9:
+    resolution: {integrity: sha512-23sHDPmzd59kUgWyKGiOMO2Qb9YtqRO/x4IhkgNUiPQ1+5MUVqi6bCZeq9nBJ17msjIMbEIO5u+XW4Kz6aGUhQ==}
+    dependencies:
+      '@types/lodash': 4.14.202
     dev: true
 
   /@types/lodash.throttle@4.1.9:
     resolution: {integrity: sha512-PCPVfpfueguWZQB7pJQK890F2scYKoDUL3iM522AptHWn7d5NQmeS/LTEHIcLr5PaTzl3dK2Z0xSUHHTHwaL5g==}
     dependencies:
-      '@types/lodash': 4.14.197
+      '@types/lodash': 4.14.202
     dev: true
 
-  /@types/lodash@4.14.197:
+  /@types/lodash@4.14.202:
-    resolution: {integrity: sha512-BMVOiWs0uNxHVlHBgzTIqJYmj+PgCo4euloGF+5m4okL3rEYzM2EEv78mw8zWSMM57dM7kVIgJ2QDvwHSoCI5g==}
+    resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
     dev: true
 
   /@types/node-forge@1.3.10:
@@ -5004,7 +5016,6 @@ packages:
 
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
-    dev: true
 
   /lodash.mergewith@4.6.2:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
@@ -5101,7 +5112,7 @@ packages:
       '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.6)
       '@babel/types': 7.23.6
       kleur: 4.1.5
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
       unplugin: 1.5.1
     transitivePeerDependencies:
       - supports-color
@@ -6029,7 +6040,7 @@ packages:
       glob: 7.2.3
     dev: true
 
-  /rollup-plugin-terser@7.0.2(@rollup/wasm-node@4.12.0):
+  /rollup-plugin-terser@7.0.2(@rollup/wasm-node@4.12.1):
     resolution: {integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==}
     deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
     peerDependencies:
@@ -6037,12 +6048,12 @@ packages:
     dependencies:
       '@babel/code-frame': 7.23.5
       jest-worker: 26.6.2
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
       serialize-javascript: 4.0.0
       terser: 5.19.3
     dev: true
 
-  /rollup-plugin-visualizer@5.11.0(@rollup/wasm-node@4.12.0):
+  /rollup-plugin-visualizer@5.11.0(@rollup/wasm-node@4.12.1):
     resolution: {integrity: sha512-exM0Ms2SN3AgTzMeW7y46neZQcyLY7eKwWAop1ZoRTCZwyrIRdMMJ6JjToAJbML77X/9N8ZEpmXG4Z/Clb9k8g==}
     engines: {node: '>=14'}
     hasBin: true
@@ -6054,7 +6065,7 @@ packages:
     dependencies:
       open: 8.4.2
       picomatch: 2.3.1
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
       source-map: 0.7.4
       yargs: 17.7.2
     dev: true
@@ -7040,7 +7051,7 @@ packages:
       '@types/node': 20.10.5
       esbuild: 0.19.10
       postcss: 8.4.32
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
     optionalDependencies:
       fsevents: 2.3.3
     dev: true
@@ -7302,9 +7313,9 @@ packages:
       '@babel/core': 7.23.6
       '@babel/preset-env': 7.23.6(@babel/core@7.23.6)
       '@babel/runtime': 7.23.6
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.23.6)(@rollup/wasm-node@4.12.0)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.23.6)(@rollup/wasm-node@4.12.1)
-      '@rollup/plugin-node-resolve': 11.2.1(@rollup/wasm-node@4.12.0)
+      '@rollup/plugin-node-resolve': 11.2.1(@rollup/wasm-node@4.12.1)
-      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.12.0)
+      '@rollup/plugin-replace': 2.4.2(@rollup/wasm-node@4.12.1)
       '@surma/rollup-plugin-off-main-thread': 2.2.3
       ajv: 8.12.0
       common-tags: 1.8.2
@@ -7313,8 +7324,8 @@ packages:
       glob: 7.2.3
       lodash: 4.17.21
       pretty-bytes: 5.6.0
-      rollup: /@rollup/wasm-node@4.12.0
+      rollup: /@rollup/wasm-node@4.12.1
-      rollup-plugin-terser: 7.0.2(@rollup/wasm-node@4.12.0)
+      rollup-plugin-terser: 7.0.2(@rollup/wasm-node@4.12.1)
       source-map: 0.8.0-beta.0
       stringify-object: 3.3.0
       strip-comments: 2.0.1

src/components/player/atoms/settings/CaptionSettingsView.tsx

@@ -231,7 +231,7 @@ export function CaptionSettingsView({ id }: { id: string }) {
       <Menu.BackLink onClick={() => router.navigate("/captions")}>
         {t("player.menus.subtitles.settings.backlink")}
       </Menu.BackLink>
-      <Menu.Section className="space-y-6">
+      <Menu.Section className="space-y-6 pb-5">
         <CaptionSetting
           label={t("player.menus.subtitles.settings.delay")}
           max={10}

src/stores/quality/index.ts

@@ -1,3 +1,4 @@
+import merge from "lodash.merge";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
@@ -33,6 +34,7 @@ export const useQualityStore = create(
     })),
     {
       name: "__MW::quality",
+      merge: (persisted, current) => merge({}, current, persisted),
     },
   ),
 );

src/stores/subtitles/index.ts

@@ -1,3 +1,4 @@
+import merge from "lodash.merge";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import { immer } from "zustand/middleware/immer";
@@ -67,13 +68,19 @@ export const useSubtitleStore = create(
       updateStyling(newStyling) {
         set((s) => {
           if (newStyling.backgroundOpacity !== undefined)
-            s.styling.backgroundOpacity = newStyling.backgroundOpacity;
+            s.styling.backgroundOpacity = Math.min(
+              1,
+              Math.max(0, newStyling.backgroundOpacity),
+            );
           if (newStyling.backgroundBlur !== undefined)
-            s.styling.backgroundBlur = newStyling.backgroundBlur;
+            s.styling.backgroundBlur = Math.min(
+              1,
+              Math.max(0, newStyling.backgroundBlur),
+            );
           if (newStyling.color !== undefined)
             s.styling.color = newStyling.color.toLowerCase();
           if (newStyling.size !== undefined)
-            s.styling.size = Math.min(2, Math.max(0.01, newStyling.size));
+            s.styling.size = Math.min(10, Math.max(0.01, newStyling.size));
         });
       },
       setLanguage(lang) {
@@ -107,6 +114,7 @@ export const useSubtitleStore = create(
     })),
     {
       name: "__MW::subtitles",
+      merge: (persisted, current) => merge({}, current, persisted),
     },
   ),
 );