Add Streaming Switch Button for Additional Options (#188)

* Add no-cookies switch button * Rename the variable and update YouTube URL methods * Add independent configuration options for YouTube embed settings * Refactored getYoutubeUrl method to use URLSearchParams
fossasia · Aug 4, 2024 · 298e557 · 298e557
1 parent d4616cc
commit 298e557
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 10 deletions.
diff --git a/webapp/src/components/MediaSource.vue b/webapp/src/components/MediaSource.vue
@@ -114,7 +114,10 @@ export default {
 						break
 					}
 					case 'livestream.youtube': {
-						iframeUrl = this.getYoutubeUrl(this.module.config.ytid, this.autoplay, mute)
+						iframeUrl = this.getYoutubeUrl(this.module.config.ytid, this.autoplay, mute, this.module.config.hideControls,
+							this.module.config.noRelated, this.module.config.autoStart, this.module.config.showinfo, this.module.config.disableKb,
+							this.module.config.loop, this.module.config.modestBranding, this.module.config.enablePrivacyEnhancedMode
+						)
 						break
 					}
 				}
@@ -168,19 +171,41 @@ export default {
 			// Set the language iframe URL when language changes
 			this.languageIframeUrl = this.getLanguageIframeUrl(languageUrl)
 		},
-		getYoutubeUrl (ytid, autoplay, mute) {
-			// Construct the autoplay parameter based on the input
-			const autoplayParam = autoplay ? 'autoplay=1&' : ''
-			// Construct the mute parameter based on the input
-			const muteParam = mute ? 'mute=1' : 'mute=0'
-			// Return the complete YouTube URL with the provided video ID, autoplay, and mute parameters
-			return `https://www.youtube-nocookie.com/embed/${ytid}?${autoplayParam}?enablejsapi=1&modestbranding=1&loop=1&controls=0&disablekb=1&rel=0&showinfo=0&playlist=${ytid}&${muteParam}`
+		getYoutubeUrl(ytid, autoplay, mute, hideControls, noRelated, autoStart, showinfo, disableKb, loop, modestBranding, enablePrivacyEnhancedMode) {
+			const params = new URLSearchParams({
+				autoplay: autoplay ? '1' : '0',
+				mute: mute ? '1' : '0',
+				controls: hideControls ? '0' : '1',
+				rel: noRelated ? '0' : '1',
+				start: autoStart ? '1' : '0',
+				showinfo: showinfo ? '0' : '1',
+				disablekb: disableKb ? '1' : '0',
+				loop: loop ? '1' : '0',
+				modestbranding: modestBranding ? '1' : '0',
+				playlist: ytid,
+			});
+
+			const domain = enablePrivacyEnhancedMode ? 'www.youtube-nocookie.com' : 'www.youtube.com';
+			return `https://${domain}/embed/${ytid}?${params}`;
 		},
 		// Added method to get the language iframe URL
-		getLanguageIframeUrl (languageUrl) {
+		getLanguageIframeUrl(languageUrl, enablePrivacyEnhancedMode) {
 			// Checks if the languageUrl is not provided the retun null
 			if (!languageUrl) return null;
-			return `https://www.youtube-nocookie.com/embed/${languageUrl}?enablejsapi=1&autoplay=1&modestbranding=1&loop=1&controls=0&disablekb=1&rel=0&showinfo=0&playlist=${languageUrl}`
+			const params = new URLSearchParams({
+				enablejsapi: '1',
+				autoplay: '1',
+				modestbranding: '1',
+				loop: '1',
+				controls: '0',
+				disablekb: '1',
+				rel: '0',
+				showinfo: '0',
+				playlist: languageUrl,
+			});
+
+			const domain = enablePrivacyEnhancedMode ? 'www.youtube-nocookie.com' : 'www.youtube.com';
+			return `https://${domain}/embed/${languageUrl}?${params}`;
 		}
 	}
 }

diff --git a/webapp/src/views/admin/rooms/types-edit/stage.vue b/webapp/src/views/admin/rooms/types-edit/stage.vue
@@ -22,6 +22,16 @@
 			bunt-input(name="youtube_id" v-model="entry.youtube_id" label="YouTube Video ID")
 			bunt-icon-button(@click="deleteLanguageUrl(index)") delete-outline
 		bunt-button(@click="addLanguageUrl") + Add Language and Youtube ID
+		// Switch button for no-cookies domain
+		.bunt-switch-container
+			bunt-switch(name="enablePrivacyEnhancedMode", v-model="enablePrivacyEnhancedMode", label="Enable No-Cookies")
+			bunt-switch(name="loop", v-model="loop", label="Loop")
+			bunt-switch(name="autoStart", v-model="autoStart", label=" Enable Autostart")
+			bunt-switch(name="modestBranding", v-model="modestBranding", label=" Enable Modest Branding")
+			bunt-switch(name="hideControls", v-model="hideControls", label="Enable Hide Controls")
+			bunt-switch(name="noRelated", v-model="noRelated", label=" Enable No Related info")
+			bunt-switch(name="disableKb", v-model="disableKb", label="Enable Keyboard Controls")
+			bunt-switch(name="showInfo", v-model="showInfo", label="Enable No Show Info")
 	bunt-input(v-else-if="modules['livestream.iframe']", name="iframe-player", v-model="modules['livestream.iframe'].config.url", label="Iframe player url", hint="iframe player should be autoplaying and support resizing to small sizes for background playing")
 	sidebar-addons(v-bind="$props")
 </template>
@@ -74,7 +84,104 @@ export default {
 				this.b_streamSource = value
 				STREAM_SOURCE_OPTIONS.map(option => option.module).forEach(module => this.removeModule(module))
 				this.addModule(STREAM_SOURCE_OPTIONS.find(option => option.id === value).module)
+			}
+		},
+		enablePrivacyEnhancedMode: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.enablePrivacyEnhancedMode
 			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'enablePrivacyEnhancedMode', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'enablePrivacyEnhancedMode')
+				}
+			}
+		},
+		loop: {
+			get () {
+
+				return !!this.modules['livestream.youtube'].config.loop
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'loop', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'loop')
+				}
+			}
+		},
+		autoStart: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.autoStart
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'autoStart', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'autoStart')
+				}
+			}
+		},
+		modestBranding: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.modestBranding
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'modestBranding', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'modestBranding')
+				}
+			}
+		},
+		hideControls: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.hideControls
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'hideControls', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'hideControls')
+				}
+			}
+		},
+		noRelated: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.noRelated
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'noRelated', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'noRelated')
+				}
+			}
+		},
+		disableKb: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.disableKb
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'disableKb', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'disableKb')
+				}
+			}
+		},
+		showInfo: {
+			get () {
+				return !!this.modules['livestream.youtube'].config.showInfo
+			},
+			set (value) {
+				if (value) {
+					this.$set(this.modules['livestream.youtube'].config, 'showInfo', true)
+				} else {
+					this.$delete(this.modules['livestream.youtube'].config, 'showInfo')
+				}
+			}
 		}
 	},
 	created () {
@@ -119,4 +226,6 @@ export default {
 }
 </script>
 <style lang="stylus">
+.bunt-switch-container
+	margin-top: 16px
 </style>