mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
add transition to remote control
This commit is contained in:
parent
c5b0fd9b79
commit
b73c66bd7f
8 changed files with 142 additions and 70 deletions
|
@ -4,7 +4,7 @@
|
||||||
<title>${TitleMediaBrowser}</title>
|
<title>${TitleMediaBrowser}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage" data-contextname="${TitleRemoteControl}">
|
<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage" data-contextname="${TitleRemoteControl}" data-theme="b">
|
||||||
|
|
||||||
<div class="libraryViewNav">
|
<div class="libraryViewNav">
|
||||||
<a href="#" class="ui-btn-active tabButton" data-tab="tabNowPlaying">${TabNowPlaying}</a>
|
<a href="#" class="ui-btn-active tabButton" data-tab="tabNowPlaying">${TabNowPlaying}</a>
|
||||||
|
@ -135,7 +135,7 @@
|
||||||
<div data-role="popup" id="popupSubtitleTrackMenu" data-transition="flip">
|
<div data-role="popup" id="popupSubtitleTrackMenu" data-transition="flip">
|
||||||
<div class="trackList"></div>
|
<div class="trackList"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chapterMenuOverlay" style="display: none;"></div>
|
<div class="chapterMenuOverlay" style="display: none;"></div>
|
||||||
<div class="chapterMenu" style="display: none;">
|
<div class="chapterMenu" style="display: none;">
|
||||||
<div class="chapterMenuInner">
|
<div class="chapterMenuInner">
|
||||||
|
@ -146,6 +146,7 @@
|
||||||
$('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
|
$('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
|
||||||
$('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);
|
$('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
function reload(page) {
|
function reload(page) {
|
||||||
|
|
||||||
|
unbindItemChanged(page);
|
||||||
Dashboard.showLoadingMsg();
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
var promise1 = MetadataEditor.getItemPromise();
|
var promise1 = MetadataEditor.getItemPromise();
|
||||||
|
@ -94,6 +95,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
Dashboard.hideLoadingMsg();
|
Dashboard.hideLoadingMsg();
|
||||||
|
bindItemChanged(page);
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -924,12 +926,16 @@
|
||||||
|
|
||||||
self.submitUpdatedItem = function (form, item) {
|
self.submitUpdatedItem = function (form, item) {
|
||||||
|
|
||||||
|
var page = $(form).parents('.page');
|
||||||
|
unbindItemChanged(page);
|
||||||
|
|
||||||
function afterContentTypeUpdated() {
|
function afterContentTypeUpdated() {
|
||||||
|
|
||||||
Dashboard.alert(Globalize.translate('MessageItemSaved'));
|
Dashboard.alert(Globalize.translate('MessageItemSaved'));
|
||||||
|
|
||||||
MetadataEditor.getItemPromise().done(function (i) {
|
MetadataEditor.getItemPromise().done(function (i) {
|
||||||
$(form).parents('.page').trigger('itemsaved', [i]);
|
page.trigger('itemsaved', [i]);
|
||||||
|
bindItemChanged(page);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1338,6 +1344,30 @@
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function onWebSocketMessageReceived(e, data) {
|
||||||
|
|
||||||
|
var msg = data;
|
||||||
|
|
||||||
|
if (msg.MessageType === "LibraryChanged") {
|
||||||
|
|
||||||
|
if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
|
||||||
|
|
||||||
|
console.log('Item updated - reloading metadata');
|
||||||
|
reload($.mobile.activePage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindItemChanged(page) {
|
||||||
|
|
||||||
|
$(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
|
||||||
|
}
|
||||||
|
|
||||||
|
function unbindItemChanged(page) {
|
||||||
|
|
||||||
|
$(ApiClient).off("websocketmessage", onWebSocketMessageReceived);
|
||||||
|
}
|
||||||
|
|
||||||
$(document).on('pageinit', "#editItemMetadataPage", function () {
|
$(document).on('pageinit', "#editItemMetadataPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
@ -1412,11 +1442,10 @@
|
||||||
|
|
||||||
}).on('pagehide', "#editItemMetadataPage", function () {
|
}).on('pagehide', "#editItemMetadataPage", function () {
|
||||||
|
|
||||||
|
var page = this;
|
||||||
$(LibraryBrowser).off('itemdeleting.editor');
|
$(LibraryBrowser).off('itemdeleting.editor');
|
||||||
|
|
||||||
var page = this;
|
unbindItemChanged(page);
|
||||||
|
|
||||||
reload(page);
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -508,59 +508,6 @@ function ticks_to_human(str) {
|
||||||
return time;
|
return time;
|
||||||
};
|
};
|
||||||
|
|
||||||
/******************************************************************************/
|
|
||||||
/*********************************** EASING ***********************************/
|
|
||||||
/******************************************************************************/
|
|
||||||
|
|
||||||
(function () {
|
|
||||||
|
|
||||||
// based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
|
|
||||||
|
|
||||||
var baseEasings = {};
|
|
||||||
|
|
||||||
$.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function (i, name) {
|
|
||||||
baseEasings[name] = function (p) {
|
|
||||||
return Math.pow(p, i + 2);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
$.extend(baseEasings, {
|
|
||||||
Sine: function (p) {
|
|
||||||
return 1 - Math.cos(p * Math.PI / 2);
|
|
||||||
},
|
|
||||||
Circ: function (p) {
|
|
||||||
return 1 - Math.sqrt(1 - p * p);
|
|
||||||
},
|
|
||||||
Elastic: function (p) {
|
|
||||||
return p === 0 || p === 1 ? p :
|
|
||||||
-Math.pow(2, 8 * (p - 1)) * Math.sin(((p - 1) * 80 - 7.5) * Math.PI / 15);
|
|
||||||
},
|
|
||||||
Back: function (p) {
|
|
||||||
return p * p * (3 * p - 2);
|
|
||||||
},
|
|
||||||
Bounce: function (p) {
|
|
||||||
var pow2,
|
|
||||||
bounce = 4;
|
|
||||||
|
|
||||||
while (p < ((pow2 = Math.pow(2, --bounce)) - 1) / 11) { }
|
|
||||||
return 1 / Math.pow(4, 3 - bounce) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - p, 2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$.each(baseEasings, function (name, easeIn) {
|
|
||||||
$.easing["easeIn" + name] = easeIn;
|
|
||||||
$.easing["easeOut" + name] = function (p) {
|
|
||||||
return 1 - easeIn(1 - p);
|
|
||||||
};
|
|
||||||
$.easing["easeInOut" + name] = function (p) {
|
|
||||||
return p < 0.5 ?
|
|
||||||
easeIn(p * 2) / 2 :
|
|
||||||
1 - easeIn(p * -2 + 2) / 2;
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
(function (window) {
|
(function (window) {
|
||||||
|
|
||||||
// Mimic Globalize api
|
// Mimic Globalize api
|
||||||
|
@ -582,4 +529,73 @@ function ticks_to_human(str) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
})(window);
|
})(window);
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
var supportTouch = $.support.touch,
|
||||||
|
scrollEvent = "touchmove scroll",
|
||||||
|
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
|
||||||
|
touchStopEvent = supportTouch ? "touchend" : "mouseup",
|
||||||
|
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
|
||||||
|
$.event.special.swipeupdown = {
|
||||||
|
setup: function () {
|
||||||
|
var thisObject = this;
|
||||||
|
var $this = $(thisObject);
|
||||||
|
$this.bind(touchStartEvent, function (event) {
|
||||||
|
var data = event.originalEvent.touches ?
|
||||||
|
event.originalEvent.touches[0] :
|
||||||
|
event,
|
||||||
|
start = {
|
||||||
|
time: (new Date).getTime(),
|
||||||
|
coords: [data.pageX, data.pageY],
|
||||||
|
origin: $(event.target)
|
||||||
|
},
|
||||||
|
stop;
|
||||||
|
|
||||||
|
function moveHandler(event) {
|
||||||
|
if (!start) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var data = event.originalEvent.touches ?
|
||||||
|
event.originalEvent.touches[0] :
|
||||||
|
event;
|
||||||
|
stop = {
|
||||||
|
time: (new Date).getTime(),
|
||||||
|
coords: [data.pageX, data.pageY]
|
||||||
|
};
|
||||||
|
|
||||||
|
// prevent scrolling
|
||||||
|
if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$this
|
||||||
|
.bind(touchMoveEvent, moveHandler)
|
||||||
|
.one(touchStopEvent, function (event) {
|
||||||
|
$this.unbind(touchMoveEvent, moveHandler);
|
||||||
|
if (start && stop) {
|
||||||
|
if (stop.time - start.time < 1000 &&
|
||||||
|
Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
|
||||||
|
Math.abs(start.coords[0] - stop.coords[0]) < 75) {
|
||||||
|
start.origin
|
||||||
|
.trigger("swipeupdown")
|
||||||
|
.trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
start = stop = undefined;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$.each({
|
||||||
|
swipedown: "swipeupdown",
|
||||||
|
swipeup: "swipeupdown"
|
||||||
|
}, function (event, sourceEvent) {
|
||||||
|
$.event.special[event] = {
|
||||||
|
setup: function () {
|
||||||
|
$(this).bind(sourceEvent, $.noop);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
})();
|
|
@ -506,7 +506,7 @@
|
||||||
html += '<div class="players"></div>';
|
html += '<div class="players"></div>';
|
||||||
|
|
||||||
html += '<br/>';
|
html += '<br/>';
|
||||||
html += '<p><a href="nowplaying.html" data-role="button" data-icon="remote">' + Globalize.translate('ButtonRemoteControl') + '</a></p>';
|
html += '<p><a href="nowplaying.html" data-role="button" data-icon="remote" data-transition="slideup">' + Globalize.translate('ButtonRemoteControl') + '</a></p>';
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
html += '<div class="nowPlayingBar" style="display:none;">';
|
html += '<div class="nowPlayingBar" style="display:none;">';
|
||||||
html += '<div style="display:inline-block;width:12px;"></div>';
|
html += '<div style="display:inline-block;width:12px;"></div>';
|
||||||
|
|
||||||
html += '<a class="mediaButton remoteControlButton" title="' + Globalize.translate('ButtonRemoteControl') + '" href="nowplaying.html" data-role="button" data-icon="remote" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonRemoteControl') + '</a>';
|
html += '<a class="mediaButton remoteControlButton" title="' + Globalize.translate('ButtonRemoteControl') + '" href="nowplaying.html" data-transition="slideup" data-role="button" data-icon="remote" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonRemoteControl') + '</a>';
|
||||||
|
|
||||||
html += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="' + Globalize.translate('ButtonPlaylist') + '">' + Globalize.translate('ButtonPlaylist') + '</a>';
|
html += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="' + Globalize.translate('ButtonPlaylist') + '">' + Globalize.translate('ButtonPlaylist') + '</a>';
|
||||||
html += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
|
html += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
|
||||||
|
@ -62,6 +62,10 @@
|
||||||
nowPlayingImageElement = $('.nowPlayingImage', elem);
|
nowPlayingImageElement = $('.nowPlayingImage', elem);
|
||||||
nowPlayingTextElement = $('.nowPlayingText', elem);
|
nowPlayingTextElement = $('.nowPlayingText', elem);
|
||||||
|
|
||||||
|
$(elem).on('swipeup', function () {
|
||||||
|
Dashboard.navigate('nowplaying.html');
|
||||||
|
});
|
||||||
|
|
||||||
unmuteButton = $('.unmuteButton', elem).on('click', function () {
|
unmuteButton = $('.unmuteButton', elem).on('click', function () {
|
||||||
|
|
||||||
if (currentPlayer) {
|
if (currentPlayer) {
|
||||||
|
@ -156,11 +160,11 @@
|
||||||
|
|
||||||
return elem;
|
return elem;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showButton(button) {
|
function showButton(button) {
|
||||||
button.removeClass('hide');
|
button.removeClass('hide');
|
||||||
}
|
}
|
||||||
|
|
||||||
function hideButton(button) {
|
function hideButton(button) {
|
||||||
button.addClass('hide');
|
button.addClass('hide');
|
||||||
}
|
}
|
||||||
|
@ -294,7 +298,7 @@
|
||||||
nowPlayingTextElement.html(nameHtml);
|
nowPlayingTextElement.html(nameHtml);
|
||||||
|
|
||||||
var url;
|
var url;
|
||||||
|
|
||||||
var nowPlayingItem = state.NowPlayingItem;
|
var nowPlayingItem = state.NowPlayingItem;
|
||||||
|
|
||||||
if (nowPlayingItem.PrimaryImageTag) {
|
if (nowPlayingItem.PrimaryImageTag) {
|
||||||
|
@ -338,7 +342,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
currentImgUrl = url;
|
currentImgUrl = url;
|
||||||
|
|
||||||
nowPlayingImageElement.html('<img src="' + url + '" />');
|
nowPlayingImageElement.html('<img src="' + url + '" />');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -405,8 +409,8 @@
|
||||||
|
|
||||||
var player = this;
|
var player = this;
|
||||||
|
|
||||||
player.getPlayerState().done(function(state) {
|
player.getPlayerState().done(function (state) {
|
||||||
|
|
||||||
if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
|
if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
@ -427,7 +431,7 @@
|
||||||
player.beginPlayerUpdates();
|
player.beginPlayerUpdates();
|
||||||
}
|
}
|
||||||
|
|
||||||
onStateChanged.call(player, {type: 'init'}, state);
|
onStateChanged.call(player, { type: 'init' }, state);
|
||||||
});
|
});
|
||||||
|
|
||||||
$(player).on('playbackstart.nowplayingbar', onPlaybackStart)
|
$(player).on('playbackstart.nowplayingbar', onPlaybackStart)
|
||||||
|
|
|
@ -365,6 +365,12 @@
|
||||||
currentPlayer.seek(Math.floor(newPositionTicks));
|
currentPlayer.seek(Math.floor(newPositionTicks));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(page).on('swipedown', function () {
|
||||||
|
|
||||||
|
document.title = new Date().getTime();
|
||||||
|
history.back();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onPlaybackStart(e, state) {
|
function onPlaybackStart(e, state) {
|
||||||
|
@ -592,6 +598,18 @@
|
||||||
updateSupportedCommands(page, supportedCommands);
|
updateSupportedCommands(page, supportedCommands);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showIntro() {
|
||||||
|
|
||||||
|
if (store.getItem('remotecontrolswipedown') != '1') {
|
||||||
|
Dashboard.alert({
|
||||||
|
message: Globalize.translate('MessageSwipeDownOnRemoteControl'),
|
||||||
|
title: Globalize.translate('HeaderAlert')
|
||||||
|
});
|
||||||
|
store.setItem('remotecontrolswipedown', '1');
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
$(document).on('pageinit', "#nowPlayingPage", function () {
|
$(document).on('pageinit', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
@ -615,6 +633,9 @@
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
showIntro();
|
||||||
|
|
||||||
}).on('pagehide', "#nowPlayingPage", function () {
|
}).on('pagehide', "#nowPlayingPage", function () {
|
||||||
|
|
||||||
releaseCurrentPlayer();
|
releaseCurrentPlayer();
|
||||||
|
|
|
@ -344,7 +344,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function initializeApiClient(apiClient) {
|
function initializeApiClient(apiClient) {
|
||||||
$(apiClient).on("websocketmessage", onWebSocketMessageReceived).on("websocketopen", onWebSocketConnectionChange);
|
$(apiClient).on("websocketmessage", onWebSocketMessageReceived).on("websocketopen", onWebSocketConnectionChange);
|
||||||
}
|
}
|
||||||
|
|
|
@ -209,6 +209,8 @@ $(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
|
||||||
|
|
||||||
html += '<ul data-role="listview" data-inset="true">';
|
html += '<ul data-role="listview" data-inset="true">';
|
||||||
|
|
||||||
|
html += '<li data-role="list-divider">' + Globalize.translate('HeaderUsers');
|
||||||
|
|
||||||
html += result.Users.map(getUserHtml).join('');
|
html += result.Users.map(getUserHtml).join('');
|
||||||
|
|
||||||
html += '</ul>';
|
html += '</ul>';
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue