Unifying walkthrough/joinroom

src/components/application/joinroom.vue

@@ -19,19 +19,19 @@
       </v-flex>
     </v-layout> 
     <v-layout row wrap justify-center>
-      <v-flex xs10>
+      <v-flex xs10 lg8 xl6>
         <h3 class="text-xs-center">Connect to a SyncLounge room</h3>
       </v-flex>
     </v-layout>
     <v-layout row wrap justify-center>
-      <v-flex xs10 lg6>
+      <v-flex xs10 lg8 xl6>
         <p class="pa-2">
           It's time to connect to SyncLounge. From the list select a server which is closest to your location. Once you've chosen one that works for you it's time to create a room for your friends to join.
         </p>
       </v-flex>
     </v-layout>
     <v-layout row wrap justify-center>
-      <v-flex xs10 lg6 v-if="!context.getters.getConnected" style="color:white !important">
+      <v-flex xs10 lg8 xl6 v-if="!context.getters.getConnected" style="color:white !important">
         <v-select
           v-bind:items="ptservers"
           class="input-group--focused pt-input"
@@ -69,7 +69,7 @@
       </v-flex>     
     </v-layout>
     <v-layout row wrap justify-center>
-      <v-flex xs10 lg6 v-if="context.getters.getConnected">
+      <v-flex xs10 lg8 xl6 v-if="context.getters.getConnected">
         <v-layout row wrap>
           <v-flex xs12>          
             <v-text-field

src/store/modules/plex/helpers/PlexClient.js

@@ -143,9 +143,6 @@ module.exports = function PlexClient () {
   }
 
   this.updateTimelineObject = function (result) {
-
-
-
     this.setValue('lastTimelineObject', result)
     this.lastTimelineObject = result    
     this.events.emit('new_timeline', result)
@@ -349,15 +346,15 @@ module.exports = function PlexClient () {
     })
   }
 
-  this.playMedia = function (data) {
+  this.playMedia = async function (data) {
     // Play a media item given a mediaId key and a server to play from
     // We need the following variables to build our paramaters:
     // MediaId Key, Offset, server MachineId,
     // Server Ip, Server Port, Server Protocol, Path
-    var that = this
-    // First lets mirror the item so the user has an idea of what we're about to play
 
-    const send = () => {
+    // First we will mirror the item so the user has an idea of what we're about to play
+
+      const send = async () => {
         let command = '/player/playback/playMedia'
         let mediaId = '/library/metadata/' + data.ratingKey
         let offset = data.offset || 0
@@ -385,24 +382,22 @@ module.exports = function PlexClient () {
         }
   
         // Now that we've built our params, it's time to hit the client api
-      return this.hitApi(command, params, that.chosenConnection)
+        await this.hitApi(command, params, that.chosenConnection)
+        return true
       }
   
       if (this.clientIdentifier == 'PTPLAYER9PLUS10') {
-      send()
+        return send()
       } else {
-      this.mirrorContent(data.ratingKey, data.server, function () {
-        send()
-      })
+        await this.mirrorContent(data.ratingKey, data.server)
+        return send()
       }
-
   }
   this.mirrorContent = function (key, serverObject, callback) {
     // Mirror a media item given a mediaId key and a server to play from
     // We need the following variables to build our paramaters:
     // MediaId Key, Offset (0 for simplicity), server MachineId,
     // Server Ip, Server Port, Server Protocol, Path
-    console.log('Trying to mirror content')
 
     let command = '/player/mirror/details'
     let mediaId = '/library/metadata/' + key
@@ -469,7 +464,6 @@ module.exports = function PlexClient () {
         })
       }
       doRequest()    
-    
     })
     
   }