2018-04-24 01:03:50 +02:00
|
|
|
$(document).ready(function() {
|
|
|
|
var $container = $('#video-container'),
|
2018-04-24 01:23:06 +02:00
|
|
|
$searchForm = $('#video-search'),
|
2018-04-24 14:36:05 +02:00
|
|
|
$videoResults = $('#video-results'),
|
|
|
|
$volumeCtrl = $('#video-volume-ctrl'),
|
|
|
|
$ctrlForm = $('#video-ctrl'),
|
2019-02-06 09:46:57 +01:00
|
|
|
$devsPanel = $('#media-devices-panel'),
|
2019-02-08 19:48:18 +01:00
|
|
|
$devsList = $devsPanel.find('.devices-list'),
|
2019-02-09 01:53:14 +01:00
|
|
|
$devsBtn = $('button[data-panel="#media-devices-panel"]'),
|
2019-02-08 19:48:18 +01:00
|
|
|
$devsBtnIcon = $('#media-devices-panel-icon'),
|
|
|
|
$devsRefreshBtn = $devsPanel.find('.refresh-devices'),
|
2019-02-06 09:46:57 +01:00
|
|
|
$searchBarContainer = $('#media-search-bar-container'),
|
|
|
|
$mediaBtnsContainer = $('#media-btns-container'),
|
2019-02-09 01:53:14 +01:00
|
|
|
$mediaItemPanel = $('#media-item-panel'),
|
|
|
|
prevVolume = undefined,
|
|
|
|
selectedResource = undefined;
|
2018-04-24 14:36:05 +02:00
|
|
|
|
|
|
|
var updateVideoResults = function(videos) {
|
|
|
|
$videoResults.html('');
|
|
|
|
for (var video of videos) {
|
|
|
|
var $videoResult = $('<div></div>')
|
|
|
|
.addClass('video-result')
|
|
|
|
.attr('data-url', video['url'])
|
2019-02-09 01:53:14 +01:00
|
|
|
.attr('data-panel', '#media-item-panel')
|
2018-04-24 14:36:05 +02:00
|
|
|
.html('title' in video ? video['title'] : video['url']);
|
|
|
|
|
2018-04-26 15:23:06 +02:00
|
|
|
var $icon = getVideoIconByUrl(video['url']);
|
|
|
|
$icon.prependTo($videoResult);
|
2018-04-24 14:36:05 +02:00
|
|
|
$videoResult.appendTo($videoResults);
|
|
|
|
}
|
|
|
|
};
|
2018-04-24 01:03:50 +02:00
|
|
|
|
2018-04-26 15:23:06 +02:00
|
|
|
var getVideoIconByUrl = function(url) {
|
|
|
|
var $icon = $('<i class="fa"></i>');
|
|
|
|
|
|
|
|
if (url.startsWith('file://')) {
|
2018-04-26 15:29:10 +02:00
|
|
|
$icon.addClass('fa-download');
|
2018-04-26 15:23:06 +02:00
|
|
|
} else if (url.startsWith('https://www.youtube.com/')) {
|
|
|
|
$icon.addClass('fa-youtube');
|
|
|
|
} else if (url.startsWith('magnet:?')) {
|
2018-04-26 15:29:10 +02:00
|
|
|
$icon.addClass('fa-film');
|
2018-04-26 15:23:06 +02:00
|
|
|
} else {
|
|
|
|
$icon.addClass('fa-video');
|
|
|
|
}
|
|
|
|
|
|
|
|
var $iconContainer = $('<span></span>').addClass('video-icon-container');
|
|
|
|
$icon.appendTo($iconContainer);
|
|
|
|
return $iconContainer;
|
|
|
|
};
|
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
var getSelectedDevice = function() {
|
2019-02-08 00:43:43 +01:00
|
|
|
var device = { isBrowser: false, isRemote: false, name: undefined };
|
2019-02-06 09:46:57 +01:00
|
|
|
var $remoteDevice = $devsPanel.find('.cast-device.selected')
|
2019-02-08 00:43:43 +01:00
|
|
|
.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'));
|
2019-02-06 09:46:57 +01:00
|
|
|
|
|
|
|
if ($remoteDevice.length) {
|
|
|
|
device.isRemote = true;
|
|
|
|
device.name = $remoteDevice.data('name');
|
2019-02-08 00:43:43 +01:00
|
|
|
} else if ($browserDevice.length) {
|
|
|
|
device.isBrowser = true;
|
2019-02-06 09:46:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return device;
|
|
|
|
};
|
|
|
|
|
2019-02-08 00:43:43 +01:00
|
|
|
var 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);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
var 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) => {
|
|
|
|
var url;
|
|
|
|
if (xhr.status == 200) {
|
|
|
|
url = xhr.responseJSON.url;
|
|
|
|
} else if (xhr.status == 409) {
|
|
|
|
// Media mount point already registered
|
|
|
|
url = xhr.responseText.match(
|
|
|
|
/.*is already registered on ("|")(https?:\/\/[^\/]+\/media\/[0-9a-f]+\.[0-9a-z]+)("|").*/)[2]
|
|
|
|
}
|
|
|
|
|
|
|
|
if (url) {
|
|
|
|
var uri = url.match(/https?:\/\/[^\/]+(\/media\/.*)/)[1]
|
|
|
|
resolve(uri);
|
|
|
|
} else {
|
|
|
|
reject(Error(xhr.responseText));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
var stopStreaming = function(media_id) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
$.ajax({
|
|
|
|
type: 'DELETE',
|
|
|
|
url: '/media/' + media_id,
|
|
|
|
contentType: 'application/json',
|
|
|
|
});
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2019-02-09 01:53:14 +01:00
|
|
|
var play = function(resource) {
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
var results = $videoResults.html();
|
|
|
|
var onVideoLoading = function() {
|
|
|
|
$videoResults.text('Loading video...');
|
|
|
|
};
|
|
|
|
|
|
|
|
var onVideoReady = function() {
|
|
|
|
$videoResults.html(results);
|
|
|
|
};
|
|
|
|
|
|
|
|
var requestArgs = {
|
|
|
|
type: 'request',
|
|
|
|
action: 'media.play',
|
|
|
|
args: { resource: resource },
|
|
|
|
};
|
|
|
|
|
|
|
|
var selectedDevice = getSelectedDevice();
|
|
|
|
if (selectedDevice.isBrowser) {
|
|
|
|
onVideoLoading();
|
|
|
|
|
|
|
|
startStreaming(resource)
|
|
|
|
.then((url) => {
|
|
|
|
window.open(url, '_blank');
|
|
|
|
resolve(url);
|
|
|
|
})
|
|
|
|
.catch((xhr, status, error) => {
|
|
|
|
reject(xhr.responseText);
|
|
|
|
})
|
|
|
|
.finally(() => {
|
|
|
|
onVideoReady();
|
|
|
|
});
|
|
|
|
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (selectedDevice.isRemote) {
|
|
|
|
requestArgs.action = 'media.chromecast.play';
|
|
|
|
requestArgs.args.chromecast = selectedDevice.name;
|
|
|
|
}
|
|
|
|
|
|
|
|
onVideoLoading();
|
|
|
|
execute(
|
|
|
|
requestArgs,
|
|
|
|
function(response) {
|
|
|
|
$videoResults.html(results);
|
|
|
|
resolve(resource);
|
|
|
|
},
|
|
|
|
|
|
|
|
function(xhr, status, error) {
|
|
|
|
onVideoReady();
|
|
|
|
reject(xhr.responseText);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
var download = function(resource) {
|
|
|
|
// TODO
|
|
|
|
};
|
|
|
|
|
2018-04-24 01:03:50 +02:00
|
|
|
var initBindings = function() {
|
2018-04-24 01:23:06 +02:00
|
|
|
$searchForm.on('submit', function(event) {
|
2018-04-24 14:36:05 +02:00
|
|
|
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);
|
|
|
|
};
|
2018-04-24 01:03:50 +02:00
|
|
|
|
2018-04-24 14:36:05 +02:00
|
|
|
$input.prop('disabled', true);
|
|
|
|
$videoResults.text('Searching...');
|
2018-04-24 01:03:50 +02:00
|
|
|
|
2018-04-24 14:36:05 +02:00
|
|
|
if (resource.match(new RegExp('^https?://')) ||
|
|
|
|
resource.match(new RegExp('^file://'))) {
|
|
|
|
var videos = [{ url: resource }];
|
|
|
|
updateVideoResults(videos);
|
|
|
|
|
|
|
|
request = {
|
2018-04-24 01:03:50 +02:00
|
|
|
type: 'request',
|
2019-02-02 00:06:28 +01:00
|
|
|
action: 'media.play',
|
2018-04-24 14:36:05 +02:00
|
|
|
args: { resource: resource }
|
|
|
|
};
|
|
|
|
} else {
|
|
|
|
request = {
|
|
|
|
type: 'request',
|
2019-02-02 00:06:28 +01:00
|
|
|
action: 'media.search',
|
2018-04-24 14:36:05 +02:00
|
|
|
args: { query: resource }
|
|
|
|
};
|
2018-04-24 01:03:50 +02:00
|
|
|
|
2018-04-24 14:36:05 +02:00
|
|
|
onSuccess = function(response) {
|
|
|
|
var videos = response.response.output;
|
|
|
|
updateVideoResults(videos);
|
|
|
|
};
|
|
|
|
}
|
2018-04-24 01:03:50 +02:00
|
|
|
|
2018-04-24 14:36:05 +02:00
|
|
|
execute(request, onSuccess, onError, onComplete)
|
2018-04-24 01:03:50 +02:00
|
|
|
return false;
|
|
|
|
});
|
2018-04-24 01:23:06 +02:00
|
|
|
|
2018-04-24 01:30:04 +02:00
|
|
|
$ctrlForm.on('submit', function() { return false; });
|
2018-04-24 14:36:05 +02:00
|
|
|
$ctrlForm.find('button[data-action]').on('click touch', function(evt) {
|
2018-04-24 01:23:06 +02:00
|
|
|
var action = $(this).data('action');
|
|
|
|
var $btn = $(this);
|
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
var requestArgs = {
|
|
|
|
type: 'request',
|
|
|
|
action: 'media.' + action,
|
|
|
|
};
|
|
|
|
|
|
|
|
var selectedDevice = getSelectedDevice();
|
2019-02-08 00:43:43 +01:00
|
|
|
if (selectedDevice.isBrowser) {
|
|
|
|
return; // The in-browser player can be used to control media
|
|
|
|
}
|
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
if (selectedDevice.isRemote) {
|
|
|
|
requestArgs.action = 'media.chromecast.' + action;
|
|
|
|
requestArgs.args = { 'chromecast': selectedDevice.name };
|
|
|
|
}
|
|
|
|
|
|
|
|
execute(requestArgs);
|
2018-04-24 01:23:06 +02:00
|
|
|
});
|
2018-04-24 14:36:05 +02:00
|
|
|
|
|
|
|
$volumeCtrl.on('mousedown touchstart', function(event) {
|
|
|
|
prevVolume = $(this).val();
|
|
|
|
});
|
|
|
|
|
|
|
|
$volumeCtrl.on('mouseup touchend', function(event) {
|
2019-02-06 09:46:57 +01:00
|
|
|
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;
|
|
|
|
}
|
2018-04-24 14:36:05 +02:00
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
execute(requestArgs,
|
2018-04-24 14:36:05 +02:00
|
|
|
onSuccess=undefined,
|
|
|
|
onError = function() {
|
|
|
|
$volumeCtrl.val(prevVolume);
|
|
|
|
}
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2019-02-09 01:53:14 +01:00
|
|
|
$videoResults.on('mousedown touchstart', '.video-result', function() {
|
|
|
|
selectedResource = $(this).data('url');
|
|
|
|
});
|
2019-02-08 00:43:43 +01:00
|
|
|
|
2019-02-09 01:53:14 +01:00
|
|
|
$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
|
2019-02-06 09:46:57 +01:00
|
|
|
}
|
|
|
|
|
2019-02-09 01:53:14 +01:00
|
|
|
$item.siblings().removeClass('selected');
|
|
|
|
$item.addClass('selected');
|
2018-04-24 14:36:05 +02:00
|
|
|
|
2019-02-09 01:53:14 +01:00
|
|
|
$mediaItemPanel.css('top', (event.clientY + $(window).scrollTop()) + 'px');
|
|
|
|
$mediaItemPanel.css('left', (event.clientX + $(window).scrollLeft()) + 'px');
|
|
|
|
$mediaItemPanel.data('resource', resource);
|
2018-04-24 14:36:05 +02:00
|
|
|
});
|
2019-02-06 09:46:57 +01:00
|
|
|
|
|
|
|
$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() {
|
2019-02-08 19:48:18 +01:00
|
|
|
if ($(this).hasClass('disabled')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
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');
|
2019-02-08 19:48:18 +01:00
|
|
|
$devsBtnIcon.attr('class', $(this).find('.fa').attr('class'));
|
2019-02-06 09:46:57 +01:00
|
|
|
|
2019-02-08 19:48:18 +01:00
|
|
|
if ($(this).data('browser') || $(this).data('local')) {
|
2019-02-06 09:46:57 +01:00
|
|
|
$devsBtn.removeClass('remote');
|
2019-02-08 00:43:43 +01:00
|
|
|
} else {
|
|
|
|
$devsBtn.addClass('remote');
|
2019-02-06 09:46:57 +01:00
|
|
|
}
|
2019-02-08 00:43:43 +01:00
|
|
|
|
|
|
|
// TODO Logic for switching destination on the fly
|
2019-02-06 09:46:57 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
$devsPanel.hide();
|
|
|
|
$devsBtn.removeClass('selected');
|
|
|
|
});
|
2019-02-08 19:48:18 +01:00
|
|
|
|
|
|
|
$devsRefreshBtn.on('click', function() {
|
|
|
|
if ($(this).hasClass('disabled')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
$(this).addClass('disabled');
|
|
|
|
initRemoteDevices();
|
|
|
|
});
|
2019-02-09 01:53:14 +01:00
|
|
|
|
|
|
|
$mediaItemPanel.on('click', '[data-action]', function() {
|
|
|
|
if ($(this).hasClass('disabled')) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
var action = $(this).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');
|
|
|
|
});
|
|
|
|
});
|
2019-02-06 09:46:57 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
var initRemoteDevices = function() {
|
2019-02-08 19:48:18 +01:00
|
|
|
$devsList.find('.cast-device[data-remote]').addClass('disabled');
|
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
execute(
|
|
|
|
{
|
|
|
|
type: 'request',
|
|
|
|
action: 'media.chromecast.get_chromecasts',
|
|
|
|
},
|
|
|
|
|
|
|
|
function(results) {
|
2019-02-08 19:48:18 +01:00
|
|
|
$devsRefreshBtn.removeClass('disabled');
|
|
|
|
$devsList.find('.cast-device[data-remote]').remove();
|
|
|
|
|
2019-02-06 09:46:57 +01:00
|
|
|
if (!results || results.response.errors.length) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
results = results.response.output;
|
|
|
|
for (var cast of results) {
|
|
|
|
var $cast = $('<div></div>').addClass('row cast-device')
|
2019-02-08 19:48:18 +01:00
|
|
|
.addClass('cast-device-' + cast.type).attr('data-remote', true)
|
|
|
|
.data('name', cast.name);
|
2019-02-06 09:46:57 +01:00
|
|
|
|
|
|
|
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);
|
2019-02-08 19:48:18 +01:00
|
|
|
$cast.appendTo($devsList);
|
2019-02-06 09:46:57 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
2018-04-24 01:03:50 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
var init = function() {
|
2019-02-06 09:46:57 +01:00
|
|
|
initRemoteDevices();
|
2018-04-24 01:03:50 +02:00
|
|
|
initBindings();
|
|
|
|
};
|
|
|
|
|
|
|
|
init();
|
|
|
|
});
|
|
|
|
|