From 8f3d1bd09128f0291f30ac8f3d06915829714d63 Mon Sep 17 00:00:00 2001 From: Tamius Han Date: Wed, 1 Jan 2025 22:15:22 +0100 Subject: [PATCH] Add illustrations to the player picker --- .../PlayerUiPanels/PlayerDetectionPanel.vue | 787 ++++++++++-------- src/ext/lib/Settings.ts | 39 +- src/ext/lib/video-data/PlayerData.ts | 34 +- src/options/about.vue | 6 +- .../uw_player_select___just-right.webp | Bin 0 -> 198080 bytes .../uw_player_select___too_little.webp | Bin 0 -> 193914 bytes .../uw_player_select___too_much.webp | Bin 0 -> 196732 bytes 7 files changed, 507 insertions(+), 359 deletions(-) create mode 100644 src/res/img/player-select-demo/uw_player_select___just-right.webp create mode 100644 src/res/img/player-select-demo/uw_player_select___too_little.webp create mode 100644 src/res/img/player-select-demo/uw_player_select___too_much.webp diff --git a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue index 3e16725..f1ee07a 100644 --- a/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue +++ b/src/csui/src/PlayerUiPanels/PlayerDetectionPanel.vue @@ -1,351 +1,433 @@ @@ -467,6 +549,9 @@ export default({ }) + + + diff --git a/src/ext/lib/Settings.ts b/src/ext/lib/Settings.ts index 09b74b0..501b6c2 100644 --- a/src/ext/lib/Settings.ts +++ b/src/ext/lib/Settings.ts @@ -183,26 +183,31 @@ class Settings { } // apply all remaining patches - this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`); - while (index < patches.length) { - const updateFn = patches[index].updateFn; - delete patches[index].forVersion; - delete patches[index].updateFn; - - if (Object.keys(patches[index]).length > 0) { - ObjectCopy.overwrite(this.active, patches[index]); - } - if (updateFn) { - - try { - updateFn(this.active, this.getDefaultSettings()); - } catch (e) { - this.logger?.log('error', 'settings', '[Settings::applySettingsPatches] Failed to execute update function. Keeping settings object as-is. Error:', e); + try { + this.logger?.log('info', 'settings', `[Settings::applySettingsPatches] There are ${patches.length - index} settings patches to apply`); + while (index < patches.length) { + const updateFn = patches[index].updateFn; + delete patches[index].forVersion; + delete patches[index].updateFn; + if (Object.keys(patches[index]).length > 0) { + ObjectCopy.overwrite(this.active, patches[index]); } - } + if (updateFn) { - index++; + try { + updateFn(this.active, this.getDefaultSettings()); + } catch (e) { + this.logger?.log('error', 'settings', '[Settings::applySettingsPatches] Failed to execute update function. Keeping settings object as-is. Error:', e); + + } + } + + index++; + } + } catch (e) { + this.setActive(this.getDefaultSettings()); + this.save(); } } diff --git a/src/ext/lib/video-data/PlayerData.ts b/src/ext/lib/video-data/PlayerData.ts index cad4552..196a39e 100644 --- a/src/ext/lib/video-data/PlayerData.ts +++ b/src/ext/lib/video-data/PlayerData.ts @@ -89,6 +89,7 @@ class PlayerData { private observer: ResizeObserver; private trackChangesTimeout: any; + private markedElement: HTMLElement; private ui: UI; @@ -741,8 +742,37 @@ class PlayerData { } private markElement(data: {parentIndex: number, enable: boolean}) { - this.elementStack[data.parentIndex].element.style.outline = data.enable ? '5px dashed #fa6' : null; - this.elementStack[data.parentIndex].element.style.filter = data.enable ? 'sepia(1) brightness(2) contrast(0.5)' : null; + if (data.enable === false) { + this.markedElement.remove(); + return; + } + + + if (this.markedElement) { + this.markedElement.remove(); + } + + const elementBB = this.elementStack[data.parentIndex].element.getBoundingClientRect(); + + // console.log('element bounding box:', elementBB); + + const div = document.createElement('div'); + div.style.position = 'fixed'; + div.style.top = `${elementBB.top}px`; + div.style.left = `${elementBB.left}px`; + div.style.width = `${elementBB.width}px`; + div.style.height = `${elementBB.height}px`; + div.style.zIndex = '100'; + div.style.border = '5px dashed #fa6'; + div.style.pointerEvents = 'none'; + div.style.boxSizing = 'border-box'; + div.style.backgroundColor = 'rgba(255, 128, 64, 0.25)'; + + document.body.insertBefore(div, document.body.firstChild); + this.markedElement = div; + + // this.elementStack[data.parentIndex].element.style.outline = data.enable ? '5px dashed #fa6' : null; + // this.elementStack[data.parentIndex].element.style.filter = data.enable ? 'sepia(1) brightness(2) contrast(0.5)' : null; } forceRefreshPlayerElement() { diff --git a/src/options/about.vue b/src/options/about.vue index 9b73260..e1e5fe7 100644 --- a/src/options/about.vue +++ b/src/options/about.vue @@ -18,7 +18,7 @@

Plans for the future

Improving automatic detection, trying to re-implement in-player user interface (confirmed!), fixing bugs. Maybe even give the settings page a facelift.

Acknowledgements

-

This extension uses font Overpass and everything this Vue template brings along.

+

This extension uses font Overpass and everything this Vue template brings along.

Special thanks to