From b9b021f4666077978ae4b3f99a1c07ad0663a7eb Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Sun, 20 Nov 2022 22:45:34 +0100 Subject: [PATCH] Spin off VideoSettings component into subcomponents --- .../VideoSettings/CropOptionsPanel.vue | 276 +++++++ .../VideoSettings/StretchOptionsPanel.vue | 272 +++++++ .../VideoSettings/ZoomOptionsPanel.vue | 152 ++++ src/csui/src/PlayerUiPanels/VideoSettings.vue | 749 +----------------- src/csui/src/res-common/common.scss | 35 + src/csui/src/res-common/panels.scss | 1 + src/csui/src/utils/CommsMixin.js | 20 + src/csui/src/utils/EditModeMixin.js | 89 +++ .../src/utils/KeyboardShortcutParserMixin.js | 15 + src/popup/App.vue | 9 +- src/popup/panels/PopupVideoSettings.vue | 74 ++ 11 files changed, 977 insertions(+), 715 deletions(-) create mode 100644 src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue create mode 100644 src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue create mode 100644 src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue create mode 100644 src/csui/src/utils/CommsMixin.js create mode 100644 src/csui/src/utils/EditModeMixin.js create mode 100644 src/csui/src/utils/KeyboardShortcutParserMixin.js create mode 100644 src/popup/panels/PopupVideoSettings.vue diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue new file mode 100644 index 0000000..df223f6 --- /dev/null +++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/CropOptionsPanel.vue @@ -0,0 +1,276 @@ + + + + + + + diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue new file mode 100644 index 0000000..a1ee3b1 --- /dev/null +++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/StretchOptionsPanel.vue @@ -0,0 +1,272 @@ + + + + + + + diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue new file mode 100644 index 0000000..a7ea7b9 --- /dev/null +++ b/src/csui/src/PlayerUiPanels/PanelComponents/VideoSettings/ZoomOptionsPanel.vue @@ -0,0 +1,152 @@ + + + + + + + diff --git a/src/csui/src/PlayerUiPanels/VideoSettings.vue b/src/csui/src/PlayerUiPanels/VideoSettings.vue index 08c7b15..65a5e23 100644 --- a/src/csui/src/PlayerUiPanels/VideoSettings.vue +++ b/src/csui/src/PlayerUiPanels/VideoSettings.vue @@ -11,7 +11,7 @@
Exit edit mode
@@ -20,7 +20,7 @@
Edit ratios and shortcuts
@@ -36,153 +36,16 @@

Crop video:

-
- - - - -
- - -
-
- Click a button to edit -
-
-
-
- Editing options for: {{editModeOptions?.crop?.selected?.label}}  - -
-
- - - - -
-
Shortcut:
-
- - -
-
- Note: Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt. - The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override - any keyboard shortcuts defined by the site itself. -
-
- -
-
- Delete -
-
-
Cancel
-
- -   - - -
-
- -
-
- -
-
-
Default for this site
-
- -
-
-
-
Extension default
-
- -
-
-
+ @@ -191,173 +54,15 @@

Stretch video:

-
- - - - -
- - -
-
- Click a button to edit -
-
-
-
- Editing options for: {{editModeOptions?.stretch?.selected?.label}}  - -
-
- - - - - - - -
-
Shortcut:
-
- - -
-
- Note: Your browser and OS already use certain key combinations that involve Ctrl and Meta (Windows) keys — and, to a lesser extent, Alt. - The extension doesn't (and cannot) check whether the keyboard shortcut you enter is actually free for you to use. The extension also won't override - any keyboard shortcuts defined by the site itself. -
-
- -
-
- Delete -
-
-
Cancel
-
- -   - - -
-
- -
-
- -
-
-
Default for this site:
-
-
- -
-
-
- -
-
Extension default:
-
- -
-
-
+ @@ -367,82 +72,17 @@

Manual zoom:

-
- -
- - -
- - -
+ + +
@@ -470,34 +110,25 @@ @@ -813,42 +175,3 @@ export default { - - diff --git a/src/csui/src/res-common/common.scss b/src/csui/src/res-common/common.scss index 1f54e41..21b07b6 100644 --- a/src/csui/src/res-common/common.scss +++ b/src/csui/src/res-common/common.scss @@ -114,3 +114,38 @@ h1, h2, h3 { } } } + +.options-bar { + margin: 1rem; + padding: 1rem; + + &.isEditing { + background-color: $primary; + color: #000; + } +} +.b3 { + width: 9rem; + padding-left: 0.33rem; + padding-right: 0.33rem; +} +.input-slider { + width: 480px; +} +.warning-lite { + padding-right: 16px; + padding-bottom: 16px; + padding-top: 8px; +} + +.edit-action-area { + background-color: rgba($blackBg,0.5); + padding: 0.5rem; + margin-bottom: 2rem; +} +.edit-action-area-header { + background-color: $primary; + color: #000; + padding: 0.25rem 0.5rem; + padding-top: 0.5rem; +} diff --git a/src/csui/src/res-common/panels.scss b/src/csui/src/res-common/panels.scss index 1d51af3..be2affa 100644 --- a/src/csui/src/res-common/panels.scss +++ b/src/csui/src/res-common/panels.scss @@ -9,3 +9,4 @@ .sub-panel-content { margin-top: 1.5rem; } + diff --git a/src/csui/src/utils/CommsMixin.js b/src/csui/src/utils/CommsMixin.js new file mode 100644 index 0000000..4925f30 --- /dev/null +++ b/src/csui/src/utils/CommsMixin.js @@ -0,0 +1,20 @@ +export default { + methods: { + handleConfigBroadcast(message) { + if (message.type === 'ar') { + this.resizerConfig.crop = message.config; + } + + this.$nextTick( () => this.$forceUpdate() ); + }, + + /** + * Sends commands to main content script in parent iframe + * @param {*} command + */ + execAction(command) { + const cmd = JSON.parse(JSON.stringify(command)); + this.eventBus?.sendToTunnel(cmd.action, cmd.arguments); + }, + } +} diff --git a/src/csui/src/utils/EditModeMixin.js b/src/csui/src/utils/EditModeMixin.js new file mode 100644 index 0000000..c753403 --- /dev/null +++ b/src/csui/src/utils/EditModeMixin.js @@ -0,0 +1,89 @@ +export default { + data() { + return { + editMode: false, + editModeOptions: {} + } + }, + methods: { + enableEditMode() { + this.editMode = true; + this.editModeOptions = {}; + }, + + disableEditMode() { + this.editMode = false; + }, + + editAction(command, index, actionType) { + try { + if (!this.editModeOptions[actionType]) { + this.editModeOptions[actionType] = {selected: command, selectedIndex: index} + } else { + this.editModeOptions[actionType].selected = command; + this.editModeOptions[actionType].selectedIndex = index; + } + } catch (e) { + console.error(`[Ultrawidify] there's a problem with VideoSettings.vue::editAction():`, e); + } + }, + + updateSelectedShortcut(shortcut, actionType) { + try { + if (!this.editModeOptions[actionType]?.selected) { + return; + } else { + this.editModeOptions[actionType].selected.shortcut = shortcut + } + } catch (e) { + console.error(`[Ultrawidify] there's a problem with VideoSettings.vue::updateShortcut():`, e); + } + }, + + cancelEdit(actionType) { + try { + if (!this.editModeOptions[actionType]) { + return; + } else { + this.editModeOptions[actionType] = undefined;; + } + } catch (e) { + console.error(`[Ultrawidify] there's a problem with VideoSettings.vue::cancelEdit():`, e); + } + }, + + saveShortcut(actionType) { + if (!this.editModeOptions[actionType]?.selectedIndex) { + this.settings.active.commands[actionType].push(this.editModeOptions[actionType].selected); + } + this.settings.active.commands[actionType][this.editModeOptions[actionType].selectedIndex] = this.editModeOptions[actionType]?.selected; + this.settings.saveWithoutReload(); + + this.editModeOptions[actionType] = undefined; + }, + + deleteAction(actionType) { + const selectedIndex = this.editModeOptions[actionType].selectedIndex; + + // prevent deleting first item if 'delete' button shows on 'add new' dialog + if (selectedIndex === undefined || selectedIndex === null) { + return; + } + + this.settings.active.commands[actionType].splice(selectedIndex, 1); + this.settings.saveWithoutReload(); + + this.editModeOptions[actionType] = undefined; + }, + + /** + * Parses command's keyboard shortcut into human-readable label + */ + getKeyboardShortcutLabel(command) { + if (! command.shortcut) { + return ''; + } + return KeyboardShortcutParser.parseShortcut(command.shortcut); + }, + } +} diff --git a/src/csui/src/utils/KeyboardShortcutParserMixin.js b/src/csui/src/utils/KeyboardShortcutParserMixin.js new file mode 100644 index 0000000..f33c846 --- /dev/null +++ b/src/csui/src/utils/KeyboardShortcutParserMixin.js @@ -0,0 +1,15 @@ +import KeyboardShortcutParser from '../../../common/js/KeyboardShortcutParser'; + +export default { + methods: { + /** + * Parses command's keyboard shortcut into human-readable label + */ + getKeyboardShortcutLabel(command) { + if (! command.shortcut) { + return ''; + } + return KeyboardShortcutParser.parseShortcut(command.shortcut); + }, + } +} diff --git a/src/popup/App.vue b/src/popup/App.vue index fb86643..e82e1af 100644 --- a/src/popup/App.vue +++ b/src/popup/App.vue @@ -20,8 +20,13 @@ Build channel: {{BrowserDetect?.processEnvChannel}}
+
+ TODO: force open UI button +
- +
+ side menu + 
         ---- site:
         {{site}}
@@ -262,7 +267,7 @@ html {
   padding-top: 8px;
   padding-left: 15px;
   padding-bottom: 1px;
-  font-size: 2.7em;
+  font-size: 1.75rem;
 }
 .header-small {
   overflow: hidden;
diff --git a/src/popup/panels/PopupVideoSettings.vue b/src/popup/panels/PopupVideoSettings.vue
new file mode 100644
index 0000000..4e5d8cd
--- /dev/null
+++ b/src/popup/panels/PopupVideoSettings.vue
@@ -0,0 +1,74 @@
+