Implement audio translation system

webapp/package.json

@@ -27,6 +27,7 @@
     "emoji-regex": "^9.0.0",
     "hls.js": "^1.0.8",
     "i18next": "^21.0.1",
+    "iso-639-1": "^2.1.15",
     "janus-gateway": "git+https://[email protected]/meetecho/janus-gateway.git#7b010cd265991132158541ea80afcaa14bf4eb42",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.20",

webapp/src/components/AudioTranslationDropdown.vue

@@ -0,0 +1,58 @@
+<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"
+)
+</template>
+<script>
+export default {
+  name: 'AudioTranslationDropdown',
+	props: {
+		languages: {
+			type: Array,
+			required: true
+		}
+	},
+	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);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.c-audio-translation {
+    margin-bottom: 3em;
+}
+
+.c-audio-translation h4 {
+    margin-bottom: 0.5em;
+}
+
+.bunt-select {
+    width: 100%;
+}
+</style>

webapp/src/components/MediaSource.vue

@@ -38,7 +38,7 @@ export default {
 		}
 	},
 	computed: {
-		...mapState(['streamingRoom']),
+		...mapState(['streamingRoom', 'youtubeTransUrl']),
 		...mapGetters(['autoplay']),
 		module () {
 			if (!this.room) {
@@ -65,6 +65,14 @@ export default {
 				this.destroyIframe()
 				this.initializeIframe()
 			}
+		},
+		youtubeTransUrl(youtubeTransUrl) {
+			if (!this.room) {
+				return
+			}
+			this.destroyIframe()
+			this.module.config.ytid = youtubeTransUrl
+			this.initializeIframe()
 		}
 	},
 	async mounted () {

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

@@ -14,6 +14,14 @@
 			bunt-icon-button(@click="deleteAlternativeStream(i)") delete-outline
 		bunt-button(@click="$set(modules['livestream.native'].config, 'alternatives', modules['livestream.native'].config.alternatives || []); modules['livestream.native'].config.alternatives.push({label: '', hls_url: ''})") Add alternative stream
 	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
+		.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-icon-button(@click="deleteLanguageUrl(index)") delete-outline
+		bunt-button(@click="addLanguageUrl") + Add Language and URL
 	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>
@@ -23,6 +31,7 @@ import UploadUrlInput from 'components/UploadUrlInput'
 import mixin from './mixin'
 import SidebarAddons from './SidebarAddons'
 import {youtubeid} from 'lib/validators'
+import ISO6391 from 'iso-639-1';
 
 const STREAM_SOURCE_OPTIONS = [
 	{ id: 'hls', label: 'HLS', module: 'livestream.native' },
@@ -39,7 +48,10 @@ export default {
 	data () {
 		return {
 			STREAM_SOURCE_OPTIONS,
+			ISO_LANGUAGE_OPTIONS: this.getLanguageOptions(),
 			b_streamSource: null,
+			// Initial empty array for languages and URLs
+			b_languageUrls: []
 		}
 	},
 	validations: {
@@ -70,16 +82,38 @@ export default {
 			this.b_streamSource = 'hls'
 		} else if (this.modules['livestream.youtube']) {
 			this.b_streamSource = 'youtube'
+			// languageUrls is set in the created lifecycle hook
+			if (!this.modules['livestream.youtube'].config.languageUrls) {
+				this.$set(this.modules['livestream.youtube'].config, 'languageUrls', [])
+			}
 		} else if (this.modules['livestream.iframe']) {
 			this.b_streamSource = 'iframe'
 		}
 	},
 	methods: {
+		// Added methods addLanguageUrl and deleteLanguageUrl to manage dynamic fields for language and URL input
+		addLanguageUrl () {
+			if (!this.modules['livestream.youtube'].config.languageUrls) {
+        		this.$set(this.modules['livestream.youtube'].config, 'languageUrls', [])
+      		}
+      		this.modules['livestream.youtube'].config.languageUrls.push({ language: '', url: '' })
+		},
+		deleteLanguageUrl (index) {
+			if (this.modules['livestream.youtube'].config.languageUrls) {
+				this.modules['livestream.youtube'].config.languageUrls.splice(index, 1)
+			}
+		},
 		deleteAlternativeStream (index) {
 			this.modules['livestream.native'].config.alternatives.splice(index, 1)
 			if (this.modules['livestream.native'].config.alternatives.length === 0) {
 				this.modules['livestream.native'].config.alternatives = undefined
 			}
+		},
+		getLanguageOptions() {
+			return ISO6391.getAllCodes().map(code => ({
+				id: ISO6391.getName(code),
+				label: ISO6391.getName(code),
+			}));
 		}
 	}
 }

webapp/src/views/rooms/item.vue

@@ -7,6 +7,8 @@
 		.stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
 			reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
 			//- reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
+			// Added dropdown menu for audio translations near the reactions bar
+			AudioTranslationDropdown(:languages="languages", @languageChanged="handleLanguageChange")
 	media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']")
 	roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")
 	landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']")
@@ -44,10 +46,12 @@ import Polls from 'components/Polls'
 import PosterHall from 'components/PosterHall'
 import Questions from 'components/Questions'
 import MediaSourcePlaceholder from 'components/MediaSourcePlaceholder'
+import AudioTranslationDropdown from 'components/AudioTranslationDropdown';
 
 export default {
 	name: 'Room',
-	components: { Chat, Exhibition, LandingPage, MarkdownPage, StaticPage, IframePage, ReactionsBar, ReactionsOverlay, UserListPage, Roulette, Polls, PosterHall, Questions, MediaSourcePlaceholder },
+	components: { Chat, Exhibition, LandingPage, MarkdownPage, StaticPage, IframePage, ReactionsBar, ReactionsOverlay, UserListPage, Roulette, Polls, PosterHall,
+		Questions, MediaSourcePlaceholder, AudioTranslationDropdown },
 	props: {
 		room: Object,
 		modules: Object
@@ -60,7 +64,8 @@ export default {
 				questions: false,
 				polls: false
 			},
-			activeStageTool: null // reaction, qa
+			activeStageTool: null, // reaction, qa
+			languages: [] // Languages for the dropdown menu
 		}
 	},
 	computed: {
@@ -73,19 +78,28 @@ export default {
 			this.unreadTabs[tab] = false
 		}
 	},
-	mounted () {
+	created () {
 		if (this.modules['chat.native']) {
 			this.activeSidebarTab = 'chat'
 		} else if (this.modules.question) {
 			this.activeSidebarTab = 'questions'
 		} 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}`})
+
+		}
 	},
 	methods: {
 		changedTabContent (tab) {
 			if (tab === this.activeSidebarTab) return
 			this.unreadTabs[tab] = true
+		},
+		handleLanguageChange(selectedLanguage) {
+			this.$store.commit('updateYoutubeTransAudio', selectedLanguage)
 		}
 	}
 }