mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-21 14:19:42 +02:00
added new logic
This commit is contained in:
exezzz
parent
8bcf23278d
commit
28580e300b
9 changed files with 500 additions and 549 deletions
|
|
@ -6,26 +6,33 @@ export default class VideoTool {
|
|||
};
|
||||
}
|
||||
|
||||
constructor({ data, api, config }) {
|
||||
constructor({ data, api, config, block }) { // Äîáàâëÿåì block â ïàðàìåòðû
|
||||
this.data = data || {};
|
||||
this.api = api;
|
||||
this.config = config || {};
|
||||
this.block = block; // Ñîõðàíÿåì ññûëêó íà òåêóùèé áëîê
|
||||
this.wrapper = null;
|
||||
this.alignment = data.alignment || 'center';
|
||||
this.width = data.width || '100%';
|
||||
|
||||
// Привязываем контекст для обработчиков
|
||||
this.filetype = data.filetype || 'file';
|
||||
|
||||
// Ïðèâÿçûâàåì êîíòåêñò äëÿ îáðàáîò÷èêîâ
|
||||
this._handleFileUpload = this._handleFileUpload.bind(this);
|
||||
this._initResize = this._initResize.bind(this);
|
||||
this._handleUrlSubmit = this._handleUrlSubmit.bind(this); // Added this binding
|
||||
}
|
||||
this._handleUrlSubmit = this._handleUrlSubmit.bind(this);
|
||||
}
|
||||
|
||||
render() {
|
||||
this.wrapper = document.createElement('div');
|
||||
this.wrapper.classList.add('video-tool');
|
||||
|
||||
if (this.data.url) {
|
||||
this._createVideoElement(this.data.url, this.data.caption || '');
|
||||
// Äîáàâëÿåì ïðîâåðêó äëÿ ñîâìåñòèìîñòè ñî ñòàðûìè äàííûìè
|
||||
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();
|
||||
}
|
||||
|
|
@ -34,49 +41,69 @@ export default class VideoTool {
|
|||
}
|
||||
|
||||
_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="Загрузить с ПК">
|
||||
<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="Вставить ссылку">
|
||||
<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>
|
||||
<button class="embed-submit">Âñòàâèòü âèäåî</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
// Tab switching
|
||||
|
||||
this._bindFormHandlers();
|
||||
if (currentUrl) {
|
||||
const urlInput = this.wrapper.querySelector('.embed-url');
|
||||
if (urlInput) urlInput.value = currentUrl;
|
||||
}
|
||||
}
|
||||
|
||||
_bindFormHandlers() {
|
||||
// Tab switching
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
// File upload handler
|
||||
this.wrapper.querySelector('.video-file-input')
|
||||
.addEventListener('change', this._handleFileUpload);
|
||||
const fileInput = this.wrapper.querySelector('.video-file-input');
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener('change', this._handleFileUpload);
|
||||
}
|
||||
|
||||
// URL embed handler
|
||||
this.wrapper.querySelector('.embed-submit')
|
||||
.addEventListener('click', this._handleUrlSubmit);
|
||||
}
|
||||
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;
|
||||
|
||||
|
|
@ -89,106 +116,202 @@ export default class VideoTool {
|
|||
const url = await this._uploadFile(file);
|
||||
this.type = 'file';
|
||||
this.data = { url, type: 'file' };
|
||||
his._createVideoElement(url, '');
|
||||
this._createVideoElement(url, '');
|
||||
} catch (error) {
|
||||
this._showError('File upload failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
_handleUrlSubmit() {
|
||||
const wrapper = this.wrapper; // Store reference to wrapper
|
||||
const wrapper = this.wrapper;
|
||||
const service = wrapper.querySelector('.embed-service').value;
|
||||
const url = wrapper.querySelector('.embed-url').value.trim();
|
||||
const urlInput = wrapper.querySelector('.embed-url');
|
||||
const url = urlInput.value.trim();
|
||||
|
||||
if (!url) {
|
||||
this._showError('Please enter a valid URL');
|
||||
return;
|
||||
this._showError('Ïîæàëóéñòà, ââåäèòå URL âèäåî');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const embedUrl = this._parseEmbedUrl(service, url);
|
||||
this.type = service;
|
||||
this.data = { url: embedUrl, type: service };
|
||||
this._createVideoElement(embedUrl, '');
|
||||
const submitBtn = wrapper.querySelector('.embed-submit');
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Îáðàáîòêà...';
|
||||
|
||||
const embedUrl = this._parseEmbedUrl(service, url);
|
||||
|
||||
// Îáíîâëÿåì äàííûå òåêóùåãî áëîêà
|
||||
this.data = {
|
||||
url: embedUrl,
|
||||
filetype: service,
|
||||
width: this.width,
|
||||
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('Invalid video URL: ' + error.message);
|
||||
this._showError(error.message);
|
||||
const submitBtn = wrapper.querySelector('.embed-submit');
|
||||
if (submitBtn) {
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = 'Âñòàâèòü âèäåî';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_parseEmbedUrl(service, url) {
|
||||
// YouTube
|
||||
if (service === 'youtube') {
|
||||
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
const match = url.match(regExp);
|
||||
if (match && match[2].length === 11) {
|
||||
return `https://www.youtube.com/embed/${match[2]}`;
|
||||
}
|
||||
// Ïîääåðæêà âñåõ ôîðìàòîâ 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]}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Rutube
|
||||
if (service === 'rutube') {
|
||||
const regExp = /rutube\.ru\/video\/([a-z0-9]+)/i;
|
||||
// Ïîääåðæêà âñåõ ôîðìàòîâ 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]}`;
|
||||
return `https://rutube.ru/play/embed/${match[1]}`;
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error('Invalid URL');
|
||||
|
||||
throw new Error('Íåâåðíûé URL Rutube. Ïðèìåð ïðàâèëüíîãî ôîðìàòà: https://rutube.ru/video/CODE/');
|
||||
}
|
||||
|
||||
_createVideoElement() {
|
||||
this.wrapper.innerHTML = '';
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'video-container';
|
||||
container.style.margin = this._getAlignmentMargin();
|
||||
container.style.width = this.width;
|
||||
throw new Error('Invalid URL.');
|
||||
}
|
||||
|
||||
if (this.type === 'file') {
|
||||
_createVideoElement(url, caption, filetype = null) {
|
||||
this.wrapper.innerHTML = '';
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.className = 'video-container';
|
||||
container.style.margin = this._getAlignmentMargin();
|
||||
container.style.width = this.width;
|
||||
|
||||
// Îïðåäåëÿåì òèï êîíòåíòà
|
||||
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 = this.data.url;
|
||||
video.src = url;
|
||||
video.controls = true;
|
||||
video.style.position = 'absolute';
|
||||
video.style.top = '0';
|
||||
video.style.left = '0';
|
||||
video.style.width = '100%';
|
||||
container.appendChild(video);
|
||||
}
|
||||
else if (this.type === 'youtube' || this.type === 'rutube') {
|
||||
video.style.height = '100%';
|
||||
mediaContainer.appendChild(video);
|
||||
} else {
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = this.data.url;
|
||||
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 = '400px';
|
||||
container.appendChild(iframe);
|
||||
}
|
||||
iframe.style.height = '100%';
|
||||
mediaContainer.appendChild(iframe);
|
||||
}
|
||||
|
||||
this._addResizeHandle(container);
|
||||
this._addCaption(container);
|
||||
this.wrapper.appendChild(container);
|
||||
container.appendChild(mediaContainer);
|
||||
this._addCaption(container, caption);
|
||||
this._addResizeHandle(container);
|
||||
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) {
|
||||
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('Upload failed');
|
||||
const data = await response.json();
|
||||
return data.file.url;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
_addResizeHandle() {
|
||||
const container = this.wrapper.querySelector('.video-container');
|
||||
const video = container.querySelector('video');
|
||||
_addResizeHandle(container) {
|
||||
const video = container.querySelector('video, iframe');
|
||||
|
||||
if (!video) return; // Åñëè âèäåî íå íàéäåíî, âûõîäèì
|
||||
|
||||
const handle = document.createElement('div');
|
||||
handle.className = 'resize-handle';
|
||||
handle.innerHTML = '↔';
|
||||
handle.addEventListener('mousedown', this._initResize);
|
||||
handle.innerHTML = '-';
|
||||
|
||||
handle.addEventListener('mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
const startWidth = parseInt(video.style.width) || video.offsetWidth;
|
||||
const startX = e.clientX;
|
||||
|
||||
const doResize = (e) => {
|
||||
const newWidth = Math.max(200, startWidth + (e.clientX - startX));
|
||||
video.style.width = `${newWidth}px`;
|
||||
};
|
||||
|
||||
const stopResize = () => {
|
||||
document.removeEventListener('mousemove', doResize);
|
||||
document.removeEventListener('mouseup', stopResize);
|
||||
this.width = video.style.width;
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', doResize);
|
||||
document.addEventListener('mouseup', stopResize, { once: true });
|
||||
});
|
||||
|
||||
container.appendChild(handle);
|
||||
}
|
||||
|
|
@ -215,14 +338,17 @@ export default class VideoTool {
|
|||
}
|
||||
|
||||
save(blockContent) {
|
||||
const video = blockContent.querySelector('video');
|
||||
const video = blockContent.querySelector('video, iframe');
|
||||
const caption = blockContent.querySelector('.video-caption');
|
||||
|
||||
return {
|
||||
url: video?.src || '',
|
||||
caption: caption?.innerHTML || '',
|
||||
width: video?.style.width || '100%',
|
||||
alignment: this.alignment
|
||||
url: video?.src || this.data.url || '',
|
||||
caption: caption?.innerHTML || this.data.caption || '',
|
||||
width: this.width || '100%',
|
||||
alignment: this.alignment,
|
||||
filetype: this.filetype || (video?.tagName === 'IFRAME' ?
|
||||
(video.src.includes('youtube') ? 'youtube' : 'rutube')
|
||||
: 'file')
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -235,6 +361,27 @@ export default class VideoTool {
|
|||
}
|
||||
|
||||
_showError(message) {
|
||||
this.wrapper.innerHTML = `<div class="video-error">${message}</div>`;
|
||||
}
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue