mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-19 05:09:41 +02:00
310 lines
No EOL
9.9 KiB
JavaScript
310 lines
No EOL
9.9 KiB
JavaScript
export default class VideoTool {
|
|
static get toolbox() {
|
|
return {
|
|
icon: `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M16.25 3.75H3.75C2.36929 3.75 1.25 4.86929 1.25 6.25V13.75C1.25 15.1307 2.36929 16.25 3.75 16.25H16.25C17.6307 16.25 18.75 15.1307 18.75 13.75V6.25C18.75 4.86929 17.6307 3.75 16.25 3.75Z" stroke="currentColor" stroke-width="1.5"/><path d="M8.125 6.875L13.125 10L8.125 13.125V6.875Z" fill="currentColor"/></svg>`,
|
|
title: 'Video',
|
|
};
|
|
}
|
|
|
|
constructor({ data, api, config, block }) {
|
|
this.data = data || {};
|
|
this.api = api;
|
|
this.config = config || {};
|
|
this.block = block;
|
|
this.wrapper = null;
|
|
this.alignment = data.alignment || 'center';
|
|
this.filetype = data.filetype || 'file';
|
|
|
|
this._handleFileUpload = this._handleFileUpload.bind(this);
|
|
this._handleUrlSubmit = this._handleUrlSubmit.bind(this);
|
|
}
|
|
|
|
render() {
|
|
this.wrapper = document.createElement('div');
|
|
this.wrapper.classList.add('video-tool');
|
|
|
|
if (this.data.url) {
|
|
const filetype = this.data.filetype ||
|
|
(this.data.url.includes('youtube') ? 'youtube' :
|
|
this.data.url.includes('rutube') ? 'rutube' : 'file');
|
|
|
|
this._createVideoElement(this.data.url, this.data.caption || '', filetype);
|
|
} else {
|
|
this._createUploadForm();
|
|
}
|
|
|
|
return this.wrapper;
|
|
}
|
|
|
|
_createUploadForm() {
|
|
const currentUrl = this.wrapper?.querySelector('.embed-url')?.value || '';
|
|
this.wrapper.innerHTML = `
|
|
<div class="video-upload-tabs">
|
|
<div class="tabs-header">
|
|
<button class="tab-button active" data-tab="upload">Upload</button>
|
|
<button class="tab-button" data-tab="embed">Embed URL</button>
|
|
</div>
|
|
<div class="tab-content active" data-tab="upload">
|
|
<label class="video-upload-button">
|
|
<input type="file" accept="video/mp4,video/webm,video/ogg" class="video-file-input">
|
|
<span>Select Video File</span>
|
|
</label>
|
|
</div>
|
|
<div class="tab-content" data-tab="embed">
|
|
<div class="embed-form">
|
|
<select class="embed-service">
|
|
<option value="youtube">YouTube</option>
|
|
<option value="rutube">Rutube</option>
|
|
</select>
|
|
<input type="text" class="embed-url" placeholder="Paste video URL...">
|
|
<button class="embed-submit">Добавить</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
this._bindFormHandlers();
|
|
if (currentUrl) {
|
|
const urlInput = this.wrapper.querySelector('.embed-url');
|
|
if (urlInput) urlInput.value = currentUrl;
|
|
}
|
|
}
|
|
|
|
_bindFormHandlers() {
|
|
this.wrapper.querySelectorAll('.tab-button').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
this.wrapper.querySelectorAll('.tab-button, .tab-content').forEach(el => {
|
|
el.classList.toggle('active', el.dataset.tab === btn.dataset.tab);
|
|
});
|
|
|
|
this._bindFormHandlers();
|
|
});
|
|
});
|
|
|
|
const fileInput = this.wrapper.querySelector('.video-file-input');
|
|
if (fileInput) {
|
|
fileInput.addEventListener('change', this._handleFileUpload);
|
|
}
|
|
|
|
const embedSubmit = this.wrapper.querySelector('.embed-submit');
|
|
if (embedSubmit) {
|
|
embedSubmit.addEventListener('click', this._handleUrlSubmit);
|
|
}
|
|
}
|
|
|
|
async _handleFileUpload(event) {
|
|
if (!event.target.files || event.target.files.length === 0) {
|
|
return;
|
|
}
|
|
const file = event.target.files[0];
|
|
if (!file) return;
|
|
|
|
if (!this.config.uploader || !this.config.uploader.byFile) {
|
|
this._showError('File upload is not configured');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const url = await this._uploadFile(file);
|
|
this.type = 'file';
|
|
this.data = { url, type: 'file' };
|
|
this._createVideoElement(url, '');
|
|
} catch (error) {
|
|
this._showError('File upload failed: ' + error.message);
|
|
}
|
|
}
|
|
|
|
_handleUrlSubmit() {
|
|
const wrapper = this.wrapper;
|
|
const service = wrapper.querySelector('.embed-service').value;
|
|
const urlInput = wrapper.querySelector('.embed-url');
|
|
const url = urlInput.value.trim();
|
|
|
|
if (!url) {
|
|
this._showError(', URL ');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const submitBtn = wrapper.querySelector('.embed-submit');
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = '...';
|
|
|
|
const embedUrl = this._parseEmbedUrl(service, url);
|
|
|
|
this.data = {
|
|
url: embedUrl,
|
|
filetype: service,
|
|
alignment: this.alignment,
|
|
caption: ''
|
|
};
|
|
|
|
this.api.blocks.update(this.block.id, this.data);
|
|
|
|
this.wrapper.innerHTML = '';
|
|
this._createVideoElement(embedUrl, '');
|
|
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = ' ';
|
|
|
|
} catch (error) {
|
|
this._showError(error.message);
|
|
const submitBtn = wrapper.querySelector('.embed-submit');
|
|
if (submitBtn) {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = ' ';
|
|
}
|
|
}
|
|
}
|
|
|
|
_parseEmbedUrl(service, url) {
|
|
if (service === 'youtube') {
|
|
const regExp = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/i;
|
|
const match = url.match(regExp);
|
|
if (match && match[1]) {
|
|
return `https://www.youtube.com/embed/${match[1]}`;
|
|
}
|
|
}
|
|
|
|
if (service === 'rutube') {
|
|
const regExp = /rutube\.ru\/(?:video\/|play\/embed\/|video\/embed\/)?([a-zA-Z0-9]+)/i;
|
|
const match = url.match(regExp);
|
|
if (match && match[1]) {
|
|
return `https://rutube.ru/play/embed/${match[1]}`;
|
|
}
|
|
|
|
throw new Error(' URL Rutube. : https://rutube.ru/video/CODE/');
|
|
}
|
|
|
|
throw new Error('Invalid URL.');
|
|
}
|
|
|
|
_createVideoElement(url, caption, filetype = null) {
|
|
this.wrapper.innerHTML = '';
|
|
|
|
const container = document.createElement('div');
|
|
container.className = 'video-container';
|
|
container.style.margin = this._getAlignmentMargin();
|
|
|
|
const type = filetype || this.filetype ||
|
|
(url.match(/\.(mp4|webm|ogg)$/i) ? 'file' :
|
|
(url.includes('youtube.com/embed') || url.includes('youtu.be') ? 'youtube' :
|
|
(url.includes('rutube.ru/embed') || url.includes('rutube.ru/video') ? 'rutube' : 'file')));
|
|
|
|
const mediaContainer = document.createElement('div');
|
|
mediaContainer.style.position = 'relative';
|
|
mediaContainer.style.paddingBottom = '56.25%';
|
|
mediaContainer.style.height = '0';
|
|
mediaContainer.style.overflow = 'hidden';
|
|
|
|
if (type === 'file') {
|
|
const video = document.createElement('video');
|
|
video.src = url;
|
|
video.controls = true;
|
|
video.style.position = 'absolute';
|
|
video.style.top = '0';
|
|
video.style.left = '0';
|
|
video.style.width = '100%';
|
|
video.style.height = '100%';
|
|
mediaContainer.appendChild(video);
|
|
} else {
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = url.includes('rutube.ru/video') ?
|
|
url.replace('rutube.ru/video', 'rutube.ru/play/embed') : url;
|
|
iframe.frameBorder = '0';
|
|
iframe.allowFullscreen = true;
|
|
iframe.allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture";
|
|
iframe.style.position = 'absolute';
|
|
iframe.style.top = '0';
|
|
iframe.style.left = '0';
|
|
iframe.style.width = '100%';
|
|
iframe.style.height = '100%';
|
|
mediaContainer.appendChild(iframe);
|
|
}
|
|
|
|
container.appendChild(mediaContainer);
|
|
this._addCaption(container, caption);
|
|
this.wrapper.appendChild(container);
|
|
}
|
|
|
|
_addCaption(container, captionText) {
|
|
if (!captionText) return;
|
|
|
|
const caption = document.createElement('div');
|
|
caption.className = 'video-caption';
|
|
caption.contentEditable = true;
|
|
caption.innerHTML = captionText;
|
|
container.appendChild(caption);
|
|
}
|
|
|
|
async _uploadFile(file) {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
const response = await fetch(this.config.uploader.byFile, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (!data?.file?.url) {
|
|
throw new Error('Invalid response format');
|
|
}
|
|
|
|
return data.file.url;
|
|
} catch (error) {
|
|
console.error('Upload error:', error);
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
save(blockContent) {
|
|
const video = blockContent.querySelector('video, iframe');
|
|
const caption = blockContent.querySelector('.video-caption');
|
|
|
|
return {
|
|
url: video?.src || this.data.url || '',
|
|
caption: caption?.innerHTML || this.data.caption || '',
|
|
alignment: this.alignment,
|
|
filetype: this.filetype || (video?.tagName === 'IFRAME' ?
|
|
(video.src.includes('youtube') ? 'youtube' : 'rutube')
|
|
: 'file')
|
|
};
|
|
}
|
|
|
|
_getAlignmentMargin() {
|
|
switch(this.alignment) {
|
|
case 'left': return '0 auto 0 0';
|
|
case 'right': return '0 0 0 auto';
|
|
default: return '0 auto';
|
|
}
|
|
}
|
|
|
|
_showError(message) {
|
|
if (!this.wrapper) return;
|
|
|
|
const currentTab = this.wrapper.querySelector('.tab-button.active').dataset.tab;
|
|
const currentUrl = this.wrapper.querySelector('.embed-url')?.value || '';
|
|
|
|
this.wrapper.innerHTML = `
|
|
<div class="video-error">
|
|
<p>${message}</p>
|
|
<button class="retry-button"> </button>
|
|
</div>
|
|
`;
|
|
|
|
this.wrapper.querySelector('.retry-button').addEventListener('click', () => {
|
|
this._createUploadForm();
|
|
if (currentTab === 'embed') {
|
|
const embedUrl = this.wrapper.querySelector('.embed-url');
|
|
if (embedUrl) embedUrl.value = currentUrl;
|
|
}
|
|
});
|
|
}
|
|
} |