From 52b4e48217998cfd7a5064250706a6007c8a8c7a Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 26 Jul 2022 23:54:25 +0200
Subject: [PATCH] start extension popup rework

---
 src/popup/App.vue | 384 +++-------------------------------------------
 1 file changed, 23 insertions(+), 361 deletions(-)

diff --git a/src/popup/App.vue b/src/popup/App.vue
index 8de2653..45f7088 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -20,178 +20,15 @@
         Build channel: {{BrowserDetect.processEnvChannel}}
       </div>
     </div>
-    <div
-      v-if="narrowPopup"
-      class="w100 show-more flex flex-row flex-center flex-cross-center menu-button"
-      @click="toggleSideMenu()"
-    >
-      <!-- <Icon v-if="!sideMenuVisible" icon="list" /> -->
-      <!-- <Icon v-else icon="x" /> -->
-      <div>Menu</div>
-    </div>
     <div class="flex flex-row body no-overflow flex-grow">
-      <!-- TABS/SIDEBAR -->
-      <div id="tablist"
-           v-show="!narrowPopup || sideMenuVisible"
-           class="flex flex-column flex-nogrow flex-noshrink h100"
-           :class="{'w100': narrowPopup}"
-      >
-        <div class="menu-item"
-            :class="{'selected-tab': selectedTab === 'global'}"
-            @click="selectTab('global')"
-        >
-          <div class="">
-            Extension settings
-          </div>
-          <div class="">
-          </div>
-        </div>
-        <div class="menu-item"
-            :class="{'selected-tab': selectedTab === 'site', 'disabled': siteTabDisabled}"
-            @click="selectTab('site')"
-        >
-          <div class="">
-            Site settings
-          </div>
-          <div v-if="selectedTab === 'site' && activeSites.length > 1"
-               class=""
-          >
-            <small>Select site to control:</small>
-            <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
-              <div v-for="site of activeSites"
-                  :key="site.host"
-                  class="tabitem ltr"
-                  :class="{
-                    'tabitem-selected': site.host === selectedSite,
-                    'tabitem-disabled': (settings && !settings.canStartExtension(site.host))
-                  }"
-                  @click="selectSite(site.host)"
-              >
-                {{site.host}}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="menu-item"
-            :class="{'selected-tab': selectedTab === 'video', 'disabled': !canShowVideoTab.canShow}"
-            @click="selectTab('video')"
-        >
-          <div class="">
-            Video settings <span v-if="canShowVideoTab.canShow && canShowVideoTab.warning" class="warning-color">⚠</span>
-          </div>
-          <div v-if="selectedTab === 'video' && activeFrames.length > 0"
-               class=""
-          >
-            <small>Select embedded frame to control:</small>
-            <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
-              <div v-for="frame of activeFrames"
-                   class="tabitem ltr"
-                   :class="{
-                     'tabitem-selected': selectedFrame === frame.id,
-                     'disabled': !isDefaultFrame(frame.id) && (settings && !settings.canStartExtension(frame.label))
-                   }"
-                   :key="frame.id"
-                   @click="selectFrame(frame.id)"
-              >
-                {{frame.label}} <span v-if="frame.name !== undefined && frame.color" :style="{'background-color': frame.color}">[{{frame.name}}]</span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="menu-item experimental"
-            :class="{'selected-tab': selectedTab === 'site-details'}"
-            @click="selectTab('site-details')"
-        >
-          <div class="">
-            Extension settings
-          </div>
-          <div v-if="selectedTab === 'site-details' && activeSites.length > 1"
-               class=""
-          >
-            <small>Select site to control:</small>
-            <div class="site-list overflow-y-auto scrollbar-darker rtl no-overflow-x">
-              <div v-for="site of activeSites"
-                  :key="site.host"
-                  class="tabitem ltr"
-                  :class="{'tabitem-selected': site.host === selectedSite}"
-                  @click="selectSite(site.host)"
-              >
-                {{site.host}}
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="flex flex-grow">
-          <!-- this is spacer -->
-        </div>
-        <div class="menu-item menu-item-darker"
-            :class="{'selected-tab': selectedTab === 'whats-new'}"
-            @click="selectTab('whats-new')"
-        >
-          <div :class="{'new': settings && settings.active && !settings.active.whatsNewChecked}"
-            >
-            What's new?
-          </div>
-          <div class="">
-          </div>
-        </div>
-
-        <div class="menu-item menu-item-darker"
-            :class="{'selected-tab': selectedTab === 'about'}"
-            @click="selectTab('about')"
-        >
-          <div class="">
-            Report a problem
-          </div>
-          <div class="">
-          </div>
-        </div>
-        <div class="menu-item menu-item-darker"
-            :class="{'selected-tab': selectedTab === 'donate'}"
-            @click="selectTab('donate')"
-        >
-          <div class="">
-            Donate
-          </div>
-          <div class="">
-          </div>
-        </div>
-      </div>
-
-      <!-- PANELS/CONTENT -->
-      <div id="tab-content"
-           v-show="!(narrowPopup && sideMenuVisible)"
-           class="flex-grow h100 overflow-y-auto"
-           :class="{'narrow-content': narrowPopup}"
-      >
-        <VideoPanel v-if="settings?.active && selectedTab === 'video'"
-                    class=""
-                    :someSitesDisabledWarning="canShowVideoTab.warning"
-                    :settings="settings"
-                    :frame="selectedFrame"
-                    :zoom="currentZoom"
-                    @zoom-change="updateZoom($event)"
-        />
-        <DefaultSettingsPanel v-if="settings?.active && (selectedTab === 'global' || selectedTab === 'site')"
-                              class=""
-                              :settings="settings"
-                              :scope="selectedTab"
-                              :site="selectedSite"
-        />
-        <SiteDetailsPanel v-if="settings && settings.active && selectedTab === 'site-details' "
-                              class=""
-                              :settings="settings"
-                              :site="selectedSite"
-        />
-        <PerformancePanel v-if="selectedTab === 'performance-metrics'"
-                          :performance="performance" />
-        <WhatsNewPanel v-if="selectedTab === 'whats-new'" />
-        <AboutPanel v-if="selectedTab === 'about'" />
-        <Donate v-if="selectedTab === 'donate'" />
-      </div>
     </div>
   </div>
+  <pre>
+    ---- site:
+{{site}}
+
+    ----
+  </pre>
 </template>
 
 <script>
@@ -215,28 +52,13 @@ import { browser } from 'webextension-polyfill-ts';
 export default {
   data () {
     return {
-      selectedTab: 'video',
-      selectedFrame: '__all',
-      selectedSite: '',
-      activeFrames: [],
-      activeSites: [],
       comms: new Comms(),
-      frameStore: {},
-      frameStoreCount: 0,
-      performance: {},
-      site: null,
-      currentZoom: 1,
-      execAction: new ExecAction(),
       settings: {},
       settingsInitialized: false,
-      logger: {},
-      siteTabDisabled: false,
-      videoTabDisabled: false,
-      canShowVideoTab: {canShow: true, warning: true},
-      showWhatsNew: false,
-      BrowserDetect: BrowserDetect,
       narrowPopup: null,
       sideMenuVisible: null,
+      logger: undefined,
+      site: undefined
     }
   },
   async created() {
@@ -249,12 +71,10 @@ export default {
     await this.settings.init();
     this.settingsInitialized = true;
 
-    // const port = BrowserDetect.firefox ? browser.runtime.connect({name: 'popup-port'}) : chrome.runtime.connect({name: 'popup-port'});
     const port = browser.runtime.connect({name: 'popup-port'});
     port.onMessage.addListener( (m,p) => this.processReceivedMessage(m,p));
     CSM.setProperty('port', port);
 
-    this.execAction.setSettings(this.settings);
 
     // ensure we'll clean player markings on popup close
     window.addEventListener("unload", () => {
@@ -295,16 +115,8 @@ export default {
     }
   },
   components: {
-    VideoPanel,
-    DefaultSettingsPanel,
-    PerformancePanel,
     Debug,
     BrowserDetect,
-    AboutPanel,
-    Donate,
-    SiteDetailsPanel,
-    WhatsNewPanel,
-    // Icon,
   },
   methods: {
     async sleep(t) {
@@ -326,50 +138,7 @@ export default {
     getRandomColor() {
       return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
     },
-    selectTab(tab) {
-      this.selectedTab = tab;
-      if (tab === 'whats-new') {
-        this.settings.active.whatsNewChecked = true;
-        this.settings.save();
-      }
-      this.toggleSideMenu(false);
-    },
-    selectFrame(frame) {
-      this.selectedFrame = frame;
-    },
-    async updateConfig() {
-      // when this runs, a site could have been enabled or disabled
-      // this means we must update canShowVideoTab
-      const settings = this.settings;
-      this.settings = null;
-      this.updateCanShowVideoTab();
 
-      this.$nextTick(() => {
-        this.settings = settings;
-        this.updateCanShowVideoTab();
-      });
-    },
-    updateCanShowVideoTab() {
-      let canShow = false;
-      let warning = false;
-      let t;
-
-      if (!this.settings) {
-        this.canShowVideoTab = {canShow: true, warning: false};
-        return;
-      }
-      for (const site of this.activeSites) {
-        t = this.settings.canStartExtension(site.host);
-        canShow = canShow || t;
-        warning = warning || !t;
-      }
-      if (t === undefined) {
-        // something isn't the way it should be. Show sites.
-        this.canShowVideoTab = {canShow: true, warning: true};
-        return;
-      }
-      this.canShowVideoTab = {canShow: canShow, warning: warning};
-    },
     processReceivedMessage(message, port) {
       this.logger.log('info', 'popup', '[popup::processReceivedMessage] received message:', message)
 
@@ -380,9 +149,6 @@ export default {
             this.site.host = site.tabHostname;
           }
         }
-        if (!this.site || this.site.host !== message.site.host) {
-          CSM.port.postMessage({cmd: 'get-current-zoom'});
-        }
         this.site = message.site;
 
         // update activeSites
@@ -395,147 +161,43 @@ export default {
         // });
         this.selectedSite = this.selectedSite || message.site.host;
 
-        // loadConfig(site.host); TODO
         this.loadFrames(this.site);
-        this.showFirstTab(this.site);
-      } else if (message.cmd === 'set-current-zoom') {
-        this.setCurrentZoom(message.zoom);
-      } else if (message.cmd === 'performance-update') {
-        for (let key in message.message) {
-          this.performance[key] = message.message[key];
-        }
       }
 
       return true;
     },
-    showFirstTab(videoTab) {
-      // determine which tab to show.
-      // Extension global disabled — show 'extension settings'
-      // Extension site disabled, no embedded videos — show 'site settings'
-      // Extension site disabled, embedded videos from non-blacklisted hosts — show video settings
-      // Extension site enabled — show video settings
 
-      // note: this if statement is ever so slightly unnecessary
-      if (! this.settings.canStartExtension('@global')) {
-        // canStartExtension and getExtensionMode return disabled/false for non-whitelisted
-        // sites, even if extension mode is set to "whitelist only." This is problematic
-        // because in order to whitelist a given site, we need to set extension to global-
-        // enabled, whitelist the site, and then set extension to whitelist only. This makes
-        // for a bad user experience, so let's fix this.
-        if (this.settings.active.sites['@global'].mode === ExtensionMode.Disabled) {
-          if (this.selectedTab === 'video' || this.selectedTab === 'site') {
-            this.selectTab('global');
-          }
-          this.siteTabDisabled = true;
-          this.videoTabDisabled = true;
-          return;
-        }
-      }
-
-      this.siteTabDisabled = false;;
-      if (! this.settings.canStartExtension(this.site.host)) {
-        if (videoTab.frames.length > 1) {
-          for (const frame of videoTab.frames) {
-            if (this.settings.canStartExtension(frame.host)) {
-              this.videoTabDisabled = false;
-              // video is selected by default, so no need to reselect it
-              // and if video is not selected, the popup would switch to 'video'
-              // tab once every 5 seconds. We don't want that.
-              // this.selectTab('video');
-              return;
-            }
-          }
-        }
-        this.videoTabDisabled = true;
-        if (this.selectedTab === 'video') {
-          this.selectTab('site');
-        }
-        return;
-      }
-      this.videoTabDisabled = false;
-    },
     isDefaultFrame(frameId) {
       return frameId === '__playing' || frameId === '__all';
     },
-    loadFrames(videoTab) {
-      if (videoTab.selected) {
-        this.selectedSubitem = videoTab.selected;
-        // selectedSubitemLoaded = true;
-      }
-
-      if (videoTab.frames.length < 2 || Object.keys(videoTab.frames).length < 2) {
-        this.selectedFrame = '__all';
-        this.activeSites = [{
-          host: this.site.host,
-          isIFrame: false,  // not used tho. Maybe one day
-        }];
-        this.updateCanShowVideoTab(); // update whether video tab can be shown
-        return;
-      }
-      for (const frame in videoTab.frames) {
-
-        if (frame && !this.frameStore[frame]) {
-          const fs = {
-            name: this.frameStoreCount++,
-            color: this.getRandomColor()
-          }
-
-          this.frameStore[frame] = fs;
-
-          CSM.port.postMessage({
-            cmd: 'mark-player',
-            forwardToContentScript: true,
-            targetTab: videoTab.id,
-            targetFrame: frame,
-            name: fs.name,
-            color: fs.color
-          });
-        }
-      }
-
-      this.activeFrames = [{id: '__all', label: 'All'},{id: '__playing', label: 'Currently playing'}];
+    loadFrames() {
       this.activeSites = [{
         host: this.site.host,
         isIFrame: false,  // not used tho. Maybe one day
       }];
       this.selectedSite = this.selectedSite || this.site.host;
 
-      for (const frame in videoTab.frames) {
-        this.activeFrames.push({
-          id: `${this.site.id}-${frame}`,
-          label: videoTab.frames[frame].host,
-          ...this.frameStore[frame],
-        })
+      // for (const frame in videoTab.frames) {
+      //   this.activeFrames.push({
+      //     id: `${this.site.id}-${frame}`,
+      //     label: videoTab.frames[frame].host,
+      //     ...this.frameStore[frame],
+      //   })
 
-        // only add each host once at most
-        if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
-          this.activeSites.push({
-            host: videoTab.frames[frame].host,
-            isIFrame: undefined // maybe one day
-          });
-        }
-      }
+      //   // only add each host once at most
+      //   if (!this.activeSites.find(x => x.host === videoTab.frames[frame].host)) {
+      //     this.activeSites.push({
+      //       host: videoTab.frames[frame].host,
+      //       isIFrame: undefined // maybe one day
+      //     });
+      //   }
+      // }
 
       // update whether video tab can be shown
       this.updateCanShowVideoTab();
     },
     getRandomColor() {
       return `rgb(${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)}, ${Math.floor(Math.random() * 128)})`;
-    },
-    setCurrentZoom(nz) {
-      this.currentZoom = nz;
-    },
-    updateZoom(nz){
-      this.currentZoom = nz;
-    },
-    selectFrame(id){
-      this.selectedFrame = id;
-    },
-    selectSite(host) {
-      this.selectedSite = host;
-    },
-    toggleSideMenu(visible) {
-      this.sideMenuVisible = visible ?? !this.sideMenuVisible;
     }
   }
 }