Show warning when some frames on a given site are disabled

src/ext/lib/Settings.js

@@ -290,7 +290,7 @@ class Settings {
     // }
     try{
     // if site is not defined, we use default mode:
-      if (! this.active.sites[site]) {
+      if (! this.active.sites[site] || this.active.sites[site].mode === ExtensionMode.Default) {
         return this.active.sites['@global'].mode === ExtensionMode.Enabled;
       }
 

src/popup/App.vue

@@ -133,6 +133,7 @@
       <div id="tab-content" class="flex-grow h100 overflow-y-auto">
         <VideoPanel v-if="settings && settings.active && selectedTab === 'video'"
                     class=""
+                    :someSitesDisabledWarning="canShowVideoTab.warning"
                     :settings="settings"
                     :frame="selectedFrame"
                     :zoom="currentZoom"
@@ -193,28 +194,7 @@ export default {
       settings: new Settings(undefined, () => this.updateConfig()),
       siteTabDisabled: false,
       videoTabDisabled: false,
-    }
-  },
-  computed: {
-    canShowVideoTab() {
-      let canShow = false;
-      let warning = false;
-      let t;
-
-      if (!this.settings) {
-        return {canShow: true, warning: false};
-      }
-      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.
-        return {canShow: true, warning: true};
-      }
-
-      return {canShow, warning}
+      canShowVideoTab: {canShow: true, warning: true},
     }
   },
   async created() {
@@ -282,6 +262,29 @@ export default {
     },
     async updateConfig() {
 
+      // when this runs, a site could have been enabled or disabled
+      // this means we must update canShowVideoTab
+      this.updateCanShowVideoTab();
+    },
+    updateCanShowVideoTab() {
+      let canShow = false;
+      let warning = false;
+      let t;
+
+      if (!this.settings) {
+        this.canShowVideoTab = {canShow: true, warning: false};
+      }
+      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};
+      }
+
+      this.canShowVideoTab = {canShow: canShow, warning: warning};
     },
     processReceivedMessage(message, port) {
       if (Debug.debug && Debug.comms) {
@@ -418,6 +421,9 @@ return true;
           });
         }
       }
+
+      // 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)})`;

src/popup/panels/VideoPanel.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="" style="padding-bottom: 20px">
+    <div v-if="someSitesDisabledWarning" class="warning-lite">
+      Some sites embedded on this page are disabled. Extension will not work on videos embedded from disabled sites.
+    </div>
     <div v-if="aspectRatioActions.length">
       <div class="label">Cropping mode:</div>
       <div class="flex flex-row flex-wrap">
@@ -127,7 +130,8 @@ export default {
   props: [
     'settings',
     'frame',
-    'zoom'
+    'zoom',
+    'someSitesDisabledWarning'
   ],
   created() {
     this.exec = new ExecAction(this.settings);
@@ -175,4 +179,10 @@ export default {
 .input-slider {
   width: 480px;
 }
+.warning-lite {
+  padding-right: 16px;
+  padding-bottom: 16px;
+  padding-top: 8px;
+}
+
 </style>

src/res/css/common.scss

@@ -297,15 +297,17 @@ small {
   color: #d6ba4a;
 }
 
-.warning {
+.warning, .warning-lite {
   color: #d6ba4a;
   padding-left: 35px;
   float: right;
 }
 
-.warning::before {
+.warning::before, .warning-lite::before {
   content: "⚠ ";
   display: inline-block;
+}
+.warning::before {
   font-weight: bold;
   font-size: 2.5em;
   margin-left: -35px;