From f7c373481d040f88fc8956a082a97004101d4def Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 22 Dec 2020 03:14:03 +0100
Subject: [PATCH] Add popup for Edge

---
 .gitignore                     |   2 +
 src/csui/PlayerUiComponent.vue | 131 +++++++++++++++++++++++++++++----
 src/manifest.json              |   3 +-
 3 files changed, 122 insertions(+), 14 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6578331..24dca4f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ build/
 *.pem
 
 *.kate-swp
+
+src/res/img/git-ignore/
diff --git a/src/csui/PlayerUiComponent.vue b/src/csui/PlayerUiComponent.vue
index c9af662..a02ba84 100644
--- a/src/csui/PlayerUiComponent.vue
+++ b/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;
   }
 }
 
diff --git a/src/manifest.json b/src/manifest.json
index bbb829d..320bc91 100644
--- a/src/manifest.json
+++ b/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",