Changing package will change available quality options

Author: asghol

src/App.vue

@@ -16,7 +16,7 @@
                       :selectedPackage=selectedPackage
                       v-on:packageSelected="packageSelected">
     </package-selector>
-    <quality-selection  :qualitySettings=qualityList
+    <quality-selection  :selectedPackage=selectedPackage
                         :selectedQuality=qualitySelected
                         v-on:qualityChanged="qualityChanged">
     </quality-selection>
@@ -50,20 +50,6 @@ export default {
   data () {
     return {
       channelList: [],
-      qualityList: [
-        {
-          name: 'High',
-          qualityIndex: 2
-        },
-        {
-          name: 'Medium',
-          qualityIndex: 1
-        },
-        {
-          name: 'Low',
-          qualityIndex: 0
-        }
-      ],
       currentChannel: {},
       selectedPackage: null,
       packages: [],

src/components/QualitySelection.vue

@@ -2,7 +2,7 @@
   <div>
     <label>Quality</label>
     <select name="quality" v-on:change="qualitySelected($event);">
-      <option v-for="(quality, index) in qualitySettings"
+      <option v-for="(quality, index) in getQualityOptions"
               :selected="quality.qualityIndex == selectedQuality"
               :value="quality.qualityIndex">
               {{quality.name}}
@@ -14,7 +14,15 @@
 <script>
   export default {
     name: 'quality-selection',
-    props: [ 'qualitySettings', 'selectedQuality' ],
+    props: [ 'selectedPackage', 'selectedQuality' ],
+    computed: {
+      getQualityOptions: function () {
+        if (this.selectedPackage) {
+          return this.selectedPackage.qualityOptions
+        }
+        return null
+      }
+    },
     methods: {
       qualitySelected (event) {
         this.$emit('qualityChanged', event.target.value)

static/channels.json

@@ -120,6 +120,20 @@
             "2": "http://stream.p4.no/p5stavanger_mp3_hq"
           }
         }
+      ],
+      "qualityOptions": [
+        {
+          "name": "High",
+          "qualityIndex": 2
+        },
+        {
+          "name": "Medium",
+          "qualityIndex": 1
+        },
+        {
+          "name": "Low",
+          "qualityIndex": 0
+        }
       ]
     },
     {
@@ -189,6 +203,16 @@
             "1": "http://tx-bauerno.sharp-stream.com/http_live.php?i=norskpop_no_mp3"
           }
         }
+      ],
+      "qualityOptions": [
+        {
+          "name": "Medium",
+          "qualityIndex": 1
+        },
+        {
+          "name": "Low",
+          "qualityIndex": 0
+        }
       ]
     }
   ]