feat(debug): add ability to debug view iframes, done #10

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 {

source/main.ts

@@ -141,6 +141,21 @@ export default class Whisperer extends Plugin {
     }
   }
 
+  async updateVisibleSettings(settings: WHISPERER_SETTINGS): Promise<void> {
+    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()

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 {

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 (

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(

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

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.')