PlexSettings fixed and ptplayer playback options

src/assets/js/plex/PlexTv.js

@@ -271,26 +271,29 @@ module.exports = function () {
     let playables = []
     let j = 0
 
-    let validServers = 0
-    for (let i in blockedServers){
-      if (blockedServers[i].enabled){
-        validServers++
-      }
-    }
+    let validServers = this.servers.length
     if (blockedServers){
-      this.servers.forEach((server) => {
-        if (!blockedServers[server.clientIdentifier]){
-          validServers++
+      for (let i = 0; i < blockedServers.length; i++ ){
+        if (this.getServerById(blockedServers[i])){
+          validServers--
         }
-      })
+      }
     }
     if (validServers == 0){
       return callback(false)
     }
     for (let i = 0; i < this.servers.length; i++) {
       var server = this.servers[i]
-      if (blockedServers[server.clientIdentifier] && !blockedServers[server.clientIdentifier].enabled){
-        console.log('Server: ' + server.name + ' is blocked - not searching')
+      let blocked = false
+      if (blockedServers){
+        for (let i = 0; i < blockedServers.length; i++ ){
+          if (blockedServers[i] == server.clientIdentifier){
+            console.log('Server: ' + server.name + ' is blocked - not searching')
+            blocked = true
+          }
+        }
+      }
+      if (blocked){
         continue
       }
       server.search(hostData.rawTitle, function (results, _server) {

src/components/application/plexsettings.vue

@@ -1,10 +1,22 @@
 <template>
-  <div>
-      <h6>Autoplay Plex Servers</h6>
-      <small>Used for autoplay functionality. Use this list to block PlexTogether from searching certain servers when attempting to autoplay content.</small>
-      <div v-if="plex && plex.gotDevices && plex.servers">
-          <v-switch v-for="server in checked" :key="server" :label="server.name" v-model="checked" :value="server" light warning></v-switch>
-      </div>
+  <div>          
+    <h6>Blocked Plex Servers</h6>
+    <small>Used for autoplay functionality. Use this list to block PlexTogether from searching certain servers when attempting to autoplay content.</small>    
+    <v-layout row wrap>
+      <v-flex xs12>
+        <v-select
+          label="Select"
+          v-bind:items="localServersList"
+          v-model="blockedServers"
+          item-value="id"
+          item-text="name"
+          multiple
+          light
+          hint="Blocked Servers"
+          persistent-hint
+        ></v-select>
+      </v-flex>
+    </v-layout>
   </div>
 </template>
 
@@ -14,57 +26,15 @@
     name: 'plexsettings',
     data () {
       return {
+        blockedServers: this.$store.getters.getSettingBLOCKEDSERVERS || []
       }
     },
-    mounted() {
-      this.$nextTick(function() {
-        console.log('hey')
-        this.checked = this.getlocalServersList()
-      })
-    },
     methods: {
-      updateServer(id,servername,value){
-        let storedSettings = this.$store.getters.getSettingBLOCKEDSERVERS || {}
-        if (storedSettings[id]){
-          // Server already exists in settings
-          storedSettings[id].enabled = value
-        } else {
-          storedSettings[id] = {
-            enabled: value,
-            name: servername,
-            id: id,
-            source: 'setting'
-          }
-        }
-        this.$store.commit('setSettingBLOCKEDSERVERS', storedSettings)
-      },
-      getlocalServersList () {
-        let servers = []
-        if (this.$store.getters.getSettingBLOCKEDSERVERS) {
-          for (let i in this.$store.getters.getSettingBLOCKEDSERVERS){
-            servers.push(this.$store.getters.getSettingBLOCKEDSERVERS[i])
-          }
-        }
-        console.log(this.$store.state.plex)
-        this.$store.state.plex.servers.forEach((server) => {
-          if (this.$store.getters.getSettingBLOCKEDSERVERS && this.$store.getters.getSettingBLOCKEDSERVERS[server.clientIdentifier]){
-            return
-          }
-          servers.push({
-            name: server.name,
-            id: server.clientIdentifier,
-            enabled: true,
-            source: 'api'
-          })
-        })
-        return servers
-      }
     },
+
     watch: {
-      plex: () => {
-        console.log('Change')
-        setTimeout(() => {
-        },25)
+      blockedServers: function() {
+        this.$store.commit('setSettingBLOCKEDSERVERS', this.blockedServers)
       }
     },
     computed: {
@@ -74,47 +44,34 @@
       context: function () {
         return this.$store
       },
-      logo: function () {
-        return 'static/plexlogo.png'
-      },
-      checked: {
-        get () {
-          let servers = []
-          if (this.$store.getters.getSettingBLOCKEDSERVERS) {
-            for (let i in this.$store.getters.getSettingBLOCKEDSERVERS){
-              servers.push(this.$store.getters.getSettingBLOCKEDSERVERS[i])
-            }
-          }
-          this.$store.state.plex.servers.forEach((server) => {
-            if (this.$store.getters.getSettingBLOCKEDSERVERS && this.$store.getters.getSettingBLOCKEDSERVERS[server.clientIdentifier]){
-              return
-            }
+      localServersList: function() {
+        let servers = []
+        if (!this.plex || !this.plex.servers){
+          return servers
+        }
+        this.plex.servers.forEach((server) => {
+          if (this.$store.getters.getSettingBLOCKEDSERVERS && this.$store.getters.getSettingBLOCKEDSERVERS[server.clientIdentifier]){            
             servers.push({
               name: server.name,
               id: server.clientIdentifier,
-              enabled: true,
-              source: 'api'
             })
-          })
-          return servers
-        },
-        set (newsettings) {
-          console.log(newsettings)
-          let storedSettings = this.$store.getters.getSettingBLOCKEDSERVERS || {}
-          if (storedSettings[id]){
-            // Server already exists in settings
-            storedSettings[id].enabled = value
-          } else {
-            storedSettings[id] = {
-              enabled: value,
-              name: servername,
-              id: id,
-              source: 'setting'
-            }
+            return
           }
-          //this.$store.commit('setSettingBLOCKEDSERVERS', storedSettings)
-        }
+          servers.push({
+            name: server.name,
+            id: server.clientIdentifier,
+          })
+        })
+        return servers
+        
+        
+      },
+      logo: function () {
+        return 'static/plexlogo.png'
       },
     },
+    mounted: function () {
+      // Create event listeners
+    }
   }
-</script>
+</script>

src/components/application/ptplayer.vue

@@ -14,55 +14,72 @@
                  :initialOffset="offset"
                  :createdAt="playerCreatedAt"
     ></videoplayer>
-    <v-dialog>
-      <h2> Playback Settings </h2>
-      <div v-if="playingMetadata && chosenServer" class="input-field col l12 s12 testDropdown">
-        <v-select name="select"
-                  id="select"
-                  v-model="chosenMediaIndex"
-                  :items="mediaIndexSelect"
-        ></v-select>
-        <label for="select">Version</label>
-      </div>
-      <div v-if="playingMetadata && chosenServer" class="input-field col l12 s12 testDropdown">
-        <v-select name="select"
-                  id="select"
-                  v-model="chosenQuality"
-                  :items="qualitiesSelect"
-        ></v-select>
-        <label for="select">Quality</label>
-      </div>
-      <div v-if="playingMetadata && chosenServer" class="input-field col l12 s12 testDropdown">
-        <v-select name="select"
-                  id="select"
-                  v-model="chosenAudioTrackIndex"
-                  :select-text="'Default'"
-                  :items="audioTrackSelect"
-        ></v-select>
-        <label for="select">Audio</label>
-      </div>
-      <div v-if="playingMetadata && chosenServer" class="input-field col l12 s12 testDropdown">
-        <v-select name="select"
-                  id="select"
-                  v-model="chosenSubtitleIndex"
-                  :select-text="'Default'"
-                  :items="subtitleTrackSelect"
-        ></v-select>
-        <label for="select">Subtitles</label>
-      </div>
-      <div class="row">
-        <div class="col l12 s12">
-          <v-btn class="center" style="background-color: #d32f2f" v-on:click.native="stopPlayback()">Stop playback
-          </v-btn>
-        </div>
-      </div>
+    <v-dialog v-model="dialog"> 
+      <v-card>
+        <v-card-row>
+          <v-card-title>Playback Settings </v-card-title>
+        </v-card-row>
+        <v-card-row>
+          <v-card-text>
+            
+           <v-select
+            v-model="chosenQuality"
+            :items="qualitiesSelect"
+            light
+            item-text="text"
+            item-value="id"
+            persistent-hint
+            label="Quality"
+            hint="Select a different quality"
+            ></v-select>
+           <v-select
+            v-model="chosenAudioTrackIndex"
+            :select-text="'Default'"
+            label="Audio track"
+            item-text="text"
+            item-value="id"
+            light
+            persistent-hint
+            hint="Select a different audio track"
+            :items="audioTrackSelect"
+            ></v-select> 
+            <v-select
+            light
+            persistent-hint
+            label="Subtitles"
+            item-text="text"
+            item-value="id"
+            hint="Select a different subtitle track"
+            v-model="chosenSubtitleIndex"
+            :select-text="'Default'"
+            :items="subtitleTrackSelect"
+            ></v-select>
+            <v-select
+            v-if="mediaIndexSelect.length > 1"
+            light
+            persistent-hint
+            item-text="text"
+            item-value="id"
+            hint="Select a different version of the content you're playing"
+            v-model="chosenMediaIndex"
+            label="Version"
+            :items="mediaIndexSelect"
+            ></v-select>
+          </v-card-text>
+        </v-card-row>
+        <v-card-row actions>
+          <v-btn class="blue--text darken-1" flat @click.native="dialog = false">Close</v-btn>
+        </v-card-row>
+      </v-card>
     </v-dialog>
-    <div class="row" v-if="playingMetadata && chosenServer">
-      <div class="col l4 offset-l4 s12 center" style="padding-top:1%">
-        <v-btn class="center" style="background-color: #E5A00D" v-on:click.native="stopPlayback()">Stop playback
-        </v-btn>
-      </div>
-    </div>
+    <v-layout v-if="playingMetadata && chosenServer" row justify-center>
+      <v-flex md2>
+        <v-btn primary light v-on:click.native.stop="dialog = !dialog">Playback Settings</v-btn>
+      </v-flex>
+      <v-flex md2>
+        <v-btn error light v-on:click.native="stopPlayback()">Stop playback</v-btn>
+      </v-flex>
+    </v-layout>
 
   </div>
 </template>
@@ -196,7 +213,8 @@
         transcodeSessionMetadata: {},
 
         // Browser
-        browser: this.getBrowser()
+        browser: this.getBrowser(),
+        dialog: false
       }
     },
     watch: {

src/store.js

@@ -633,12 +633,15 @@ const plexTogether = {
                 state.decisionBlocked = true
 
                 let blockedServers = rootState.BLOCKEDSERVERS
-                let validServers = 0
-                for (let i in blockedServers){
-                  if (blockedServers[i].enabled){
-                    validServers++
+                let validServers = rootState.plex.servers.length
+                if (blockedServers){
+                  for (let i = 0; i < blockedServers.length; i++ ){
+                    if (rootState.plex.getServerById(blockedServers[i])){
+                      validServers--
+                    }
                   }
                 }
+
                 sendNotification('Searching ' + validServers + ' Plex Servers for "' + hostTimeline.rawTitle + '"')
                 rootState.plex.playContentAutomatically(rootState.chosenClient, hostTimeline, blockedServers, function (result) {
                   console.log('Auto play result: ' + result)