From 2da6d4802b1b12a9732b0ec7cecf5c194edfd84f Mon Sep 17 00:00:00 2001 From: Oliver Spryn <2717340+oliverspryn@users.noreply.github.com> Date: Sun, 6 Jan 2019 20:45:51 -0500 Subject: [PATCH] Fixes #5 Switch Between Audio and Video Streams --- assets/audio.png | Bin 0 -> 968 bytes assets/credits.txt | 2 ++ assets/video.png | Bin 0 -> 667 bytes index.html | 1 + stream-switch.js | 75 ++++++++++++++++++++++++++++++++++++++++----- 5 files changed, 71 insertions(+), 7 deletions(-) create mode 100644 assets/audio.png create mode 100644 assets/credits.txt create mode 100644 assets/video.png diff --git a/assets/audio.png b/assets/audio.png new file mode 100644 index 0000000000000000000000000000000000000000..f6021a091fa4e5cdaa23bd5b589b4377cb60ab8a GIT binary patch literal 968 zcmV;(12_DMP)f zM|`0Y<0GzJxKRzs02sv(d!Is2CKD zZ;2)%XwoiDUAyhRw{La#WNst*;c~n0sXF!l)wfQaI?Yl1e{n2MXqv=0XyaiVLT`utFXoU$<|X1jxraT<(cX9diGsIys}V5zQ9xq zn8%xf$)8fuZYl-L<1O{%nL+{ccv}$LV>o&016oJlqZJMpYI@H~L04T?B`$Hn^FTIaBsjWTRW_D9C!`mg`8 zHLyYK;vMCo^ZaCcKWBg@1i;xMbpB>=O|-C2EaHS-RSudIa3Nk5b)s}JS7TY{kSgOpRaSc(y7E9 z>DhjfR+LTRf`~wW;q+n7XYfsGbX)q|iy|Am3ipYPWl}tf5AdGB*QUTdB6L1c!f624 z%1fs|k(u81VbpYbQRH4f%Q&*mh@EhsNSexuu*HF9Bi_a3mgko!!=)n8YvD$bkuD3` zcumaar=sqei`*mS%_7=#aQhe>Yta^AZ&VREhx(#Gb_m-h;8=@Z5liw!)Cnk#v|r+~ zNeSklty>0JQWNIX3z!k-;L4QwNT7|E<%yWO(qe&L5ud3RF|`7Sx@ND4GfLV_wE#lI zOR7aoy#W3z;&WXQ#a~QEYU5j0%;H5|5oh6?^nF)@yhg$-UeL`pi>lw9O_CZF$KZY; qpd$)dvyCzu6RWMzzb;47B>n+7G6KmOf(LH^0000B2hY3RsWhXoq5y`D4_iHAdWj^{!aS zDs*B^Wo8<4J}GUujN5|vUThI&%utpMn1}OtgiXSku}?6lOZ3%>X{oEhR2;;9VSD|A z6F7+v)rGTWz)JLBItFnXhw-Xbr84?QU0Q8A{eC)kp|wt(5(cyK1r}61ci?`b6|=U8 zZ%H7Y>=}@l+<>&n4M>};8L(P7%o-*u2E3?v?#3m-Kd(zx4Csr}Yr+Y;8IN&Ra65-3 zD+a{e#bO*1{PNwx-RLN$3|A=&ccDFzjw2O$bA-#>_vpVjI3V(aMRy^xYd}mZF8X!R z>l6Ip0e^`BF&((BDy|f-fwb2`+<&=7nR{4^b$C!&@g-(RH>|QGN}ty$R~B}v4s69! zLWrV_3qrhQtZB!4!F8OOux?8nTI?1gWKV=(>$j0qI1B~M#|B|%*(D5OQ_R8@=>&I6 z*w(D@>OfK}R-mQX1{2aRcwt}0sK1
diff --git a/stream-switch.js b/stream-switch.js index 7f8cfc9..46f3251 100644 --- 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: '' + + template: '
' });