121 lines
3.7 KiB
JavaScript
121 lines
3.7 KiB
JavaScript
"use strict";
|
|
|
|
class FormatSelector {
|
|
constructor() {
|
|
this.query_selector = '#modal-format-selector';
|
|
this.addEventListeners();
|
|
}
|
|
|
|
appendFormat(container, object, is_video, callback) {
|
|
let a = document.createElement('a');
|
|
let br = function() { return document.createElement('br') };
|
|
let inner_text = [];
|
|
let muted_video = false;
|
|
if ( is_video ) {
|
|
if ( object.audioSampleRate === undefined ) {
|
|
muted_video = true;
|
|
}
|
|
inner_text.push('Id: ' + object.id);
|
|
inner_text.push(br());
|
|
inner_text.push('Format: ' + object.mimeType);
|
|
inner_text.push(br());
|
|
inner_text.push('QualityLabel: ' + object.qualityLabel + "p");
|
|
inner_text.push(br());
|
|
inner_text.push('Bitrate: ' + object.bitrate);
|
|
inner_text.push(br());
|
|
inner_text.push( ( muted_video) ?
|
|
"No audio. " :
|
|
'AudioSampleRate: ' + object.audioSampleRate
|
|
);
|
|
} else {
|
|
inner_text.push('Id: ' + object.id + "\n");
|
|
inner_text.push(br());
|
|
inner_text.push('Format: ' + object.mimeType);
|
|
inner_text.push(br());
|
|
inner_text.push('AudioSampleRate: ' + object.audioSampleRate);
|
|
inner_text.push(br());
|
|
inner_text.push('Bitrate: ' + object.bitrate);
|
|
}
|
|
|
|
a.addEventListener( 'click', (event) => {
|
|
callback(object.id);
|
|
});
|
|
if (muted_video) {
|
|
let img_muted_video = document.createElement('img');
|
|
img_muted_video.classList.add('mute_img');
|
|
img_muted_video.classList.add('scale');
|
|
img_muted_video.src = 'img/audio_muted.svg';
|
|
inner_text.push(img_muted_video);
|
|
}
|
|
|
|
for (let text of inner_text) {
|
|
if (typeof text === "string"
|
|
|| text instanceof String) {
|
|
text = document.createTextNode(text);
|
|
a.appendChild(text);
|
|
} else if ( text instanceof Node) {
|
|
a.appendChild(text);
|
|
} else {
|
|
throw ('Text is not a instance of Node nor a String');
|
|
}
|
|
}
|
|
|
|
container.appendChild(a);
|
|
}
|
|
|
|
prepareFormatSelector(title, description, audio_formats, video_formats, callback) {
|
|
this.titleFormatSelector.innerText = title;
|
|
this.descriptionFormatSelector.innerText = description;
|
|
this.videoFormats.innerHTML = '';
|
|
this.audioFormats.innerHTML = '';
|
|
for ( let x of audio_formats) {
|
|
this.appendFormat(this.audioFormats, x, false, callback);
|
|
}
|
|
for ( let x of video_formats ) {
|
|
this.appendFormat(this.videoFormats, x, true, callback);
|
|
}
|
|
}
|
|
|
|
setVisible(option) {
|
|
if (option) {
|
|
this.element.classList.add('active');
|
|
} else {
|
|
this.element.classList.remove('active');
|
|
}
|
|
}
|
|
|
|
addEventListeners() {
|
|
this.closeFormatSelector.addEventListener('click', (event) => { this.setVisible(false); });
|
|
}
|
|
|
|
get videoFormats() {
|
|
return this.element.querySelector('.video-formats');
|
|
}
|
|
|
|
get audioFormats() {
|
|
return this.element.querySelector('.audio-formats');
|
|
}
|
|
|
|
get titleFormatSelector() {
|
|
return this.element.querySelector('h2');
|
|
}
|
|
|
|
get descriptionFormatSelector() {
|
|
return this.element.querySelector('p');
|
|
}
|
|
|
|
get closeFormatSelector() {
|
|
return this.element.querySelector('#close-modal-format-selector');
|
|
}
|
|
|
|
get element() {
|
|
return document.querySelector(this.querySelector);
|
|
}
|
|
|
|
get querySelector() {
|
|
return this.query_selector;
|
|
}
|
|
}
|
|
|
|
export { FormatSelector };
|