Skip to content

Commit fb98fd2

Browse files
minhho89MinhHo
minhho89
and
MinhHo
authored
fix #8959 integrate translation channels (#8999)
* Add Paragraph field, text area * Add mockup iframes for video translation * Add mockup main stream video and translation video * draft - adding language combobox * [draft DO NOT MERGE] Integrate video-stream side with backend. * [draft DO NOT MERGE] Fix loader.ts to integrate with 'appliaction/vnd.api+json' * [draft DO NOT MERGE] Remake combobox to choose langagues, remake the StreamYard iframe next to the combobox * Remake combobox to choose langagues, remake the iframe next to the combobox * Resolve confilct * Re-style the combobox * Delete some mocking codes * Fix Lint and combobox * update * update * resolve conflicts * fix dropdown * remove unsued code * fix codacy standard * fix codacy standard --------- Co-authored-by: MinhHo <[email protected]>
1 parent 8549b45 commit fb98fd2

File tree

15 files changed

+523
-71
lines changed

15 files changed

+523
-71
lines changed

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

Lines changed: 74 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
{{#if (eq this.data.stream.videoChannel.provider 'bbb')}}
3939
<div class="field">
4040
<label class="required">{{t 'Video Source'}}</label>
41-
<input value='Auto-Generated Big Blue Button Video Room' readonly>
41+
<input value='Auto-Generated Big Blue Button Video Room' readonly>
4242
</div>
4343
{{/if}}
4444
{{#if (not-eq this.data.stream.videoChannel.provider 'bbb')}}
@@ -76,7 +76,7 @@
7676
@tagName="i"
7777
@class="info circle icon"
7878
@content={{t 'The room password field can be used to communicate a password which is necessary to access online video rooms for example for external video services such as Zoom, Teams and Webex. The need for a password entry depends on the configuration of your video channel. The integrated Big Blue Button video solution in {{appName}} does not need a password as only ticket holders are able to access it. The difference between the password and PIN is that the password option is used for online access while PINs are used to access video rooms through the telephone.' appName=this.settings.appName }} />
79-
</label>
79+
</label>
8080
<Input
8181
@value={{this.data.stream.password}} />
8282
</div>
@@ -85,9 +85,9 @@
8585
<label>
8686
{{t 'Additional Information'}}
8787
<UiPopup
88-
@tagName="i"
89-
@class="info circle icon"
90-
@content={{t 'Additional Information fields can be used to share information such as phone access, PINs and other video room specific information.'}} />
88+
@tagName="i"
89+
@class="info circle icon"
90+
@content={{t 'Additional Information fields can be used to share information such as phone access, PINs and other video room specific information.'}} />
9191
</label>
9292
<Textarea
9393
@value={{this.data.stream.additionalInformation}} />
@@ -130,7 +130,7 @@
130130
{{#if (eq this.data.stream.videoChannel.provider 'bbb')}}
131131
<div class="field">
132132
<label>
133-
{{t 'Enable Recording'}}
133+
{{t 'Enable Recording'}}
134134
</label>
135135
<UiCheckbox
136136
class="toggle"
@@ -139,7 +139,7 @@
139139
</div>
140140
<div class="field">
141141
<label>
142-
{{t 'Auto Start Recording'}}
142+
{{t 'Auto Start Recording'}}
143143
</label>
144144
<UiCheckbox
145145
class="toggle"
@@ -148,7 +148,7 @@
148148
</div>
149149
<div class="field">
150150
<label>
151-
{{t 'Mute On Start'}}
151+
{{t 'Mute On Start'}}
152152
</label>
153153
<UiCheckbox
154154
class="toggle"
@@ -160,7 +160,7 @@
160160
{{#if (eq this.data.stream.videoChannel.provider 'jitsi')}}
161161
<div class="field">
162162
<label>
163-
{{t 'Mute On Start'}}
163+
{{t 'Mute On Start'}}
164164
</label>
165165
<UiCheckbox
166166
class="toggle"
@@ -169,7 +169,7 @@
169169
</div>
170170
<div class="field">
171171
<label>
172-
{{t 'Hide Cam On Start'}}
172+
{{t 'Hide Cam On Start'}}
173173
</label>
174174
<UiCheckbox
175175
class="toggle"
@@ -181,20 +181,20 @@
181181
{{#if (and showUpdateOptions (and this.data.stream.id this.actualBBBExtra))}}
182182
<div class="ui divider"></div>
183183
<div class="grouped fields">
184-
<label for="bbb_update">{{t 'You have changed your video room\'s configurations. Do you want to update these configurations now?'}}</label>
185-
<div class="field">
186-
<div class="ui radio checkbox">
187-
<Widgets::Forms::RadioButton @name="bbb_update_now" @id="update_now" @value={{true}} @checked={{this.endCurrentMeeting}} />
188-
<label for="update_now">{{t 'Yes, update it now. End ongoing meetings.'}}</label>
189-
</div>
184+
<label for="bbb_update">{{t 'You have changed your video room\'s configurations. Do you want to update these configurations now?'}}</label>
185+
<div class="field">
186+
<div class="ui radio checkbox">
187+
<Widgets::Forms::RadioButton @name="bbb_update_now" @id="update_now" @value={{true}} @checked={{this.endCurrentMeeting}} />
188+
<label for="update_now">{{t 'Yes, update it now. End ongoing meetings.'}}</label>
190189
</div>
191-
<div class="field">
192-
<div class="ui radio checkbox">
193-
<Widgets::Forms::RadioButton @name="bbb_update_later" @id="update_later" @value={{false}} @checked={{this.endCurrentMeeting}} />
194-
<label for="update_later">{{t 'Apply changes when a new meeting is started.'}}</label>
195-
</div>
190+
</div>
191+
<div class="field">
192+
<div class="ui radio checkbox">
193+
<Widgets::Forms::RadioButton @name="bbb_update_later" @id="update_later" @value={{false}} @checked={{this.endCurrentMeeting}} />
194+
<label for="update_later">{{t 'Apply changes when a new meeting is started.'}}</label>
196195
</div>
197196
</div>
197+
</div>
198198
{{/if}}
199199

200200
<div class="ui divider"></div>
@@ -243,8 +243,60 @@
243243
{{/if}}
244244
{{/if}}
245245

246+
{{#each this.translationChannels as |channel index|}}
247+
<div class="field">
248+
<label>Translation Channel {{add index 1}}</label>
249+
<div class="ui action input">
250+
251+
<label>{{t 'Channel Name'}}</label>
252+
253+
<Input type="text" placeholder="Enter channel name" @value={{channel.name}} />
254+
<button class="ui icon button" {{on "click" (fn this.removeChannel index channel.id )}}>
255+
<i class="delete icon"></i>
256+
</button>
257+
<button class="ui primary button" {{on "click" (fn this.updateChannel index channel.id )}} >
258+
Update
259+
</button>
260+
</div>
261+
</div>
262+
263+
<div class="field">
264+
<label>{{t 'Channel URL'}}</label>
265+
<Input type="text" placeholder="Enter channel URL" @value={{channel.url}} />
266+
</div>
267+
{{/each}}
268+
269+
{{#each this.translationChannelsNew as |channel index|}}
270+
<div class="field">
271+
<label>New translation Channel {{add index 1}}</label>
272+
<div class="ui action input">
273+
274+
<label>{{t 'Channel Name'}}</label>
275+
276+
<Input type="text" placeholder="Enter channel name" @value={{channel.name}} />
277+
<button class="ui icon button" {{on "click" (fn this.removeChannel index channel.id )}}>
278+
<i class="delete icon"></i>
279+
</button>
280+
<button class="ui primary button" {{on "click" (fn this.updateChannel index channel.id )}} >
281+
Update
282+
</button>
283+
</div>
284+
</div>
285+
286+
<div class="field">
287+
<label>{{t 'Channel URL'}}</label>
288+
<Input type="text" placeholder="Enter channel URL" @value={{channel.url}} />
289+
</div>
290+
{{/each}}
291+
292+
<button class="ui primary button" {{on "click" this.addChannel }} >
293+
Add
294+
</button>
295+
296+
297+
246298
<div class="ui hidden divider"></div>
247-
<button type="submit" class="ui teal submit button" name="submit">{{t 'Save'}}</button>
299+
<button type="submit" {{on "submit" (fn this.submit )}} class="ui teal submit button" name="submit">{{t 'Save'}}</button>
248300
<LinkTo @route="events.view.videoroom.index" class="ui red button">
249301
{{t 'Cancel'}}
250302
</LinkTo>

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

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ const jitsi_options = {
2323
@classic
2424
export default class VideoroomForm extends Component.extend(FormMixin) {
2525
@service confirm;
26+
@service ajax;
27+
@service cookies;
2628

2729
@tracked integrationLoading = false;
2830
@tracked loading = false;
@@ -34,6 +36,29 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
3436
@tracked previousVideo = '';
3537
@tracked showUpdateOptions = false;
3638
@tracked endCurrentMeeting = false;
39+
@tracked translationChannels = [];
40+
@tracked translationChannelsNew = [];
41+
42+
43+
init() {
44+
super.init(...arguments);
45+
this.ajax.set('host', ' http://45.77.243.185:8080');
46+
this.setAuthorizationHeader();
47+
}
48+
49+
setAuthorizationHeader() {
50+
const cookieContent = this.cookies.read('ember_simple_auth-session'); // replace 'cookie-name' with the name of your cookie
51+
const parsedContent = JSON.parse(decodeURIComponent(cookieContent));
52+
const accessToken = parsedContent.authenticated.access_token;
53+
54+
const currentHeaders = this.ajax.get('headers') || {};
55+
const updatedHeaders = {
56+
...currentHeaders,
57+
Authorization: `JWT ${accessToken}`
58+
};
59+
60+
this.ajax.set('headers', updatedHeaders);
61+
}
3762

3863
get recordingColumns() {
3964
return [
@@ -74,11 +99,102 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
7499
];
75100
}
76101

102+
103+
async loadTranslationChannels() {
104+
const videoStreamId = this.data.stream.get('id'); // Get the current video stream id from the route
105+
const responseData = await this.ajax.request(`/v1/video-streams/${videoStreamId}/translation_channels`, {
106+
method : 'GET',
107+
contentType : 'application/vnd.api+json'
108+
});
109+
// this.translationChannels = responseData.data.map(channel => channel.attributes);
110+
this.translationChannels = responseData.data.map(channel => ({
111+
id: channel.id,
112+
...channel.attributes
113+
}));
114+
}
115+
116+
117+
@action
118+
addChannel() {
119+
event.preventDefault();
120+
this.translationChannelsNew = [...this.translationChannelsNew, { id: '', name: '', url: '' }];
121+
}
122+
123+
@action
124+
async updateChannel(index, id) {
125+
event.preventDefault();
126+
const channel = this.translationChannels[index];
127+
await this.ajax.request(`/v1/translation_channels/${id}`, {
128+
// headers: {
129+
// 'Content-Type': 'text/plain'
130+
// },
131+
method : 'PATCH',
132+
contentType : 'application/vnd.api+json',
133+
data : JSON.stringify({
134+
data: {
135+
type : 'translation_channel',
136+
id : `${channel.id}`,
137+
attributes : {
138+
name : channel.name,
139+
url : channel.url
140+
},
141+
relationships: {
142+
video_stream: {
143+
data: {
144+
type : 'video_stream',
145+
id : this.data.stream.get('id')
146+
}
147+
},
148+
channel: {
149+
data: {
150+
type : 'video_channel',
151+
id : '2'// id : this.data.stream.videoChannel.get('id')
152+
}
153+
}
154+
}
155+
}
156+
})
157+
});
158+
159+
160+
}
161+
162+
@action
163+
async removeChannel(index, id) {
164+
event.preventDefault();
165+
166+
this.translationChannels = this.translationChannels.filter((_, i) => i !== index);
167+
168+
await this.ajax.request(`/v1/translation_channels/${id}`, {
169+
method : 'DELETE',
170+
contentType : 'application/vnd.api+json'
171+
});
172+
173+
174+
}
175+
176+
177+
@action
178+
updateChannelName(index, event) {
179+
const newChannels = [...this.translationChannels];
180+
newChannels[index].name = event.target.value;
181+
this.translationChannels = newChannels;
182+
}
183+
184+
@action
185+
updateChannelUrl(index, event) {
186+
const newChannels = [...this.translationChannels];
187+
newChannels[index].url = event.target.value;
188+
this.translationChannels = newChannels;
189+
}
190+
191+
77192
@computed('data.stream.rooms.[]')
78193
get room() {
79194
return this.data.stream.rooms.toArray()[0];
80195
}
81196

197+
82198
@action
83199
setRoom(room) {
84200
this.data.stream.rooms = [room];
@@ -330,13 +446,55 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
330446
event.preventDefault();
331447
this.onValid(async() => {
332448
try {
449+
this.setAuthorizationHeader();
333450
this.set('isLoading', true);
451+
// Iterate over the translationChannels array and send a POST request for each channel
452+
if (this.translationChannelsNew !== []) {
453+
for (const channel of this.translationChannelsNew) {
454+
this.loader.post('/translation_channels', {
455+
data: {
456+
type : 'translation_channel',
457+
attributes : {
458+
name : channel.name,
459+
url : channel.url
460+
},
461+
relationships: {
462+
video_stream: {
463+
data: {
464+
type : 'video_stream',
465+
id : this.data.stream.get('id') // Replace this with the appropriate video_stream ID
466+
}
467+
},
468+
channel: {
469+
data: {
470+
type : 'video_channel',
471+
id : '1'
472+
// id : this.data.stream.videoChannel.get('id') // Replace this with the appropriate video_channel ID
473+
}
474+
}
475+
}
476+
}
477+
}, 'application/vnd.api+json');
478+
}
479+
480+
}
481+
482+
// if (response.status) {
483+
// this.notify.success(this.l10n.t('Your stream has been saved'), {
484+
// id: 'stream_save'
485+
// });
486+
// this.router.transitionTo('events.view.videoroom', this.data.event.id);
487+
// }
488+
334489
if (this.data.stream.extra?.bbb_options) {
335490
this.data.stream.extra.bbb_options.endCurrentMeeting = this
336491
.showUpdateOptions
337492
? this.endCurrentMeeting
338493
: false;
339494
}
495+
496+
this.data.stream.translationChannels = this.translationChannels;
497+
340498
await this.data.stream.save();
341499
const saveModerators = this.data.stream.moderators
342500
.toArray()
@@ -425,6 +583,7 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
425583
}
426584

427585
didInsertElement() {
586+
this.loadTranslationChannels();
428587
if (this.data.stream.videoChannel.get('provider') === 'bbb') {
429588
if (this.data.stream.extra?.bbb_options) {
430589
this.set('actualBBBExtra', { ...this.data.stream.extra.bbb_options });
@@ -452,4 +611,6 @@ export default class VideoroomForm extends Component.extend(FormMixin) {
452611
}
453612
this.selectedVideo = this.previousVideo = this.data.stream.videoChannel;
454613
}
614+
615+
455616
}

‎app/components/forms/wizard/badge-forms/badge-setting.js

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,9 @@ export default Component.extend(FormMixin, EventWizardMixin, {
2424
}),
2525
actions: {
2626
onChangeBadgeColor() {
27-
if (this.data.badgeColor != null)
28-
{
29-
this.set('data.badgeImageURL', null);
30-
this.set('data.selectedImage', null);
31-
this.set('data.imageUrl', null);
32-
}
27+
this.set('data.badgeImageURL', null);
28+
this.set('data.selectedImage', null);
29+
this.set('data.imageUrl', null);
3330
}
3431
}
3532
});

0 commit comments

Comments
 (0)