646 lines
22 KiB
JavaScript
646 lines
22 KiB
JavaScript
$(document).ready(function() {
|
|
var $container = $('#video-container'),
|
|
$searchForm = $('#video-search'),
|
|
$videoResults = $('#video-results'),
|
|
$volumeCtrl = $('#video-volume-ctrl'),
|
|
$ctrlForm = $('#video-ctrl'),
|
|
$devsPanel = $('#media-devices-panel'),
|
|
$devsList = $devsPanel.find('.devices-list'),
|
|
$devsBtn = $('button[data-panel="#media-devices-panel"]'),
|
|
$devsBtnIcon = $('#media-devices-panel-icon'),
|
|
$devsRefreshBtn = $devsPanel.find('.refresh-devices'),
|
|
$searchBarContainer = $('#media-search-bar-container'),
|
|
$mediaBtnsContainer = $('#media-btns-container'),
|
|
$mediaItemPanel = $('#media-item-panel'),
|
|
$mediaSubtitlesModal = $('#media-subtitles-modal'),
|
|
$mediaSubtitlesResultsContainer = $mediaSubtitlesModal.find('.media-subtitles-results-container'),
|
|
$mediaSubtitlesResults = $mediaSubtitlesModal.find('.media-subtitles-results'),
|
|
$mediaSubtitlesMessage = $mediaSubtitlesModal.find('.media-subtitles-message'),
|
|
$mediaSearchSubtitles = $ctrlForm.find('[data-modal="#media-subtitles-modal"]'),
|
|
prevVolume = undefined,
|
|
selectedResource = undefined;
|
|
|
|
const onEvent = (event) => {
|
|
switch (event.args.type) {
|
|
case 'platypush.message.event.media.MediaPlayRequestEvent':
|
|
createNotification({
|
|
'icon': 'stream',
|
|
'html': 'Processing media' + ('resource' in event.args
|
|
? ' ' + event.args.resource : ''),
|
|
});
|
|
break;
|
|
|
|
case 'platypush.message.event.media.MediaPlayEvent':
|
|
createNotification({
|
|
'icon': 'play',
|
|
'html': 'Starting media playback' + ('resource' in event.args
|
|
? ' for ' + event.args.resource : ''),
|
|
});
|
|
break;
|
|
|
|
case 'platypush.message.event.media.MediaPauseEvent':
|
|
createNotification({
|
|
'icon': 'pause',
|
|
'html': 'Media playback paused',
|
|
});
|
|
break;
|
|
|
|
case 'platypush.message.event.media.MediaStopEvent':
|
|
createNotification({
|
|
'icon': 'stop',
|
|
'html': 'Media playback stopped',
|
|
});
|
|
break;
|
|
}
|
|
};
|
|
|
|
const updateVideoResults = function(videos) {
|
|
$videoResults.html('');
|
|
for (var video of videos) {
|
|
var $videoResult = $('<div></div>')
|
|
.addClass('video-result')
|
|
.attr('data-url', video['url'])
|
|
.attr('data-panel', '#media-item-panel')
|
|
.html('title' in video ? video['title'] : video['url']);
|
|
|
|
var $icon = getVideoIconByUrl(video['url']);
|
|
$icon.prependTo($videoResult);
|
|
$videoResult.appendTo($videoResults);
|
|
}
|
|
};
|
|
|
|
const getVideoIconByUrl = function(url) {
|
|
var $icon = $('<i class="fa"></i>');
|
|
|
|
if (url.startsWith('file://')) {
|
|
$icon.addClass('fa-download');
|
|
} else if (url.startsWith('https://www.youtube.com/')) {
|
|
$icon.addClass('fa-youtube');
|
|
} else if (url.startsWith('magnet:?')) {
|
|
$icon.addClass('fa-film');
|
|
} else {
|
|
$icon.addClass('fa-video');
|
|
}
|
|
|
|
var $iconContainer = $('<span></span>').addClass('video-icon-container');
|
|
$icon.appendTo($iconContainer);
|
|
return $iconContainer;
|
|
};
|
|
|
|
const getSelectedDevice = function() {
|
|
var device = { isBrowser: false, isRemote: false, name: undefined };
|
|
var $remoteDevice = $devsPanel.find('.cast-device.selected')
|
|
.filter((i, dev) => !$(dev).data('local') && !$(dev).data('browser') && $(dev).data('name'));
|
|
var $browserDevice = $devsPanel.find('.cast-device.selected')
|
|
.filter((i, dev) => $(dev).data('browser'));
|
|
|
|
if ($remoteDevice.length) {
|
|
device.isRemote = true;
|
|
device.name = $remoteDevice.data('name');
|
|
} else if ($browserDevice.length) {
|
|
device.isBrowser = true;
|
|
}
|
|
|
|
return device;
|
|
};
|
|
|
|
const startStreamingTorrent = function(torrent) {
|
|
return new Promise((resolve, reject) => {
|
|
execute(
|
|
{
|
|
type: 'request',
|
|
action: 'media.webtorrent.play',
|
|
args: {
|
|
resource: torrent,
|
|
download_only: true,
|
|
}
|
|
},
|
|
|
|
(response) => {
|
|
resolve(response.response.output.url);
|
|
},
|
|
|
|
(error) => {
|
|
reject(error);
|
|
}
|
|
);
|
|
});
|
|
};
|
|
|
|
const startStreaming = function(media) {
|
|
if (media.startsWith('magnet:?')) {
|
|
return new Promise((resolve, reject) => {
|
|
startStreamingTorrent(media)
|
|
.then((url) => { resolve(url); })
|
|
.catch((error) => { reject(error); });
|
|
});
|
|
}
|
|
|
|
return new Promise((resolve, reject) => {
|
|
$.ajax({
|
|
type: 'PUT',
|
|
url: '/media',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({ source: media }),
|
|
|
|
complete: (xhr, textStatus) => {
|
|
if (xhr.status == 200) {
|
|
var uri = xhr.responseJSON.url.match(/https?:\/\/[^\/]+(\/media\/.*)/)[1]
|
|
resolve(uri);
|
|
} else {
|
|
reject(Error(xhr.responseText));
|
|
}
|
|
},
|
|
});
|
|
});
|
|
};
|
|
|
|
const stopStreaming = function(media_id) {
|
|
return new Promise((resolve, reject) => {
|
|
$.ajax({
|
|
type: 'DELETE',
|
|
url: '/media/' + media_id,
|
|
contentType: 'application/json',
|
|
});
|
|
});
|
|
};
|
|
|
|
const getSubtitles = function(resource) {
|
|
return new Promise((resolve, reject) => {
|
|
if (!window.config.media.subtitles) {
|
|
return; // media.subtitles plugin not configured
|
|
}
|
|
|
|
run({
|
|
action: 'media.subtitles.get_subtitles',
|
|
args: { 'resource': resource }
|
|
}).then((response) => {
|
|
resolve(response.response.output);
|
|
}).catch((error) => {
|
|
reject(error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const downloadSubtitles = function(link, mediaResource) {
|
|
return new Promise((resolve, reject) => {
|
|
run({
|
|
action: 'media.subtitles.download',
|
|
args: {
|
|
'link': link,
|
|
'media_resource': mediaResource,
|
|
}
|
|
}).then((response) => {
|
|
resolve(response.response.output.filename);
|
|
}).catch((error) => {
|
|
reject(error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const setSubtitles = (filename) => {
|
|
return new Promise((resolve, reject) => {
|
|
run({
|
|
action: 'media.set_subtitles',
|
|
args: { 'filename': filename }
|
|
}).then((response) => {
|
|
resolve(response.response.output);
|
|
}).catch((error) => {
|
|
reject(error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const playOnChromecast = (resource, device, subtitles) => {
|
|
return new Promise((resolve, reject) => {
|
|
var requestArgs = {
|
|
action: 'media.chromecast.play',
|
|
args: {
|
|
'resource': resource,
|
|
'chromecast': device,
|
|
},
|
|
};
|
|
|
|
// TODO support for subtitles on Chromecast through internal streaming server
|
|
|
|
run(requestArgs).then((response) => {
|
|
resolve(response);
|
|
}).catch((error) => {
|
|
reject(error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const playInBrowser = (resource, subtitles) => {
|
|
return new Promise((resolve, reject) => {
|
|
// TODO support for subtitles in local player
|
|
|
|
startStreaming(resource).then((url) => {
|
|
window.open(url, '_blank');
|
|
resolve(url);
|
|
}).catch((xhr, status, error) => {
|
|
reject(xhr.responseText);
|
|
});
|
|
});
|
|
};
|
|
|
|
const playOnServer = (resource, subtitles) => {
|
|
return new Promise((resolve, reject) => {
|
|
var requestArgs = {
|
|
action: 'media.play',
|
|
args: { 'resource': resource },
|
|
};
|
|
|
|
if (subtitles) {
|
|
requestArgs.args.subtitles = subtitles;
|
|
}
|
|
|
|
run(requestArgs).then((response) => {
|
|
resolve(resource);
|
|
}).catch((error) => {
|
|
reject(error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const _play = (resource, subtitles) => {
|
|
return new Promise((resolve, reject) => {
|
|
var playHndl;
|
|
var selectedDevice = getSelectedDevice();
|
|
|
|
if (selectedDevice.isBrowser) {
|
|
playHndl = playInBrowser(resource, subtitles);
|
|
} else if (selectedDevice.isRemote) {
|
|
playHndl = playOnChromecast(resource, selectedDevice.name, subtitles);
|
|
} else {
|
|
playHndl = playOnServer(resource, subtitles);
|
|
}
|
|
|
|
playHndl.then((response) => {
|
|
resolve(resource);
|
|
}).catch((error) => {
|
|
showError('Playback error: ' + error.message);
|
|
reject(error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const play = (resource) => {
|
|
return new Promise((resolve, reject) => {
|
|
var results = $videoResults.html();
|
|
var onVideoLoading = () => { $videoResults.text('Loading video...'); };
|
|
var onVideoReady = () => {
|
|
$videoResults.html(results);
|
|
resolve(resource);
|
|
};
|
|
|
|
$mediaSearchSubtitles.data('resource', resource);
|
|
onVideoLoading();
|
|
|
|
var subtitlesConf = window.config.media.subtitles;
|
|
|
|
// TODO populate the subtitles panel and show the subtitles button
|
|
if (subtitlesConf && 'language' in subtitlesConf) {
|
|
tryFetchSubtitles(resource).then((subtitles) => {
|
|
if (!subtitles) {
|
|
showError('Cannot get subtitles: ' + error);
|
|
_play(resource).finally(onVideoReady);
|
|
} else {
|
|
_play(resource, subtitles).finally(onVideoReady);
|
|
}
|
|
});
|
|
} else {
|
|
_play(resource).finally(onVideoReady);
|
|
}
|
|
});
|
|
};
|
|
|
|
const tryFetchSubtitles = (resource) => {
|
|
return new Promise((resolve, reject) => {
|
|
getSubtitles(resource).then((subs) => {
|
|
if (!subs) {
|
|
resolve();
|
|
return; // No subtitles found
|
|
}
|
|
|
|
downloadSubtitles(subs[0].SubDownloadLink, resource).then((filename) => {
|
|
resolve(filename);
|
|
}).catch((error) => {
|
|
resolve();
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
const download = function(resource) {
|
|
return new Promise((resolve, reject) => {
|
|
var results = $videoResults.html();
|
|
var onVideoLoading = function() {
|
|
$videoResults.text('Loading video...');
|
|
};
|
|
|
|
var onVideoReady = function() {
|
|
$videoResults.html(results);
|
|
};
|
|
|
|
onVideoLoading();
|
|
startStreaming(resource)
|
|
.then((url) => {
|
|
url = url + '?download=1'
|
|
window.open(url, '_blank');
|
|
resolve(url);
|
|
})
|
|
.catch((xhr, status, error) => {
|
|
reject(xhr.responseText);
|
|
})
|
|
.finally(() => {
|
|
onVideoReady();
|
|
});
|
|
});
|
|
};
|
|
|
|
const initBindings = function() {
|
|
window.registerEventListener(onEvent);
|
|
$searchForm.on('submit', function(event) {
|
|
var $input = $(this).find('input[name=video-search-text]');
|
|
var resource = $input.val();
|
|
var request = {}
|
|
var onSuccess = function() {};
|
|
var onError = function() {};
|
|
var onComplete = function() {
|
|
$input.prop('disabled', false);
|
|
};
|
|
|
|
$input.prop('disabled', true);
|
|
$videoResults.text('Searching...');
|
|
|
|
if (resource.match(new RegExp('^https?://')) ||
|
|
resource.match(new RegExp('^file://'))) {
|
|
var videos = [{ url: resource }];
|
|
updateVideoResults(videos);
|
|
|
|
request = {
|
|
type: 'request',
|
|
action: 'media.play',
|
|
args: { resource: resource }
|
|
};
|
|
} else {
|
|
request = {
|
|
type: 'request',
|
|
action: 'media.search',
|
|
args: { query: resource }
|
|
};
|
|
|
|
onSuccess = function(response) {
|
|
var videos = response.response.output;
|
|
updateVideoResults(videos);
|
|
};
|
|
}
|
|
|
|
execute(request, onSuccess, onError, onComplete)
|
|
return false;
|
|
});
|
|
|
|
$ctrlForm.on('submit', function() { return false; });
|
|
$ctrlForm.find('button[data-action]').on('click touch', function(evt) {
|
|
var action = $(this).data('action');
|
|
var $btn = $(this);
|
|
|
|
var requestArgs = {
|
|
type: 'request',
|
|
action: 'media.' + action,
|
|
};
|
|
|
|
var selectedDevice = getSelectedDevice();
|
|
if (selectedDevice.isBrowser) {
|
|
return; // The in-browser player can be used to control media
|
|
}
|
|
|
|
if (selectedDevice.isRemote) {
|
|
requestArgs.action = 'media.chromecast.' + action;
|
|
requestArgs.args = { 'chromecast': selectedDevice.name };
|
|
}
|
|
|
|
execute(requestArgs);
|
|
});
|
|
|
|
$volumeCtrl.on('mousedown touchstart', function(event) {
|
|
prevVolume = $(this).val();
|
|
});
|
|
|
|
$volumeCtrl.on('mouseup touchend', function(event) {
|
|
var requestArgs = {
|
|
type: 'request',
|
|
action: 'media.set_volume',
|
|
args: { volume: $(this).val() },
|
|
};
|
|
|
|
var selectedDevice = getSelectedDevice();
|
|
if (selectedDevice.isRemote) {
|
|
requestArgs.action = 'media.chromecast.set_volume',
|
|
requestArgs.args.chromecast = selectedDevice.name;
|
|
}
|
|
|
|
execute(requestArgs,
|
|
onSuccess=undefined,
|
|
onError = function() {
|
|
$volumeCtrl.val(prevVolume);
|
|
}
|
|
);
|
|
});
|
|
|
|
$videoResults.on('mousedown touchstart', '.video-result', function() {
|
|
selectedResource = $(this).data('url');
|
|
});
|
|
|
|
$videoResults.on('mouseup touchend', '.video-result', function(event) {
|
|
var $item = $(this);
|
|
var resource = $item.data('url');
|
|
if (resource !== selectedResource) {
|
|
return; // Did not really click this item
|
|
}
|
|
|
|
$item.siblings().removeClass('selected');
|
|
$item.addClass('selected');
|
|
|
|
$mediaItemPanel.css('top', (event.clientY + $(window).scrollTop()) + 'px');
|
|
$mediaItemPanel.css('left', (event.clientX + $(window).scrollLeft()) + 'px');
|
|
$mediaItemPanel.data('resource', resource);
|
|
});
|
|
|
|
$devsBtn.on('click touch', function() {
|
|
$(this).toggleClass('selected');
|
|
$devsPanel.css('top', ($(this).position().top + $(this).outerHeight()) + 'px');
|
|
$devsPanel.css('left', ($(this).position().left) + 'px');
|
|
return false;
|
|
});
|
|
|
|
$devsPanel.on('mouseup touchend', '.cast-device', function() {
|
|
if ($(this).hasClass('disabled')) {
|
|
return;
|
|
}
|
|
|
|
var $devices = $devsPanel.find('.cast-device');
|
|
var $curSelected = $devices.filter((i, d) => $(d).hasClass('selected'));
|
|
|
|
if ($curSelected.data('name') !== $(this).data('name')) {
|
|
$curSelected.removeClass('selected');
|
|
$(this).addClass('selected');
|
|
$devsBtnIcon.attr('class', $(this).find('.fa').attr('class'));
|
|
|
|
if ($(this).data('browser') || $(this).data('local')) {
|
|
$devsBtn.removeClass('remote');
|
|
} else {
|
|
$devsBtn.addClass('remote');
|
|
}
|
|
|
|
// TODO Logic for switching destination on the fly
|
|
}
|
|
|
|
$devsPanel.hide();
|
|
$devsBtn.removeClass('selected');
|
|
});
|
|
|
|
$devsRefreshBtn.on('click', function() {
|
|
if ($(this).hasClass('disabled')) {
|
|
return;
|
|
}
|
|
|
|
$(this).addClass('disabled');
|
|
initRemoteDevices();
|
|
});
|
|
|
|
$mediaItemPanel.on('click', '[data-action]', function() {
|
|
var $action = $(this);
|
|
if ($action.hasClass('disabled')) {
|
|
return;
|
|
}
|
|
|
|
var action = $action.data('action');
|
|
var resource = $mediaItemPanel.data('resource');
|
|
if (!resource) {
|
|
return;
|
|
}
|
|
|
|
$mediaItemPanel.hide();
|
|
$mediaItemPanel.find('[data-action]').addClass('disabled');
|
|
|
|
eval(action)($mediaItemPanel.data('resource'))
|
|
.finally(() => {
|
|
$mediaItemPanel.find('[data-action]').removeClass('disabled');
|
|
});
|
|
});
|
|
|
|
$mediaSearchSubtitles.on('mouseup touchend', () => {
|
|
var resource = $mediaSearchSubtitles.data('resource');
|
|
if (!resource) {
|
|
return;
|
|
}
|
|
|
|
$mediaSubtitlesMessage.text('Loading subtitles...');
|
|
$mediaSubtitlesResults.text('');
|
|
$mediaSubtitlesMessage.show();
|
|
$mediaSubtitlesResultsContainer.hide();
|
|
|
|
getSubtitles(resource).then((subs) => {
|
|
if (!subs.length) {
|
|
$mediaSubtitlesMessage.text('No subtitles found');
|
|
return;
|
|
}
|
|
|
|
for (var sub of subs) {
|
|
var flagCode;
|
|
if ('ISO639' in sub) {
|
|
switch(sub.ISO639) {
|
|
case 'en': flagCode = 'gb'; break;
|
|
default: flagCode = sub.ISO639; break;
|
|
}
|
|
}
|
|
|
|
var $subContainer = $('<div></div>').addClass('row media-subtitle-container')
|
|
.data('download-link', sub.SubDownloadLink)
|
|
.data('resource', resource);
|
|
|
|
var $subFlagIconContainer = $('<div></div>').addClass('one column');
|
|
var $subFlagIcon = $('<span></span>')
|
|
.addClass(flagCode ? 'flag-icon flag-icon-' + flagCode : (
|
|
sub.IsLocal ? 'fa fa-download' : ''))
|
|
.text(!(flagCode || sub.IsLocal) ? '?' : '');
|
|
|
|
var $subMovieName = $('<div></div>').addClass('five columns')
|
|
.text(sub.MovieName);
|
|
|
|
var $subFileName = $('<div></div>').addClass('six columns')
|
|
.text(sub.SubFileName);
|
|
|
|
$subFlagIcon.appendTo($subFlagIconContainer);
|
|
$subFlagIconContainer.appendTo($subContainer);
|
|
$subMovieName.appendTo($subContainer);
|
|
$subFileName.appendTo($subContainer);
|
|
$subContainer.appendTo($mediaSubtitlesResults);
|
|
}
|
|
|
|
$mediaSubtitlesMessage.hide();
|
|
$mediaSubtitlesResultsContainer.show();
|
|
}).catch((error) => {
|
|
$mediaSubtitlesMessage.text('Unable to load subtitles: ' + error.message);
|
|
});
|
|
});
|
|
};
|
|
|
|
const initRemoteDevices = function() {
|
|
$devsList.find('.cast-device[data-remote]').addClass('disabled');
|
|
|
|
execute(
|
|
{
|
|
type: 'request',
|
|
action: 'media.chromecast.get_chromecasts',
|
|
},
|
|
|
|
function(results) {
|
|
$devsRefreshBtn.removeClass('disabled');
|
|
$devsList.find('.cast-device[data-remote]').remove();
|
|
|
|
if (!results || results.response.errors.length) {
|
|
return;
|
|
}
|
|
|
|
results = results.response.output;
|
|
for (var cast of results) {
|
|
var $cast = $('<div></div>').addClass('row cast-device')
|
|
.addClass('cast-device-' + cast.type).attr('data-remote', true)
|
|
.data('name', cast.name);
|
|
|
|
var icon = 'question';
|
|
switch (cast.type) {
|
|
case 'cast': icon = 'tv'; break;
|
|
case 'audio': icon = 'volume-up'; break;
|
|
}
|
|
|
|
var $castIcon = $('<i></i>').addClass('fa fa-' + icon)
|
|
.addClass('cast-device-icon');
|
|
var $castName = $('<span></span>').addClass('cast-device-name')
|
|
.text(cast.name);
|
|
|
|
var $iconContainer = $('<div></div>').addClass('two columns');
|
|
var $nameContainer = $('<div></div>').addClass('ten columns');
|
|
$castIcon.appendTo($iconContainer);
|
|
$castName.appendTo($nameContainer);
|
|
|
|
$iconContainer.appendTo($cast);
|
|
$nameContainer.appendTo($cast);
|
|
$cast.appendTo($devsList);
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
const init = function() {
|
|
initRemoteDevices();
|
|
initBindings();
|
|
};
|
|
|
|
init();
|
|
});
|
|
|