121 lines
4.4 KiB
JavaScript
121 lines
4.4 KiB
JavaScript
define([
|
|
'jquery',
|
|
'Magento_Ui/js/modal/modal',
|
|
'mage/translate'
|
|
], function ($, modal) {
|
|
'use strict';
|
|
|
|
return function (config, element) {
|
|
var $element = $(element),
|
|
options = $element.data('options'),
|
|
$form = $element.find('[data-role="video-upload-form"]'),
|
|
$progress = $element.find('[data-role="upload-progress"]'),
|
|
$status = $element.find('[data-role="upload-status"]'),
|
|
$coverInput = $element.find('[data-role="cover-image-input"]'),
|
|
$coverNote = $element.find('[data-role="cover-image-empty-note"]'),
|
|
uploading = false;
|
|
|
|
$coverInput.on('change', function () {
|
|
$coverNote.toggle(!(this.files && this.files.length));
|
|
});
|
|
|
|
modal({
|
|
type: 'slide',
|
|
title: $.mage.__('Upload Video'),
|
|
buttons: [{
|
|
text: $.mage.__('Upload'),
|
|
class: 'action-primary',
|
|
click: upload
|
|
}, {
|
|
text: $.mage.__('Cancel'),
|
|
click: function () {
|
|
if (!uploading) {
|
|
$element.modal('closeModal');
|
|
}
|
|
}
|
|
}]
|
|
}, $element);
|
|
|
|
$('[data-role="open-video-upload"]').on('click', function () {
|
|
if (!options.enabled) {
|
|
alert($.mage.__('Video upload is disabled in configuration.'));
|
|
return;
|
|
}
|
|
$element.modal('openModal');
|
|
});
|
|
|
|
function upload() {
|
|
var title = $.trim($form.find('[name="title"]').val()),
|
|
fileInput = $form.find('[name="video"]')[0],
|
|
coverInput = $form.find('[name="cover"]')[0],
|
|
file = fileInput.files[0],
|
|
cover = coverInput.files[0],
|
|
uploadId,
|
|
total,
|
|
index = 0;
|
|
|
|
if (uploading) {
|
|
return;
|
|
}
|
|
if (!title || !file) {
|
|
alert($.mage.__('Title and MP4 video are required.'));
|
|
return;
|
|
}
|
|
if (!/\.mp4$/i.test(file.name) || (file.type && file.type !== 'video/mp4')) {
|
|
alert($.mage.__('Only MP4 video files are supported.'));
|
|
return;
|
|
}
|
|
|
|
uploading = true;
|
|
uploadId = Date.now().toString(36) + Math.random().toString(36).slice(2);
|
|
total = Math.ceil(file.size / options.chunkSize);
|
|
$progress.attr('hidden', false).val(0);
|
|
$status.text($.mage.__('Uploading...'));
|
|
sendNext();
|
|
|
|
function sendNext() {
|
|
var start = index * options.chunkSize,
|
|
data = new FormData();
|
|
|
|
data.append('form_key', window.FORM_KEY);
|
|
data.append('upload_id', uploadId);
|
|
data.append('index', index);
|
|
data.append('total', total);
|
|
data.append('name', file.name);
|
|
data.append('title', title);
|
|
data.append('description', $form.find('[name="description"]').val());
|
|
data.append('status', $form.find('[name="status"]').val());
|
|
data.append(
|
|
'chunk',
|
|
file.slice(start, Math.min(start + options.chunkSize, file.size)),
|
|
file.name
|
|
);
|
|
if (cover && index + 1 === total) {
|
|
data.append('cover', cover, cover.name);
|
|
}
|
|
|
|
$.ajax({
|
|
url: options.uploadUrl,
|
|
method: 'POST',
|
|
data: data,
|
|
processData: false,
|
|
contentType: false
|
|
}).done(function (response) {
|
|
index++;
|
|
$progress.val(Math.round(index / total * 100));
|
|
if (!response.completed) {
|
|
sendNext();
|
|
return;
|
|
}
|
|
$status.text($.mage.__('Upload completed. Refreshing...'));
|
|
window.location.replace(options.indexUrl);
|
|
}).fail(function (xhr) {
|
|
var response = xhr.responseJSON || {};
|
|
uploading = false;
|
|
$status.text(response.message || $.mage.__('Video upload failed.'));
|
|
});
|
|
}
|
|
}
|
|
};
|
|
});
|