Merge pull request #1 from remixz/master

Update files

.babelrc

@@ -3,21 +3,15 @@
     ["env", {
       "modules": false,
       "targets": {
-        "chrome": 56,
-        "firefox": 52,
-        "ios": 10,
-        "safari": 10,
-        "edge": 14
+        "chrome": 62,
+        "firefox": 56,
+        "ios": 11,
+        "safari": 11,
+        "edge": 15
       },
-      "exclude": ["transform-regenerator", "transform-async-to-generator"],
       "loose": true,
       "useBuiltIns": true
     }]
   ],
-  "plugins": [
-    ["fast-async", {
-      "useRuntimeModule": true
-    }]
-  ],
   "comments": false
 }

.eslintrc.js

@@ -2,17 +2,17 @@
 
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   parserOptions: {
+    parser: 'babel-eslint',
     sourceType: 'module'
   },
   env: {
     browser: true,
   },
   // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
+  extends: ['plugin:vue/essential', 'standard'],
   // required to lint *.vue files
   plugins: [
-    'html'
+    'vue'
   ]
 }

_redirects

@@ -1,2 +1,3 @@
+/cdn/* http://img1.ak.crunchyroll.com/:splat 200
 /appcache/* /index.html 404
 /*    /index.html   200

build/webpack.prod.conf.js

@@ -97,7 +97,17 @@ const webpackConfig = merge(baseWebpackConfig, {
         events: true,
         navigateFallbackURL: '/'
       },
-      AppCache: false
+      AppCache: false,
+      cacheMaps: [{
+        match: function (url) {
+          if (url.pathname.indexOf('/cdn/') > -1) {
+            return
+          }
+
+          return new URL('/', location)
+        },
+        requestTypes: ['navigate']
+      }]
     })
   ]
 })

config/index.js

@@ -27,7 +27,15 @@ module.exports = {
     autoOpenBrowser: true,
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
-    proxyTable: {},
+    proxyTable: {
+      '/cdn': {
+        target: 'http://img1.ak.crunchyroll.com',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/cdn': ''
+        }
+      }
+    },
     // CSS Sourcemaps off by default because relative paths are "buggy"
     // with this option, according to the CSS-Loader README
     // (https://github.com/webpack/css-loader#sourcemaps)

package.json

@@ -14,6 +14,7 @@
     "axios": "^0.16.0",
     "base64-js": "^1.2.0",
     "clappr": "0.2.77",
+    "clappr-thumbnails-plugin": "^3.6.0",
     "date-fns": "^1.27.2",
     "debounce": "^1.0.2",
     "firebase": "^4.6.2",
@@ -31,12 +32,12 @@
     "vuex-router-sync": "^4.1.2"
   },
   "devDependencies": {
-    "autoprefixer": "^7.0.1",
-    "babel-core": "^6.22.1",
+    "autoprefixer": "^7.2.5",
+    "babel-core": "^6.26.0",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.0.0",
     "babel-polyfill": "^6.23.0",
-    "babel-preset-env": "^1.2.1",
+    "babel-preset-env": "^1.6.1",
     "babel-register": "^6.22.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
@@ -45,15 +46,14 @@
     "eslint-config-standard": "^10.0.0",
     "eslint-friendly-formatter": "^2.0.7",
     "eslint-loader": "^1.6.1",
-    "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-node": "^4.2.2",
     "eslint-plugin-promise": "^3.4.0",
     "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.14.1",
     "extract-text-webpack-plugin": "^3.0.0",
-    "fast-async": "^6.2.0",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.1.3",
     "function-bind": "^1.1.0",
@@ -75,7 +75,8 @@
     "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
     "webpack-hot-middleware": "^2.16.1",
-    "webpack-merge": "^4.0.0"
+    "webpack-merge": "^4.0.0",
+    "workerize-loader": "^1.0.1"
   },
   "engines": {
     "node": ">= 4.0.0",

src/App.css

@@ -33,7 +33,7 @@
   transition: opacity .15s;
   pointer-events: none;
   padding: 4px;
-  z-index: 10000;
+  z-index: 2147483647;
 }
 
 .tooltip .tooltip-content {
@@ -91,3 +91,8 @@
 .container-width {
   width: 948px;
 }
+
+
+.pointer-events-none {
+  pointer-events: none;
+}

src/App.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="app">
     <umi-header v-if="routeName !== 'login'" />
+    <div class="fixed top-0 right-0 left-0 center tc pa3 z-max fw6 bg-yellow box-shadow-umi guest-message" :class="{active: guestMessage}">
+      You can't leave the player as a guest while in a room that's controlled by the host.
+    </div>
     <div class="fixed top-1 right-1 z-max" v-if="routeName !== 'login'">
       <div v-if="updated" class="bg-white pa3 shadow-1 br2 notification success">
         <div class="mb3 fw6 tc"><span class="normal">✅</span> Umi has updated successfully!</div>
@@ -79,6 +82,9 @@ export default {
     },
     stateError () {
       return this.$store.state.error
+    },
+    guestMessage () {
+      return this.$store.state.guestMessage
     }
   },
   methods: {
@@ -158,4 +164,15 @@ export default {
   .notification.error {
     border-top: 2px solid #ff4136;
   }
+
+  .guest-message {
+    transform: translateY(-50px);
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .guest-message.active {
+    transform: translateY(0);
+    opacity: 1;
+  }
 </style>

src/components/Header.vue

@@ -25,8 +25,12 @@
           </span>
           <span class="relative fl bg-dark-gray white pa1 tc br2 f7 fw7 nowrap counter" v-if="room !== ''">{{connectedCount}}</span>
           <div v-if="roomMenu" v-on-clickaway="hideTogether" class="absolute bg-white shadow-1 br2 pv2 ph3 together-menu">
-            <div class="mb2">
-              <div class="fw6">{{roomText}}</div>
+            <div class="mb2 cf">
+              <div class="fw6 fl">{{roomText}}</div>
+              <div class="fr" v-if="isRoomHost">
+                <input type="checkbox" id="hostOnly" v-model="roomHostOnly">
+                <label for="hostOnly" v-tooltip.bottom-center="'Enabling this makes it so only you (the host) can control the player. '">Host-only mode <i class="fa fa-question-circle-o black-60" aria-hidden="true"></i></label>
+              </div>
             </div>
             <input type="text" class="pa2 w-100 pointer" v-model="roomUrl" @click="handleRoomClick" readonly v-if="connected">
             <input type="text" class="pa2 w-100 i" value="Connecting..." readonly v-else>
@@ -103,6 +107,17 @@ export default {
     roomUrl () {
       return `${window.location.origin}/room/${this.room.replace('umi//', '')}`
     },
+    isRoomHost () {
+      return this.$store.getters.isRoomHost
+    },
+    roomHostOnly: {
+      get () {
+        return this.$store.state.roomData.hostOnly
+      },
+      set (val) {
+        this.$store.dispatch('updateRoomData', {hostOnly: val})
+      }
+    },
     roomMenu: {
       get () {
         return this.$store.state.roomMenu
@@ -160,10 +175,6 @@ export default {
     transform: translateZ(0); /* hack fix for 1px jitter when a transform happens on the page */
   }
 
-  .pointer-events-none {
-    pointer-events: none;
-  }
-
   .header-container {
     width: 1024px;
   }

src/components/MediaItem.vue

@@ -1,8 +1,8 @@
 <template>
-  <router-link :to="`/series/${data.series_id}/${id}`" class="black" v-if="data.available">
+  <router-link :to="`/series/${data.series_id}/${id}`" class="black" :class="{'pointer-events-none o-60': isRoomGuest}" v-if="data.available">
     <div class="media-item dib v-top h-100 mr3 mb2 br2 bg-white" :class="[{'hide-child': !selected}, size]" @click="$emit('click')">
       <div class="relative">
-        <img v-if="data.screenshot_image" :src="data.screenshot_image.full_url" class="w-100 image-size br2 br--top">
+        <img v-if="data.screenshot_image" :src="data.screenshot_image.full_url | cdnRewrite" class="w-100 image-size br2 br--top">
         <div v-else class="w-100 image-size tc placeholder-image bg-light-gray">
           <i class="fa fa-question-circle-o black-40 missing-icon" aria-hidden="true"></i>
         </div>
@@ -41,6 +41,9 @@
         return {
           width: `${Math.min(100, (this.data.playhead / this.data.duration) * 100)}%`
         }
+      },
+      isRoomGuest () {
+        return this.$store.state.roomConnected && this.$store.state.roomData.hostOnly && !this.$store.getters.isRoomHost
       }
     }
   }

src/components/QueueItem.vue

@@ -2,7 +2,7 @@
   <router-link :to="`/series/${data.most_likely_media.series_id}/${data.most_likely_media.media_id}`" class="link black" v-if="data.most_likely_media.available">
     <div class="w-100 mb2 pa3 cf hide-child br2 ba b--near-white box-shadow-umi">
       <div class="fl w-20 relative">
-        <img :src="data.most_likely_media.screenshot_image.thumb_url" class="v-mid image-size">
+        <img :src="data.most_likely_media.screenshot_image.thumb_url | cdnRewrite" class="v-mid image-size">
         <div class="bg-gray mt1 playhead">
           <div class="bg-blue playhead" :style="playheadStyle"></div>
         </div>
@@ -20,7 +20,7 @@
   <router-link :to="`/series/${data.most_likely_media.series_id}`" class="link black" v-else>
     <div class="bg-near-white w-100 mb2 pa3 cf bb bw2 b--light-gray hide-child">
       <div class="fl w-20 relative">
-        <img :src="data.series.landscape_image.thumb_url" class="v-mid image-size">
+        <img :src="data.series.landscape_image.thumb_url | cdnRewrite" class="v-mid image-size">
         <div class="child absolute bg-black-40 top-0 image-size">
           <i class="fa fa-clock-o white tc play-icon" aria-hidden="true"></i>
         </div>

src/components/Search.vue

@@ -24,7 +24,7 @@
         @mouseover.native="resultHover"
         @click.native="resultPress"
       >
-        <img class="v-mid" :src="series[id].landscape_image.small_url" :alt="series[id].name">
+        <img class="v-mid" :src="series[id].landscape_image.small_url | cdnRewrite" :alt="series[id].name">
         <span class="truncate dib f6 v-mid">{{series[id].name}}</span>
       </router-link>
     </div>

src/components/SeriesItem.vue

@@ -1,7 +1,7 @@
 <template>
   <router-link :to="`/series/${id}`" class="link" v-if="data">
     <div class="dib mb2 hide-child relative bg-near-white series-item" :class="{mr3: noMargin}">
-      <img :src="data.portrait_image.thumb_url">
+      <img :src="data.portrait_image.thumb_url | cdnRewrite">
       <div class="child absolute absolute--fill bg-black-60 pa2">
         <p class="b white tc f5">{{data.name}}</p>
       </div>