fix-9065: Video auto save when remove the second Source URL (#9072)

* feature-9065: Video auto save when remove the second Source URL

* feature-9065: Video auto save when remove the second Source URL

* feature-9065: Video auto save when remove the second Source URL

* feature-9065: Video auto save when remove the second Source URL

* fix-9065: Video auto save when remove the second Source URL

* fix-9065: Video auto save when remove the second Source URL

* fix-9065: Video auto save when remove the second Source URL

---------

Co-authored-by: Khang On - TMA <135116292+khangon@users.noreply.github.com>

Author: Hieu Lam - TMA

app/components/forms/events/view/videoroom-form.hbs

@@ -276,7 +276,7 @@
               <i style="margin-left: 0 !important;text-align: right;"
                 class="dropdown icon"> </i>
             </UiDropdown>
-            <button class="ml-2 ui icon red button" {{on "click" (fn this.removeChannel index channel.id )}}>
+            <button class="ml-2 ui icon red button" {{action "removeChannel" index channel.id }}>
               <i class="remove icon"></i>
             </button>
           </div>
@@ -307,7 +307,7 @@
                  class="dropdown icon"> </i>
             </UiDropdown>
             <span class="ml-2"></span>
-            <button class="ui icon red button" {{on "click" (fn this.removeChannel index channel.id )}}>
+            <button class="ui icon red button" {{action "removeChannel" index channel.id}}>
               <i class="remove icon"></i>
             </button>
           </div>
@@ -317,7 +317,7 @@
 
   {{/each}}
   <div class="field">
-    <button class="ui primary button" {{on "click" this.addChannel }}  >
+    <button class="ui primary button" {{action "addChannel"}}  >
       {{t 'Add Channel'}}
     </button>
   </div>

app/components/forms/events/view/videoroom-form.js

@@ -36,6 +36,7 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
   @tracked endCurrentMeeting = false;
   @tracked translationChannels = [];
   @tracked translationChannelsNew = [];
+  @tracked translationChannelsRemoved = [];
 
   @computed
   get currentLocale() {
@@ -99,18 +100,28 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
 
   async loadTranslationChannels() {
     const videoStreamId = this.data.stream.get('id'); // Get the current video stream id from the route
-    const responseData = await this.loader.load(`/video-streams/${videoStreamId}/translation_channels`);
-    this.translationChannels = responseData.data.map(channel => channel.attributes);
-    this.translationChannels = responseData.data.map(channel => ({
-      id: channel.id,
-      ...channel.attributes
-    }));
+    if (videoStreamId) {
+      const responseData = await this.loader.load(`/video-streams/${videoStreamId}/translation_channels`);
+      this.translationChannels = responseData.data.map(channel => channel.attributes);
+      this.translationChannels = responseData.data.map(channel => ({
+        id: channel.id,
+        ...channel.attributes
+      }));
+    }
   }
 
   @action
   async removeChannel(index, id) {
-    this.translationChannels = this.translationChannels.filter((_, i) => i !== index);
-    this.loader.delete(`/translation_channels/${id}`);
+    if (id) {
+      this.translationChannels = this.translationChannels.filter((_, i) => i !== index);
+      this.translationChannelsRemoved.push(id);
+    } else {
+      this.translationChannelsNew = this.translationChannelsNew.filter((_, i) => i !== index);
+    }
+  }
+
+  async deletedChannels() {
+    this.translationChannelsRemoved.forEach(id => this.loader.delete(`/translation_channels/${id}`));
   }
 
   @action
@@ -129,7 +140,6 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
 
   @action
   async updateChannel(index, id) {
-    event.preventDefault();
     const channel = this.translationChannels[index];
     const payload = {
       data: {
@@ -149,7 +159,7 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
           channel: {
             data: {
               type : 'video_channel',
-              id   : `${channel.id}`
+              id   : this.data.stream.videoChannel.get('id')
             }
           }
         }
@@ -331,7 +341,6 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
 
   @action
   addChannel() {
-    event.preventDefault();
     this.translationChannelsNew = [...this.translationChannelsNew, { id: '', name: '', url: '' }];
   }
 
@@ -410,7 +419,6 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
 
   @action
   addNewChannel(channel) {
-    event.preventDefault();
     const payload = {
       'data': {
         'type'       : 'translation_channel',
@@ -428,7 +436,7 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
           'channel': {
             'data': {
               'type' : 'video_channel',
-              'id'   : '1'
+              'id'   : this.data.stream.videoChannel.get('id')
             }
           }
         }
@@ -446,6 +454,13 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
     this.onValid(async() => {
       try {
         this.set('isLoading', true);
+        if (this.data.stream.extra?.bbb_options) {
+          this.data.stream.extra.bbb_options.endCurrentMeeting = this
+            .showUpdateOptions
+            ? this.endCurrentMeeting
+            : false;
+        }
+        await this.data.stream.save();
         for (const channel of this.translationChannelsNew) {
           this.addNewChannel(channel);
         }
@@ -454,13 +469,9 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
           this.updateChannel(index, channel.id);
         });
 
-        if (this.data.stream.extra?.bbb_options) {
-          this.data.stream.extra.bbb_options.endCurrentMeeting = this
-            .showUpdateOptions
-            ? this.endCurrentMeeting
-            : false;
+        if (this.translationChannelsRemoved.length > 0) {
+          this.deletedChannels();
         }
-        await this.data.stream.save();
         const saveModerators = this.data.stream.moderators
           .toArray()
           .map(moderator => {

app/components/public/stream/side-panel.ts

@@ -66,16 +66,18 @@ export default class PublicStreamSidePanel extends Component<Args> {
     'maroon', 'mediumorchid', 'mediumpurple', 'mediumspringgreen'];
 
   async fetchTranslationChannels(streamId: string): Promise<any[] | undefined> {
-    const response = await this.loader.load(`/video-streams/${streamId}/translation_channels`);
-    if (response.data !== undefined && response.data.length > 0) {
-      const newChannels = response.data.map((channel: ChannelData) => ({
-        id   : channel.id,
-        name : channel.attributes.name,
-        url  : channel.attributes.url
-      }));
-      // Append newChannels to the existing translationChannels list
-      const res = [...this.translationChannels, ...newChannels];
-      return res;
+    if (streamId) {
+      const response = await this.loader.load(`/video-streams/${streamId}/translation_channels`);
+      if (response.data !== undefined && response.data.length > 0) {
+        const newChannels = response.data.map((channel: ChannelData) => ({
+          id   : channel.id,
+          name : channel.attributes.name,
+          url  : channel.attributes.url
+        }));
+        // Append newChannels to the existing translationChannels list
+        const res = [...this.translationChannels, ...newChannels];
+        return res;
+      }
     }
     return undefined;
   }