Add popup for Edge

.gitignore

@@ -9,3 +9,5 @@ build/
 *.pem
 
 *.kate-swp
+
+src/res/img/git-ignore/

src/csui/PlayerUiComponent.vue

@@ -1,12 +1,60 @@
 <template>
-  <div class="uw-hover uv-hover-trigger-region">
-    TEST CONTENT
+  <div v-if="uiVisible" class="uw-hover uv-hover-trigger-region">
+    <div class="flex flex-row pad">
+      <div class="text panel">
+        <h1>Microsoft Edge is too broken for this extension to work</h1>
+        <p><sup>2020-12-21</sup></p>
+        <p>In October 2020, Microsoft Edge received an update that renders video playback completely broken. This extension relies on the browser implementing functional video playback, which means that this extension currently cannot work in Edge (and neither can other 21:9 extensions).</p>
+        <p>I have attempted all possible workarounds for shits and giggles without success — this issue is completely impossible for me to fix until Microsoft gets their marbles together and fixes their broken browser.</p>
+        <p><small>Yes I do recognize the irony of getting pissed at Microsoft for their bugs while my extension is basically the Skyrim of CWS, but guys at Microsoft are getting paid for working on MS Edge and I'm not getting paid for writing this extension.</small></p>
+        <p>
+          <b>I am not keeping up with Edge updates as I primarily use Firefox and Chrome. If Edge has already fixed their broken video implementation,
+            please open an issue on <a href="https://github.com/tamius-han/ultrawidify/issues">github</a>, <a href="mailto:tamius.han@gmail.com">shoot me an email</a> or
+            <a href="https://www.reddit.com/message/compose?to=xternal7">PM me on reddit</a>. Please include this string in the message:
+          </b>
+        </p>
+        <p>
+          <i>{{userAgent}}</i>
+        </p>
+        <p>
+           <b>Your help is much appreciated.</b>
+        </p>
+        <p>&nbsp;</p>
+        <p>
+          Further reading: <a href="">ELI5 blogpost about this problem</a>.
+        </p>
+        <p>
+          I know better than you: <b><a @click="uiVisible=false">hide this popup</a></b>
+        </p>
+      </div>
+      <div class="image-examples panel">
+        <p>Follow-up questions</p>
+        <h3>How can one tell when Edge has fixed their bugs?</h3>
+        <p>
+          When 21:9 movies on netflix look like this:
+        </p>
+        <p>
+          <img :src="getUrl('res/img/git-ignore/edge-demo-working.jpg')" />
+        </p>
+        <p>
+          And not like this:
+        </p>
+        <p>
+          <img :src="getUrl('res/img/git-ignore/edge-demo.jpg')" />
+        </p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+        <p>&nbsp;</p>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex';
 import Icon from '../common/components/Icon';
+import BrowserDetect from '../ext/conf/BrowserDetect';
 
 export default {
   components: {
@@ -14,13 +62,11 @@ export default {
   },
   data() {
     return {
-      uiVisible: true
+      uiVisible: true,
+      userAgent: window.navigator.userAgent
     };
   },
   computed: {
-    ...mapState([
-      'showUi'
-    ]),
   },
   watch: {
     showUi(visible) {
@@ -34,6 +80,9 @@ export default {
     console.log("store:", this.$store, this);
   },
   methods: {
+    getUrl(url) {
+      return BrowserDetect.firefox ? browser.runtime.getURL(url) : chrome.runtime.getURL(url);
+    }
   }
 }
 </script>
@@ -47,17 +96,73 @@ export default {
 @import '../res/css/common.scss';
 
 .uw-ultrawidify-container-root {
+  font-family: 'Overpass';
+
   .uw-hover {
     position: absolute;
-    top: 20%;
-    left: 20%;
-    width: 100px;
-    height: 100px;
+    top: 5%;
+    left: 5%;
+    width: 90%;
+    height: 90%;
     color: #fff;
-    background-color: #000;
+    background-color: rgba(84, 8, 8, 0.786);
+
+    pointer-events: auto;
+    overflow: hidden;
+
+    p, h1, h2, h3 {
+      margin: 0.75em;
+      display: block;
+      // display: inline-block;
+    }
+
+    i {
+      font-family: 'Overpass Mono', monospace;
+    }
+
+    a {
+      cursor: pointer;
+    }
+
+    p {
+      font-size: 16px;
+    }
+    h1 {
+      font-size: 36px;
+    }
+
+    sup {
+      vertical-align: super;
+      font-size: smaller;
+    }
+
+    .text {
+      flex-grow: 1;
+      flex-shrink: 0;
+      max-width: 666px;
+      min-width: 420px;
+    }
+
+    .image-examples {
+      flex-grow: auto;
+      flex-shrink: 1;
+      min-width: 720px;
+
+      img {
+        width: 100%;
+      }
+    }
   }
-  .uw-hover:hover {
-    background-color: #f00;
+
+  .pad {
+    padding: 16px;
+    height: 100%;
+    width: 100%;
+    // padding-bottom: 10%;
+    overflow-y: auto;
+  }
+  .flex-row {
+    justify-content: space-around;
   }
 }
 

src/manifest.json

@@ -50,7 +50,8 @@
     "res/fonts/*",
     "res/css/*",
     "res/img/settings/about-bg.png",
-    "res/icons/*"
+    "res/icons/*",
+    "res/img/*"
   ],
   "permissions": [
     "storage",