Resolved #44: [MV3] 记住上一次全屏字幕视窗的位置

eric2788 · Mar 13, 2024 · 4476e86 · 4476e86
1 parent 67200f0
commit 4476e86
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 6 deletions.
diff --git a/src/features/jimaku/components/JimakuArea.tsx b/src/features/jimaku/components/JimakuArea.tsx
@@ -98,6 +98,15 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
 
     const shouldPutIntoLivePlayer = screenStatus !== 'normal' || isTheme
 
+    const [ dragState, setDragState ] = useState<{ 
+        x: number, 
+        y: number, 
+        width: string | number, 
+        height: string | number 
+    }>(() => ({ x: 100, y: -300, width: '50%', height: jimakuStyle.backgroundHeight }))
+
+    const rmbState = jimakuStyle.rememberDragState
+
     return (
         <Fragment>
             <Teleport container={rootContainer}>
@@ -114,12 +123,19 @@ function JimakuArea({ jimaku }: JimakuAreaProps): JSX.Element {
                         minHeight={100}
                         minWidth={200}
                         scale={0.93}
-                        default={{
-                            x: 100,
-                            y: -300,
-                            width: '50%',
-                            height: jimakuStyle.backgroundHeight,
+                        onDragStop={(e, d) => {
+                            if (!rmbState) return
+                            setDragState(state => ({ ...state, x: d.x, y: d.y }))
+                        }}
+                        onResizeStop={(e, direction, ref, delta, position) => {
+                            if (!rmbState) return
+                            setDragState({
+                                width: ref.style.width,
+                                height: ref.style.height,
+                                ...position
+                            })
                         }}
+                        default={dragState}
                     >
                         <JimakuList
                             jimaku={jimaku}

diff --git a/src/settings/features/jimaku/components/JimakuFragment.tsx b/src/settings/features/jimaku/components/JimakuFragment.tsx
@@ -21,6 +21,7 @@ export type JimakuSchema = {
     backgroundOpacity: HundredNumber
     filterUserLevel: number
     areaDragBoundary: boolean
+    rememberDragState: boolean
 }
 
 
@@ -36,7 +37,8 @@ export const jimakuDefaultSettings: Readonly<JimakuSchema> = {
     backgroundColor: '#808080',
     backgroundOpacity: 40,
     filterUserLevel: 0,
-    areaDragBoundary: false
+    areaDragBoundary: false,
+    rememberDragState: true
 }
 
 function JimakuFragment({ state, useHandler }: StateProxy<JimakuSchema>): JSX.Element {
@@ -121,6 +123,12 @@ function JimakuFragment({ state, useHandler }: StateProxy<JimakuSchema>): JSX.El
                     onChange={bool('areaDragBoundary')}
                     value={state.areaDragBoundary}
                 />
+                <SwitchListItem 
+                    label="记住全屏时字幕背景的拖拽位置和缩放"
+                    hint="刷新页面后，状态依然会被重设"
+                    onChange={bool('rememberDragState')}
+                    value={state.rememberDragState}
+                />
             </List>
         </Fragment>
     )