Fixing more plex client api stuff

src/components/application/plexbrowser/plexcontent.vue

@@ -89,14 +89,14 @@
                     v-if="!playable"
                     style="background-color: #cc3f3f"
                     class="white--text"
-                    @click.native="pressStop()"
+                    @click="PRESS_STOP"
                   >
                     <v-icon /> Stop
                   </v-btn>
 
                   <div v-if="!playable">
                     <v-btn
-                      v-if="me.role !== 'host'"
+                      v-if="!AM_I_HOST"
                       :disabled="manualSyncQueued"
                       color="blue"
                       @click.native="doManualSync"
@@ -261,7 +261,7 @@
                           block
                           style="background-color: #cc3f3f"
                           class="white--text"
-                          @click.native="pressStop()"
+                          @click.native="PRESS_STOP"
                         >
                           <v-icon /> Stop
                         </v-btn>
@@ -269,7 +269,7 @@
 
                       <v-col cols="12">
                         <v-btn
-                          v-if="me.role !== 'host'"
+                          v-if="!AM_I_HOST"
                           block
                           :disabled="manualSyncQueued"
                           color="blue"
@@ -535,9 +535,10 @@ export default {
   },
 
   computed: {
-    ...mapGetters([
+    ...mapGetters('plexclients', [
       'GET_CHOSEN_CLIENT',
-
+      'GET_CHOSEN_CLIENT_ID',
+      'GET_ACTIVE_SERVER_ID',
     ]),
 
     ...mapGetters('plexservers', [
@@ -545,8 +546,12 @@ export default {
       'GET_PLEX_SERVER',
     ]),
 
-    me() {
-      return this.$store.state.me;
+    ...mapGetters('synclounge', [
+      'AM_I_HOST',
+    ]),
+
+    server() {
+      return this.GET_PLEX_SERVER(this.GET_ACTIVE_SERVER_ID);
     },
 
     manualSyncQueued() {
@@ -632,6 +637,7 @@ export default {
   methods: {
     ...mapActions('plexclients', [
       'PLAY_MEDIA',
+      'PRESS_STOP',
     ]),
 
     ...mapActions('plexservers', [
@@ -727,10 +733,6 @@ export default {
       });
     },
 
-    pressStop() {
-      this.GET_CHOSEN_CLIENT.pressStop(() => {});
-    },
-
     getStreamCount(streams, type) {
       let count = 0;
       streams.forEach((stream) => {

src/components/nowplayingchip.vue

@@ -1,43 +1,30 @@
 <template>
-  <v-card
-    :to="href"
-    color="blue darken-4"
+  <v-list-item
+    two-line
+    dense
     hover
-    style="height: 100%; width: 230px"
+    class="nowplaying"
+    :to="href"
   >
-    <v-row
-      justify="center"
-      align="center"
+    <v-list-item-avatar
+      class="ma-0"
+      tile
+      size="52"
     >
-      <v-col
-        md="2"
-        class="hidden-xs-only text-center"
-      >
-        <img
-          :src="thumb"
-          style="height: 52px; vertical-align: middle"
-        >
-      </v-col>
+      <v-img
+        contain
+        :src="thumb"
+      />
+    </v-list-item-avatar>
 
-      <v-col
-        cols="12"
-        md="10"
-        class="pl-3 pa-1 text-xs-left"
-        style="overflow: hidden; white-space: nowrap; line-height: 24px"
-      >
-        <div style="font-size: 18px">
-          Now Playing
-        </div>
+    <v-list-item-content>
+      <v-list-item-title>
+        Now Playing
+      </v-list-item-title>
 
-        <div>
-          <small>
-            <b>{{ getTitle(GET_ACTIVE_MEDIA_METADATA) }}</b> -
-            {{ getSecondaryTitle(GET_ACTIVE_MEDIA_METADATA) }}
-          </small>
-        </div>
-      </v-col>
-    </v-row>
-  </v-card>
+      <v-list-item-subtitle>{{ getTitle(GET_ACTIVE_MEDIA_METADATA) }} - {{ getSecondaryTitle(GET_ACTIVE_MEDIA_METADATA) }}</v-list-item-subtitle>
+    </v-list-item-content>
+  </v-list-item>
 </template>
 
 <script>
@@ -94,3 +81,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.nowplaying {
+  max-width: 300px;
+}
+</style>

src/store/modules/plexclients/actions.js

@@ -68,33 +68,32 @@ export default {
       // MediaId Key, Offset, server MachineId,
       // Server Ip, Server Port, Server Protocol, Path
 
-      const command = '/player/playback/playMedia';
+      // TODO: potentially wait for stuff..
+      await dispatch('SEND_CLIENT_REQUEST', {
+        path: '/player/playback/playMedia',
+        params: {
+          wait: 0,
+          key: metadata.key,
+          offset: Math.round(offset) || 0,
+          machineIdentifier,
+          address: server.chosenConnection.address,
+          port: server.chosenConnection.port,
+          protocol: server.chosenConnection.protocol,
+          path: server.chosenConnection.uri + metadata.key,
+          token: server.accessToken,
+          ...mediaIndex && { mediaIndex },
+        },
+      });
 
-      const params = {
-        'X-Plex-Client-Identifier': 'SyncLounge',
-        key: metadata.key,
-        offset: Math.round(offset) || 0,
-        machineIdentifier,
-        address: server.chosenConnection.address,
-        port: server.chosenConnection.port,
-        protocol: server.chosenConnection.protocol,
-        path: server.chosenConnection.uri + metadata.key,
-        wait: 0,
-        token: server.accessToken,
-      };
-
-      if (mediaIndex) {
-        params.mediaIndex = mediaIndex;
-      }
-      await getters.GET_CHOSEN_CLIENT.hitApi(command, params);
-      await this.waitForMovement();
+      // TODO: fix wait for movement lol
+      // await this.waitForMovement();
     }
   },
 
   SEND_CLIENT_REQUEST: async ({ getters, commit }, { path, params }) => {
     const { data } = await getters.GET_CHOSEN_PLEX_CLIENT_AXIOS.get(path, {
       params: {
-        commandId: getters.GET_COMMAND_ID,
+        commandID: getters.GET_COMMAND_ID,
         type: 'video',
         ...params,
       },
@@ -109,7 +108,7 @@ export default {
 
   FETCH_CHOSEN_CLIENT_TIMELINE: async ({ dispatch }) => {
     const data = await dispatch('SEND_CLIENT_REQUEST', {
-      url: '/player/timeline/poll',
+      path: '/player/timeline/poll',
       params: {
         wait: 0,
       },
@@ -130,14 +129,19 @@ export default {
     if (!getters.GET_PLEX_CLIENT_TIMELINE
       || getters.GET_PLEX_CLIENT_TIMELINE.machineIdentifier !== timeline.machineIdentifier
       || getters.GET_PLEX_CLIENT_TIMELINE.ratingKey !== timeline.ratingKey) {
+      if (timeline.state === 'stopped') {
+        commit('SET_ACTIVE_MEDIA_METADATA', null);
+        commit('SET_ACTIVE_SERVER_ID', null);
+      } else {
       // If client has changed what it's playing
       // TODO: see what client sends when its stopped and set metadata and stuff to null instead if so
-      commit('SET_ACTIVE_MEDIA_METADATA', await dispatch('FETCH_PLEX_METADATA', {
-        machineIdentifier: timeline.machineIdentifier,
-        ratingKey: timeline.ratingKey,
-      }));
+        commit('SET_ACTIVE_MEDIA_METADATA', await dispatch('plexservers/FETCH_PLEX_METADATA', {
+          machineIdentifier: timeline.machineIdentifier,
+          ratingKey: timeline.ratingKey,
+        }, { root: true }));
 
-      commit('SET_ACTIVE_SERVER_ID', timeline.machineIdentifier);
+        commit('SET_ACTIVE_SERVER_ID', timeline.machineIdentifier);
+      }
       // TODO: do wahtever was in the playback changed event handler here
     }
 
@@ -275,7 +279,7 @@ export default {
       default: {
         await dispatch('UPDATE_PREVIOUS_SYNC_TIMELINE_COMMAND_ID');
         return dispatch('SEND_CLIENT_REQUEST', {
-          url: '/player/playback/play',
+          path: '/player/playback/play',
           params: {
             wait: 0,
           },
@@ -293,7 +297,7 @@ export default {
 
       default: {
         return dispatch('SEND_CLIENT_REQUEST', {
-          url: '/player/playback/pause',
+          path: '/player/playback/pause',
           params: {
             wait: 0,
           },
@@ -313,7 +317,7 @@ export default {
         await dispatch('UPDATE_PREVIOUS_SYNC_TIMELINE_COMMAND_ID');
 
         return dispatch('SEND_CLIENT_REQUEST', {
-          url: '/player/playback/stop',
+          path: '/player/playback/stop',
           params: {
             wait: 0,
           },
@@ -333,7 +337,7 @@ export default {
         await dispatch('UPDATE_PREVIOUS_SYNC_TIMELINE_COMMAND_ID');
 
         return dispatch('SEND_CLIENT_REQUEST', {
-          url: '/player/playback/seekTo',
+          path: '/player/playback/seekTo',
           params: {
             wait: 0,
             offset,
@@ -359,6 +363,7 @@ export default {
   }),
 
   SKIP_AHEAD: async (current, duration) => {
+    // TODO: lol this is broken fix pls
     const startedAt = Date.now();
     const now = this.lastTimelineObject.time;
     await this.seekTo(current + duration);