New sidebarelement for users that are logged inn. Now they can be redirected directly to the movie in plex.

src/api.js

@@ -252,6 +252,21 @@ const getRequestStatus = (id, type, authorization_token=undefined) => {
     .catch(err => Promise.reject(err))
 }
 
+const watchLink = (title, year, authorization_token=undefined) => {
+  const url = new URL('v1/plex/watch-link', SEASONED_URL)
+  url.searchParams.append('title', title)
+  url.searchParams.append('year', year)
+
+  const headers = {
+    'Authorization': authorization_token,
+    'Content-Type': 'application/json'
+  }
+
+  return fetch(url.href, { headers })
+    .then(resp => resp.json())
+    .then(response => response.link)
+}
+
 // - - - Seasoned user endpoints - - -
 
 const register = (username, password) => {
@@ -458,6 +473,7 @@ export {
   searchTorrents,
   addMagnet,
   request,
+  watchLink,
   getRequestStatus,
   linkPlexAccount,
   unlinkPlexAccount,

src/components/Movie.vue

@@ -47,6 +47,11 @@
 
             Request to be downloaded?
           </sidebar-list-element>
+
+          <sidebar-list-element v-if="isPlexAuthenticated && matched" @click="openInPlex" :iconString="'⏯ '">
+            Watch in plex now!
+          </sidebar-list-element>
+
           <sidebar-list-element v-if="admin" @click="showTorrents=!showTorrents"
             :iconRef="'#icon_torrents'" :active="showTorrents"
             :supplementaryText="numberOfTorrentResults">
@@ -143,7 +148,12 @@ import SidebarListElement from './ui/sidebarListElem'
 import store from '@/store'
 import LoadingPlaceholder from './ui/LoadingPlaceholder'
 
-import { getMovie, getPerson, getShow, request, getRequestStatus } from '@/api'
+import { getMovie,
+         getPerson,
+         getShow,
+         request,
+         getRequestStatus,
+         watchLink } from '@/api'
 
 export default {
   // props: ['id', 'type'],
@@ -199,6 +209,15 @@ export default {
     numberOfTorrentResults: () => {
       let numTorrents = store.getters['torrentModule/resultCount']
       return numTorrents !== null ? numTorrents + ' results' : null
+    },
+    isPlexAuthenticated: () => {
+      const settings = store.getters['userModule/settings']
+      console.log('fetchedSettings', settings)
+
+      if (settings == null || settings['plex_userid'] == null)
+        return false
+
+      return true
     }
   },
   methods: {
@@ -236,6 +255,10 @@ export default {
           }
         })
     },
+    openInPlex() {
+      watchLink(this.title, this.movie.year, storage.token)
+        .then(watchLink => window.location = watchLink)
+    },
     openTmdb(){
       const tmdbType = this.type === 'show' ? 'tv' : this.type
       window.location.href = 'https://www.themoviedb.org/' + tmdbType + '/' + this.id

src/components/ui/sidebarListElem.vue

@@ -2,7 +2,7 @@
   <div>
     <a @click="$emit('click')">
       <li>
-        <figure :class="activeClassIfActive">
+        <figure v-if="iconRef" :class="activeClassIfActive">
           <svg class="icon"><use :xlink:href="iconRefNameIfActive"/></svg>
         </figure>
 
@@ -23,7 +23,7 @@ export default {
   props: {
     iconRef: {
       type: String,
-      required: true
+      required: false
     },
     iconRefActive: {
       type: String,
@@ -85,11 +85,11 @@ li {
   border-bottom: 1px solid $text-color-5;
 
   &:hover {
-    color: $text-color-70;
+    color: $text-color;
     cursor: pointer;
 
     .icon {
-      fill: $text-color-70;
+      fill: $text-color;
       cursor: pointer;
         transform: scale(1.1, 1.1);
     }