Add Umi Enabler extension

We're back!!

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 dist/
 npm-debug.log
 firebase-debug.log
+extension.zip

extension/background.js

@@ -0,0 +1,10 @@
+/* global chrome */
+
+chrome.webRequest.onHeadersReceived.addListener(({responseHeaders}) => {
+  const corsHeader = responseHeaders.findIndex(({name}) => name.toLowerCase() === 'access-control-allow-origin')
+  if (corsHeader > -1) {
+    responseHeaders[corsHeader].value = '*'
+  }
+
+  return {responseHeaders}
+}, {urls: ['https://*.vrv.co/*', 'https://*.dlvr1.net/*']}, ['blocking', 'responseHeaders'])

extension/manifest.json

@@ -0,0 +1,20 @@
+{
+  "manifest_version": 2,
+
+  "name": "Umi Enabler",
+  "description": "Allows Umi player to work on all series",
+  "version": "1.0.0",
+
+  "permissions": [
+    "webRequest",
+    "webRequestBlocking",
+    "https://umi.party/*",
+    "https://*.vrv.co/*",
+    "https://*.dlvr1.net/*"
+  ],
+
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": true
+  }
+}

src/App.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <router-view v-if="routeName === 'login'"></router-view>
-    <main class="bg-white center pv1 ph3 mv3" :class="{'tall-offset': !readFuture}" v-else>
+    <main class="bg-white center pv1 ph3 mv3" :class="{'tall-offset': !readExtension}" v-else>
       <router-view v-if="loaded"></router-view>
       <div v-else-if="error">
         <img src="https://my.mixtape.moe/gazrbv.gif" class="fl pr3">
@@ -86,8 +86,8 @@ export default {
     guestMessage () {
       return this.$store.state.guestMessage
     },
-    readFuture () {
-      return this.$store.state.readFuture
+    readExtension () {
+      return this.$store.state.readExtension
     }
   },
   methods: {

src/components/Header.vue

@@ -1,9 +1,9 @@
 <template>
-  <header class="fixed top-0 w-100" :class="[lights ? 'z-3' : 'z-max', {'alt-header': routeName === 'series' || routeName === 'media', 'box-shadow-umi': routeName !== 'media', 'tall-header': !readFuture}]">
-    <div class="w-100 bg-washed-red fw6 pa2 umi-border" v-if="!readFuture">
+  <header class="fixed top-0 w-100" :class="[lights ? 'z-3' : 'z-max', {'alt-header': routeName === 'series' || routeName === 'media', 'box-shadow-umi': routeName !== 'media', 'tall-header': !readExtension}]">
+    <div class="w-100 bg-light-green fw6 pa2 umi-border" v-if="!readExtension">
       <div class="header-container center">
-        Wondering why new anime and some episodes aren't working? Read <router-link @click.native="$store.commit('SET_READ_FUTURE')" class="black i" to="/future-of-umi">The Future of Umi</router-link>.
-        <div class="fr" @click="$store.commit('SET_READ_FUTURE')">
+        To watch new series, you'll need to install this Chrome extension: <a target="_blank" class="black" href="https://chrome.google.com/webstore/detail/umi-enabler/ebpgknlgpomojokdkpgphjigniicjcgc">Umi Enabler <i class="fa fa-external-link" aria-hidden="true"></i></a>
+        <div class="fr" @click="$store.commit('SET_READ_EXTENSION')">
           <i class="fa fa-close pointer grow" aria-hidden="true"></i>
         </div>
       </div>
@@ -25,10 +25,10 @@
             <i class="fa fa-history v-mid mr2" aria-hidden="true"></i>
             <span class="fw6">History</span>
           </router-link>
-          <router-link to="/future-of-umi" class="dark-gray no-underline relative">
+          <!-- <router-link to="/future-of-umi" class="dark-gray no-underline relative">
             <i class="fa fa-paper-plane-o v-mid mr2" aria-hidden="true"></i>
             <span class="fw6">The Future of Umi</span>
-          </router-link>
+          </router-link> -->
         </div>
         <div class="absolute search right-0">
           <span class="fa-stack dib pointer" @click="showTogether" v-if="room !== ''" @mouseover="roomHover = true" @mouseout="roomHover = false">
@@ -65,6 +65,9 @@
                 <span>{{malUsername}}</span>
               </a>
             </div>
+            <a @click="hideMenu" href="https://chrome.google.com/webstore/detail/umi-enabler/ebpgknlgpomojokdkpgphjigniicjcgc" target="_blank" class="db bg-white bg-animate hover-bg-light-gray pa2 no-underline black">
+              <i class="fa fa-chrome mr1" aria-hidden="true"></i> Install extension
+            </a>
             <router-link @click.native="hideMenu" to="/settings" class="db bg-white bg-animate hover-bg-light-gray pa2 no-underline black">
               <i class="fa fa-cog mr1"></i> Settings
             </router-link>
@@ -141,8 +144,8 @@ export default {
     routeName () {
       return this.$store.state.route.name
     },
-    readFuture () {
-      return this.$store.state.readFuture
+    readExtension () {
+      return this.$store.state.readExtension
     }
   },
   methods: {

src/pages/Changelog.vue

@@ -2,6 +2,18 @@
   <div>
     <h1 class="fw4">Changelog</h1>
 
+    <h2 class="fw6 f4 flex items-center update-title">2018-03-27: All series work again!!</h2>
+    <div class="lh-copy">
+      <ul class="changelog-list">
+        <li>
+          If you've tried to use Umi for the last few weeks, you'll have noticed that new series and episodes stopped working. I initially thought this was unfixable, and published a letter wishing you all well. Well... hopefully you've come back for some reason, as I figured out a way to get it working again! It's not absolutely perfect, as it requires you to <a href="https://chrome.google.com/webstore/detail/umi-enabler/ebpgknlgpomojokdkpgphjigniicjcgc" target="_blank" class="b">install a Chrome extension</a>. However, unlike many other Chrome extensions that hook into Crunchyroll, I don't need to grab your credentials in the extension, so it satisfies my personal safety requirements. (The quick technical rundown is that it just changes the CORS headers on the incoming video responses.) I apologize to the non-Chrome users for now, but I am looking into making the extension work on Firefox as well.
+        </li>
+        <li>
+          In other news, I teased to some people that I may work on a desktop app of Umi that also works with sites like Funimation and HiDive. I'm still planning to work on this eventually! I may also be able to make it work in the browser as well, thanks to this Chrome extension, but I wouldn't hold my breath on it. I wanted to release this extension now though, so that people can continue to use Umi. Happy watching!
+        </li>
+      </ul>
+    </div>
+
     <h2 class="fw6 f4 flex items-center update-title">2018-02-03: Video player thumbnails & improvements</h2>
     <div class="lh-copy">
       <ul class="changelog-list">

src/store/index.js

@@ -51,7 +51,7 @@ const store = new Vuex.Store({
     error: false,
     expiredSession: '',
     guestMessage: false,
-    readFuture: localStorage.getItem('readFuture') ? true : false
+    readExtension: localStorage.getItem('readExtension') ? true : false
   },
 
   actions: {
@@ -607,9 +607,9 @@ const store = new Vuex.Store({
       state.guestMessage = bool
     },
 
-    SET_READ_FUTURE (state) {
-      localStorage.setItem('readFuture', 'true')
-      state.readFuture = true
+    SET_READ_EXTENSION (state) {
+      localStorage.setItem('readExtension', 'true')
+      state.readExtension = true
     }
   },