88 lines
2.6 KiB
JavaScript
88 lines
2.6 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');
|
|
if ( is_video ) {
|
|
a.innerText = 'Id: ' + object.id + "\n"
|
|
+ 'Format: ' + object.mimeType + "\n"
|
|
+ 'QualityLabel: ' + object.qualityLabel + "p\n"
|
|
+ 'Bitrate: ' + object.bitrate + "\n"
|
|
+ (
|
|
( object.audioSampleRate !== undefined ) ?
|
|
'AudioSampleRate: ' + object.audioSampleRate + ".\n" :
|
|
"No audio."
|
|
);
|
|
} else {
|
|
a.innerText = 'Id: ' + object.id + "\n"
|
|
+ 'Format: ' + object.mimeType + "\n"
|
|
+ 'AudioSampleRate: ' + object.audioSampleRate + "\n"
|
|
+ 'Bitrate: ' + object.bitrate + ".\n";
|
|
}
|
|
a.addEventListener( 'click', (event) => {
|
|
callback(object.id);
|
|
});
|
|
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 };
|