Fixes #5 Switch Between Audio and Video Streams

literal-life-church · Jan 7, 2019 · 2da6d48 · 2da6d48
1 parent a8d351a
commit 2da6d48
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 7 deletions.
diff --git a/assets/audio.png b/assets/audio.png
diff --git a/assets/credits.txt b/assets/credits.txt
@@ -0,0 +1,2 @@
+Audio Icon (https://www.iconfinder.com/icons/172501/medium_volume_icon) made by Visual Pharm (http://icons8.com/) from www.iconfinder.com is licensed by CC BY-ND 3.0
+Video Icon (https://www.iconfinder.com/icons/172629/camera_video_icon) made by Visual Pharm (http://icons8.com/) from www.iconfinder.com is licensed by CC BY-ND 3.0
diff --git a/assets/video.png b/assets/video.png
diff --git a/index.html b/index.html
@@ -12,6 +12,7 @@
   <body>
     <div id="stream-switch">
       <stream-switch
+        azure-audio-channel-name="audio"
         azure-video-channel-name="video"
         firebase-project-id="your-project-id" />
     </div>

diff --git a/stream-switch.js b/stream-switch.js
@@ -1,9 +1,18 @@
+var player = null;
+
+var audioUrl = '';
+var videoUrl = '';
+
 Vue.component('stream-switch', {
     props: {
         autoplay: {
             default: true,
             type: Boolean
         },
+        azureAudioChannelName: {
+            required: true,
+            type: String
+        },
         azureVideoChannelName: {
             required: true,
             type: String
@@ -38,6 +47,55 @@ Vue.component('stream-switch', {
         }
     },
 
+    data() {
+        return {
+            audioButtonBackgroundColor: 'transparent',
+            videoButtonBackgroundColor: '#CCCCCC'
+        }
+    },
+
+    computed: {
+        audioStyles: function() {
+            return {
+                backgroundColor: this.audioButtonBackgroundColor,
+                cursor: 'pointer',
+                display: 'inline-block',
+                padding: '10px'
+            }
+        },
+
+        videoStyles: function() {
+            return {
+                backgroundColor: this.videoButtonBackgroundColor,
+                cursor: 'pointer',
+                display: 'inline-block',
+                padding: '10px'
+            }
+        }
+    },
+
+    methods: {
+        selectedAudio: function() {
+            player.src([{
+                src: audioUrl,
+                type: 'application/vnd.ms-sstr+xml'
+            }]);
+
+            this.audioButtonBackgroundColor = '#CCCCCC';
+            this.videoButtonBackgroundColor = 'transparent';
+        },
+
+        selectedVideo: function() {
+            player.src([{
+                src: videoUrl,
+                type: 'application/vnd.ms-sstr+xml'
+            }]);
+
+            this.audioButtonBackgroundColor = 'transparent';
+            this.videoButtonBackgroundColor = '#CCCCCC';
+        }
+    },
+
     mounted: function () {
         var url = 'https://firestore.googleapis.com/v1/projects/';
         url += this.firebaseProjectId;
@@ -59,11 +117,12 @@ Vue.component('stream-switch', {
             width: this.width
         };
 
-        var player = amp('stream-switch-amp', options);
-
         var error = this.errorMessage;
+        var audioChannelName = this.azureAudioChannelName;
         var videoChannelName = this.azureVideoChannelName;
 
+        player = amp('stream-switch-amp', options);
+
         player.addEventListener('error', function () {
             var message = document.querySelectorAll('#stream-switch-amp div.vjs-modal-dialog-content')[0];
             message.innerText = error;
@@ -80,12 +139,14 @@ Vue.component('stream-switch', {
                     return;
                 }
 
-                var videoUrl = '';
-
                 response.data.documents.forEach(function (document) {
                     var name = document.fields['name'].stringValue;
                     var url = document.fields['url'].stringValue;
 
+                    if (name.toLowerCase() == audioChannelName.toLowerCase()) {
+                        audioUrl = url;
+                    }
+
                     if (name.toLowerCase() == videoChannelName.toLowerCase()) {
                         videoUrl = url;
                     }
@@ -96,13 +157,13 @@ Vue.component('stream-switch', {
                     type: 'application/vnd.ms-sstr+xml'
                 }]);
             })
-            .catch(function (error) {
+            .catch(function () {
                 player.src([{
                     src: '',
                     type: 'application/vnd.ms-sstr+xml'
                 }]);
             });
     },
-
-    template: '<video id="stream-switch-amp" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>'
+    
+    template: '<div><video id="stream-switch-amp" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" /><div align="center"><ul style="margin: 10px 0 0 0; padding: 0;"><li @click="selectedVideo" :style="videoStyles"><img src="https://cdn.jsdelivr.net/gh/oliverspryn/stream-switch@latest/assets/video.png" width="40"><span style="display: block;">{{ azureVideoChannelName.charAt(0).toUpperCase() + azureVideoChannelName.slice(1).toLowerCase() }}</span></li><li @click="selectedAudio" :style="audioStyles"><img src="https://cdn.jsdelivr.net/gh/oliverspryn/stream-switch@latest/assets/audio.png" width="40"><span style="display: block;">{{ azureAudioChannelName.charAt(0).toUpperCase() + azureAudioChannelName.slice(1).toLowerCase() }}</span></li></ul></div></div>'
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Audio Icon (https://www.iconfinder.com/icons/172501/medium_volume_icon) made by Visual Pharm (http://icons8.com/) from www.iconfinder.com is licensed by CC BY-ND 3.0
		Video Icon (https://www.iconfinder.com/icons/172629/camera_video_icon) made by Visual Pharm (http://icons8.com/) from www.iconfinder.com is licensed by CC BY-ND 3.0