diff --git a/main.css b/main.css index 29965e9..c79fe6a 100644 --- a/main.css +++ b/main.css @@ -3,7 +3,6 @@ .vault-ambience-player { bottom: 10px; right: 10px; z-index: 1000; - display: none; } .file-ambience-player { @@ -11,7 +10,6 @@ .file-ambience-player { bottom: 10px; right: 10px; z-index: 1000; - display: none; } .input-field { diff --git a/source/main.ts b/source/main.ts index 3c3a900..d757a3c 100644 --- a/source/main.ts +++ b/source/main.ts @@ -141,6 +141,21 @@ export default class Whisperer extends Plugin { } } + async updateVisibleSettings(settings: WHISPERER_SETTINGS): Promise { + if (this.players.length === 0) { + this.updateSettings(settings) + } else { + this._settings = settings + + await this.saveData(this.settings) + + this.players.forEach((player) => { + player.removeClass(this.settings.debug_frames ? 'hidden-frame' : 'visible') + player.addClass(this.settings.debug_frames ? 'visible' : 'hidden-frame') + }) + } + } + public unapply(): void { this.players.forEach((player) => { player.remove() diff --git a/source/player/player_per_file.ts b/source/player/player_per_file.ts index 66c8b36..80bb14b 100644 --- a/source/player/player_per_file.ts +++ b/source/player/player_per_file.ts @@ -60,7 +60,7 @@ export default class PlayerPerFile { iframe.width = '300' iframe.height = '166' iframe.allow = 'autoplay' - iframe.addClass('hidden-frame') + iframe.addClass(this.plugin.settings.debug_frames ? 'visible' : 'hidden-frame') player.appendChild(iframe) } else if (musicPath.includes('soundcloud.com')) { const embedUrl = getEmbedUrl(musicPath) @@ -69,7 +69,7 @@ export default class PlayerPerFile { iframe.width = '300' iframe.height = '166' iframe.allow = 'autoplay' - iframe.addClass('hidden-frame') + iframe.addClass(this.plugin.settings.debug_frames ? 'visible' : 'hidden-frame') player.appendChild(iframe) } } else { diff --git a/source/player/player_per_global.ts b/source/player/player_per_global.ts index 18baec1..dda38b1 100644 --- a/source/player/player_per_global.ts +++ b/source/player/player_per_global.ts @@ -22,6 +22,7 @@ export default class PlayerPerGlobal { player = document.createElement('div') player.className = 'vault-ambience-player' + player.addClass(this.plugin.settings.debug_frames ? 'visible' : 'hidden-frame') if (isUrl(this.plugin.settings.vault_ambience_path)) { if ( diff --git a/source/settings.ts b/source/settings.ts index c177f9b..25361b7 100644 --- a/source/settings.ts +++ b/source/settings.ts @@ -50,7 +50,7 @@ export default class WhispererSettingsTab extends PluginSettingTab { settingsConstructor.SETTING_VAULT_PATH_INPUT, settingsConstructor.SETTING_AMBIENCE_PER_FILE, settingsConstructor.SETTING_AMBIENCE_PER_FILE_COMMENT, - settingsConstructor.SETTING_MUSIC_VOLUME + settingsConstructor.SETTING_DEBUG_FRAMES ] SettingsConstructor.updateDisplays( diff --git a/source/settings/settings.ts b/source/settings/settings.ts index 0311115..12dc499 100644 --- a/source/settings/settings.ts +++ b/source/settings/settings.ts @@ -4,6 +4,8 @@ export interface WHISPERER_SETTINGS { ambience_per_files: boolean music_volume: number + debug_frames: boolean + MIN_VOLUME: number MAX_VOLUME: number VOLUME_STEP: number @@ -15,6 +17,8 @@ export const DEFAULT_SETTINGS: WHISPERER_SETTINGS = { ambience_per_files: true, music_volume: 50, + debug_frames: false, + MIN_VOLUME: 0, MAX_VOLUME: 100, VOLUME_STEP: 1 diff --git a/source/settings/settings_class.ts b/source/settings/settings_class.ts index a86c1a6..f767753 100644 --- a/source/settings/settings_class.ts +++ b/source/settings/settings_class.ts @@ -14,6 +14,7 @@ export default class SettingsConstructor { private _SETTING_AMBIENCE_PER_FILE?: Setting private _SETTING_AMBIENCE_PER_FILE_COMMENT?: Setting private _SETTING_MUSICE_VOLUME?: Setting + private _SETTING_DEBUG_FRAMES?: Setting public plugin: Whisperer public containerEl: HTMLElement @@ -152,6 +153,28 @@ export default class SettingsConstructor { return this._SETTING_MUSICE_VOLUME! } + public get SETTING_DEBUG_FRAMES(): Setting { + if (!this._SETTING_DEBUG_FRAMES) { + this._SETTING_DEBUG_FRAMES = new Setting(this.containerEl) + .setName('Debug frames:') + .setDesc( + 'Allows you to view frames generated by this plugin, meaning you can view mini-players for music/video.' + ) + .addToggle((toggle) => { + toggle.setValue(this.plugin.settings.debug_frames).onChange(async (value) => { + const next = { + ...this.plugin.settings, + debug_frames: value + } + + await this.plugin.updateSettings(next) + }) + }) + } + + return this._SETTING_DEBUG_FRAMES! + } + public static updateDisplays(elements: (Setting | TextAreaComponent)[], values: boolean[]): void { if (elements.length !== values.length) throw new Error('Elements and their values both are out of range in some other ways.')