Adding dynamic language and URL input fields

webapp/src/components/AudioTranslationDropdown.vue

@@ -1,58 +1,56 @@
 <template lang="pug">
 div.c-audio-translation
-    h4 Audio Translation
-    bunt-select(
-    name="audio-translation",
-    v-model="selectedLanguage",
-    :options="languageOptions",
-    label="Audio Translation",
-    @input="sendLanguageChange"
+		h4 Audio Translation
+		bunt-select(
+		name="audio-translation",
+		v-model="selectedLanguage",
+		:options="languageOptions",
+		label="Audio Translation",
+		@input="sendLanguageChange"
 )
 </template>
 <script>
 export default {
-  name: 'AudioTranslationDropdown',
+	name: 'AudioTranslationDropdown',
 	props: {
 		languages: {
 			type: Array,
 			required: true
 		}
 	},
-	data() {
+	data () {
 		return {
-      selectedLanguage: null, // Selected language for audio translation
-      languageOptions: [] // Options for the dropdown
-    };
-  },
-  watch: {
-    languages: {
-      immediate: true,
-      handler(newLanguages) {
-        this.languageOptions = newLanguages.map(entry => entry.language); // Directly assigning the list of languages
-      }
-    }
-  },
-  methods: {
-    sendLanguageChange() {
-      const selected = this.languages.find(item => item.language == this.selectedLanguage)
-      const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
-      const matchId = selected.url.match(regex);
-      this.$emit('languageChanged', matchId ? matchId[1] : null);
-    }
-  }
-};
+			selectedLanguage: null, // Selected language for audio translation
+			languageOptions: [] // Options for the dropdown
+		}
+	},
+	watch: {
+		languages: {
+			immediate: true,
+			handler (newLanguages) {
+				this.languageOptions = newLanguages.map(entry => entry.language) // Directly assigning the list of languages
+			}
+		}
+	},
+	methods: {
+		sendLanguageChange () {
+			const selected = this.languages.find(item => item.language === this.selectedLanguage)
+			this.$emit('languageChanged', selected.youtube_id || null)
+		}
+	}
+}
 </script>
 
 <style scoped>
 .c-audio-translation {
-    margin-bottom: 3em;
+		margin-bottom: 3em;
 }
 
 .c-audio-translation h4 {
-    margin-bottom: 0.5em;
+		margin-bottom: 0.5em;
 }
 
 .bunt-select {
-    width: 100%;
+		width: 100%;
 }
 </style>

webapp/src/components/Chat.vue

@@ -34,7 +34,7 @@
 import { mapState, mapGetters } from 'vuex'
 import { createPopper } from '@popperjs/core'
 
-import ChatContent from 'components/ChatContent'
+// import ChatContent from 'components/ChatContent'
 import Avatar from 'components/Avatar'
 import ChatInput from 'components/ChatInput'
 import ChatUserCard from 'components/ChatUserCard'
@@ -258,4 +258,4 @@ export default {
 				.user-count
 					font-weight: 600
 					color: $clr-secondary-text-light
-</style>
+</style>

webapp/src/components/ChatContent.vue

@@ -3,55 +3,55 @@
 import store from 'store'
 import { markdownEmoji } from 'lib/emoji'
 import { getUserName } from 'lib/profile'
-import VModal from 'vue-js-modal'
+// import VModal from 'vue-js-modal'
 
 const markdownIt = MarkdownIt('zero', {
-  linkify: true
+	linkify: true
 })
 markdownIt.enable('linkify')
 markdownIt.renderer.rules.link_open = (tokens, idx, options, env, self) => {
-  tokens[idx].attrPush(['target', '_blank'])
-  tokens[idx].attrPush(['rel', 'noopener noreferrer'])
-  return self.renderToken(tokens, idx, options)
+	tokens[idx].attrPush(['target', '_blank'])
+	tokens[idx].attrPush(['rel', 'noopener noreferrer'])
+	return self.renderToken(tokens, idx, options)
 }
 markdownIt.use(markdownEmoji)
 
 const mentionRegex = /(@[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12})/g
 
-export async function contentToPlainText(content) {
-  const parts = content.split(mentionRegex)
-  let plaintext = ''
-  
-  for (const string of parts) {
-    if (string.match(mentionRegex)) {
-      const userId = string.slice(1)
-      if (!store.state.chat.usersLookup[userId]) {
-        await store.dispatch('chat/fetchUsers', [userId])
-      }
-      const user = store.state.chat.usersLookup[userId]
-      if (user) {
-        plaintext += `@${getUserName(user)}`
-      }
-    } else {
-      plaintext += string
-    }
-  }
-  return plaintext
+export async function contentToPlainText (content) {
+	const parts = content.split(mentionRegex)
+	let plaintext = ''
+
+	for (const string of parts) {
+		if (string.match(mentionRegex)) {
+			const userId = string.slice(1)
+			if (!store.state.chat.usersLookup[userId]) {
+				await store.dispatch('chat/fetchUsers', [userId])
+			}
+			const user = store.state.chat.usersLookup[userId]
+			if (user) {
+				plaintext += `@${getUserName(user)}`
+			}
+		} else {
+			plaintext += string
+		}
+	}
+	return plaintext
 }
 
 const generateHTML = (input) => {
   if (!input) return
   return markdownIt.renderInline(input)
 }
 
 export default {
   functional: true,
   props: {
     content: String
   },
   data() {
     return {
       selectedUser: null
     }
   },
   methods: {
@@ -86,7 +86,7 @@
       return createElement('span', { domProps: { innerHTML: part.html } })
     })
   },
   components: {
     'user-modal': {
       template: `
         <modal name="user-modal" height="auto" @before-close="closeUserModal">
@@ -108,4 +108,4 @@
     }
   }
 }
-</script>
+</script>

webapp/src/components/MediaSource.vue

@@ -12,6 +12,7 @@
 	janus-call(v-else-if="room && module.type === 'call.janus'", ref="janus", :room="room", :module="module", :background="background", :size="background ? 'tiny' : 'normal'", :key="`janus-${room.id}`")
 	janus-channel-call(v-else-if="call", ref="janus", :call="call", :background="background", :size="background ? 'tiny' : 'normal'", :key="`call-${call.id}`", @close="$emit('close')")
 	.iframe-error(v-if="iframeError") {{ $t('MediaSource:iframe-error:text') }}
+	iframe#video-player-translation(v-if="languageIframeUrl", :src="languageIframeUrl", style="position: absolute; width: 50%; height: 100%; z-index: -1", frameborder="0", gesture="media", allow="autoplay; encrypted-media", allowfullscreen="true")
 </template>
 <script>
 // TODO functional component?
@@ -34,7 +35,10 @@ export default {
 	},
 	data () {
 		return {
-			iframeError: null
+			iframeError: null,
+			iframe: null, // Track the iframe element
+			languageAudioUrl: null, // URL for the selected language audio
+			languageIframeUrl: null // URL for the language iframe // Added languageIframeUrl to data
 		}
 	},
 	computed: {
@@ -63,7 +67,7 @@ export default {
 			handler (value, oldValue) {
 				if (isEqual(value, oldValue)) return
 				this.destroyIframe()
-				this.initializeIframe()
+				this.initializeIframe(false)
 			}
 		},
 		youtubeTransUrl(youtubeTransUrl) {
@@ -72,23 +76,25 @@ export default {
 			}
 			this.destroyIframe()
 			this.module.config.ytid = youtubeTransUrl
-			this.initializeIframe()
+			this.initializeIframe(false)
 		}
 	},
 	async mounted () {
 		if (!this.room) {
 			return
 		}
-		this.initializeIframe()
+		this.initializeIframe(false)
+		this.$root.$on('languageChanged', this.handleLanguageChange);
 	},
 	beforeDestroy () {
 		this.iframe?.remove()
 		if (api.socketState !== 'open') return
 		// TODO move to store?
 		if (this.room) api.call('room.leave', {room: this.room.id})
+		this.$root.$off('languageChanged', this.handleLanguageChange);
 	},
 	methods: {
-		async initializeIframe () {
+		async initializeIframe (mute) {
 			try {
 				let iframeUrl
 				let hideIfBackground = false
@@ -108,7 +114,7 @@ export default {
 						break
 					}
 					case 'livestream.youtube': {
-						iframeUrl = `https://www.youtube-nocookie.com/embed/${this.module.config.ytid}?${this.autoplay ? 'autoplay=1&' : ''}rel=0&showinfo=0`
+						iframeUrl = this.getYoutubeUrl(this.module.config.ytid, this.autoplay, mute)
 						break
 					}
 				}
@@ -134,6 +140,7 @@ export default {
 		},
 		destroyIframe () {
 			this.iframe?.remove()
+			this.iframe = null
 		},
 		isPlaying () {
 			if (this.call) {
@@ -152,6 +159,28 @@ export default {
 				return !!this.iframe
 			}
 			return true
+		},
+		handleLanguageChange(languageUrl) {
+			this.languageAudioUrl = languageUrl; // Set the audio source to the selected language URL
+			const mute = !!languageUrl; // Mute if language URL is present, otherwise unmute
+			this.destroyIframe();
+			this.initializeIframe(mute); // Initialize iframe with the appropriate mute state
+			// 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}rel=0&showinfo=0&${muteParam}`;
+		},
+		// Added method to get the language iframe URL
+		getLanguageIframeUrl(languageUrl) {
+			// Checks if the languageUrl is not provided the retun null
+			if (!languageUrl) return null;
+			return `https://www.youtube.com/embed/${languageUrl}?enablejsapi=1&autoplay=1&modestbranding=1&loop=1&controls=0&disablekb=1&languageUrl=${languageUrl}`;
 		}
 	}
 }

webapp/src/store/index.js

@@ -37,7 +37,8 @@ export default new Vuex.Store({
 		autoplayUserSetting: !localStorage.disableAutoplay ? null : localStorage.disableAutoplay !== 'true',
 		stageStreamCollapsed: false,
 		now: moment(),
-		unblockedIframeDomains: new Set(JSON.parse(localStorage.unblockedIframeDomains || '[]'))
+		unblockedIframeDomains: new Set(JSON.parse(localStorage.unblockedIframeDomains || '[]')),
+		youtubeTransUrl: null
 	},
 	getters: {
 		hasPermission (state) {
@@ -83,6 +84,9 @@ export default new Vuex.Store({
 		},
 		updateNow (state) {
 			state.now = moment()
+		},
+		updateYoutubeTransAudio(state, youtubeTransUrl){
+			state.youtubeTransUrl = youtubeTransUrl
 		}
 	},
 	actions: {

webapp/src/views/admin/rooms/types-edit/stage.vue

@@ -16,12 +16,12 @@
 	bunt-input(v-else-if="modules['livestream.youtube']", name="ytid", v-model="modules['livestream.youtube'].config.ytid", label="YouTube Video ID", :validation="$v.modules['livestream.youtube'].config.ytid")
 	// Language and URL input for YouTube stream
 	.language-urls(v-if="modules['livestream.youtube']")
-		h4 Languages and YouTube URLs
+		h4 Languages and YouTube ID
 		.language-url-entry(v-for="(entry, index) in modules['livestream.youtube'].config.languageUrls" :key="index")
 			bunt-select(name="language", v-model="entry.language", :options="ISO_LANGUAGE_OPTIONS", label="Language")
-			bunt-input(name="url" v-model="entry.url" label="YouTube URL")
+			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 URL
+		bunt-button(@click="addLanguageUrl") + Add Language and Youtube ID
 	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>
@@ -96,7 +96,7 @@ export default {
 			if (!this.modules['livestream.youtube'].config.languageUrls) {
         		this.$set(this.modules['livestream.youtube'].config, 'languageUrls', [])
       		}
-      		this.modules['livestream.youtube'].config.languageUrls.push({ language: '', url: '' })
+      		this.modules['livestream.youtube'].config.languageUrls.push({ language: '', youtube_id: '' })
 		},
 		deleteLanguageUrl (index) {
 			if (this.modules['livestream.youtube'].config.languageUrls) {

webapp/src/views/rooms/item.vue

@@ -76,7 +76,8 @@ export default {
 	watch: {
 		activeSidebarTab (tab) {
 			this.unreadTabs[tab] = false
-		}
+		},
+		room: 'initializeLanguages'
 	},
 	created () {
 		if (this.modules['chat.native']) {
@@ -86,20 +87,24 @@ export default {
 		} else if (this.modules.poll) {
 			this.activeSidebarTab = 'polls'
 		}
-		// Populate languages from the languages added by the admin
-		if (this.modules['livestream.youtube'] && this.modules['livestream.youtube'].config.languageUrls) {
-			this.languages = this.modules['livestream.youtube'].config.languageUrls;
-			this.languages.unshift({language: 'Default', url: `https://www.youtube.com/watch?v=${this.modules['livestream.youtube'].config.ytid}`})
-
-		}
+		this.initializeLanguages();
 	},
 	methods: {
 		changedTabContent (tab) {
 			if (tab === this.activeSidebarTab) return
 			this.unreadTabs[tab] = true
 		},
-		handleLanguageChange(selectedLanguage) {
-			this.$store.commit('updateYoutubeTransAudio', selectedLanguage)
+		handleLanguageChange(languageUrl) {
+			this.$root.$emit('languageChanged', languageUrl);
+		},
+		initializeLanguages(){
+			this.languages = [];
+			if (this.modules['livestream.youtube'] && this.modules['livestream.youtube'].config.languageUrls) {
+				this.languages = this.modules['livestream.youtube'].config.languageUrls;
+			}
+			if (!this.languages.find(lang => lang.language === 'Default')) {
+				this.languages.unshift({language: 'Default', url: ``});
+			}
 		}
 	}
 }