diff --git a/webapp/src/components/MediaSource.vue b/webapp/src/components/MediaSource.vue index 4bdfd5e9..4e78bfe6 100644 --- 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 index 8d6fc8f5..cfc4d548 100644 --- 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") @@ -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 { }