mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-17 19:08:18 -07:00
update theme
This commit is contained in:
Luke Pulverenti
parent
5683e72c20
commit
a5f50a7663
@ -49,9 +49,9 @@
|
||||
}
|
||||
|
||||
if (options.title) {
|
||||
html += '<h2>';
|
||||
html += '<h3>';
|
||||
html += options.title;
|
||||
html += '</h2>';
|
||||
html += '</h3>';
|
||||
}
|
||||
|
||||
// There seems to be a bug with this in safari causing it to immediately roll up to 0 height
|
||||
@ -61,12 +61,15 @@
|
||||
html += '<paper-dialog-scrollable>';
|
||||
}
|
||||
|
||||
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly
|
||||
var renderIcon = options.items.filter(function (o) {
|
||||
var itemsWithIcons = options.items.filter(function(o) {
|
||||
return o.ironIcon;
|
||||
}).length;
|
||||
});
|
||||
|
||||
if (options.title && !renderIcon) {
|
||||
// If any items have an icon, give them all an icon just to make sure they're all lined up evenly
|
||||
var renderIcon = itemsWithIcons.length;
|
||||
var center = options.title && (!itemsWithIcons.length || itemsWithIcons.length != options.items.length);
|
||||
|
||||
if (center) {
|
||||
html += '<paper-menu style="text-align:center;">';
|
||||
} else {
|
||||
html += '<paper-menu>';
|
||||
@ -78,9 +81,13 @@
|
||||
html += '<paper-menu-item class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
|
||||
|
||||
if (option.ironIcon) {
|
||||
html += '<iron-icon icon="' + option.ironIcon + '"></iron-icon>';
|
||||
if (center) {
|
||||
html += '<iron-icon style="margin-right:.5em;" icon="' + option.ironIcon + '"></iron-icon>';
|
||||
} else {
|
||||
html += '<iron-icon icon="' + option.ironIcon + '"></iron-icon>';
|
||||
}
|
||||
}
|
||||
else if (renderIcon) {
|
||||
else if (renderIcon && !center) {
|
||||
html += '<iron-icon></iron-icon>';
|
||||
}
|
||||
html += '<span>' + option.name + '</span>';
|
||||
|
||||
64
dashboard-ui/themes/holiday/style.css
Normal file
64
dashboard-ui/themes/holiday/style.css
Normal file
@ -0,0 +1,64 @@
|
||||
.ui-body-b h1, .ui-body-b h2 {
|
||||
color: #E53A35;
|
||||
}
|
||||
|
||||
.holidayInfoButton {
|
||||
color: #E53A35 !important;
|
||||
}
|
||||
|
||||
.libraryViewNav .ui-btn-active {
|
||||
border-bottom-color: #AC3326 !important;
|
||||
color: #AC3326 !important;
|
||||
}
|
||||
|
||||
paper-button[raised].more {
|
||||
background: #AC3326;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader, .timeslotHeader {
|
||||
background: #cc3333 !important;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader {
|
||||
border-right-color: #cc3333 !important;
|
||||
}
|
||||
|
||||
paper-tabs #selectionBar, .playedIndicator {
|
||||
background-color: #cc3333 !important;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLink:hover {
|
||||
background: #AC3326;
|
||||
}
|
||||
|
||||
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
|
||||
background: #AC3326 !important;
|
||||
}
|
||||
|
||||
#snowflakeContainer {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.snowflake {
|
||||
padding-left: 15px;
|
||||
font-family: Cambria, Georgia, serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
position: fixed;
|
||||
color: #FFFFFF;
|
||||
user-select: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.snowflake:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.christmas .mainDrawer {
|
||||
background-image: url(https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/themes/holiday/drawer.jpg);
|
||||
background-size: cover;
|
||||
background-position: 60% center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
394
dashboard-ui/themes/holiday/theme.js
Normal file
394
dashboard-ui/themes/holiday/theme.js
Normal file
@ -0,0 +1,394 @@
|
||||
(function () {
|
||||
|
||||
var lastSound = 0;
|
||||
var iconCreated;
|
||||
var destroyed;
|
||||
var currentSound;
|
||||
|
||||
function onPageShow() {
|
||||
|
||||
if (!browserInfo.mobile) {
|
||||
|
||||
if (getHolidayTheme() == 'off') {
|
||||
return;
|
||||
}
|
||||
|
||||
var page = this;
|
||||
|
||||
Dashboard.importCss('themes/holiday/style.css');
|
||||
|
||||
if (!page.classList.contains('itemDetailPage')) {
|
||||
setBackdrop(page);
|
||||
}
|
||||
|
||||
if (lastSound == 0) {
|
||||
//playSound('http://github.com/MediaBrowser/Emby.Resources/raw/master/themes/halloween/monsterparadefade.mp3', .1);
|
||||
} else if ((new Date().getTime() - lastSound) > 30000) {
|
||||
playSound('http://github.com/MediaBrowser/Emby.Resources/raw/master/themes/holiday/sleighbells.wav');
|
||||
}
|
||||
|
||||
addSnowflakes();
|
||||
|
||||
addIcon();
|
||||
|
||||
setBodyClass();
|
||||
}
|
||||
}
|
||||
|
||||
function destroyTheme() {
|
||||
|
||||
document.documentElement.classList.remove('christmas');
|
||||
stopSnowflakes();
|
||||
|
||||
if (currentSound) {
|
||||
currentSound.stop();
|
||||
}
|
||||
|
||||
var holidayInfoButton = document.querySelector('.holidayInfoButton');
|
||||
if (holidayInfoButton) {
|
||||
holidayInfoButton.parentNode.removeChild(holidayInfoButton);
|
||||
}
|
||||
|
||||
Dashboard.removeStylesheet('themes/holiday/style.css');
|
||||
Backdrops.clear();
|
||||
}
|
||||
|
||||
var snowFlakesInitialized;
|
||||
function addSnowflakes() {
|
||||
|
||||
if (!snowFlakesInitialized) {
|
||||
snowFlakesInitialized = true;
|
||||
$(document.body).append('<div id="snowflakeContainer"><p class="snowflake">*</p></div>');
|
||||
generateSnowflakes();
|
||||
Events.on(MediaController, 'beforeplaybackstart', onPlaybackStart);
|
||||
}
|
||||
}
|
||||
|
||||
function onPlaybackStart() {
|
||||
|
||||
if (currentSound) {
|
||||
currentSound.stop();
|
||||
}
|
||||
|
||||
stopSnowflakes();
|
||||
}
|
||||
|
||||
function setBackdrop(page) {
|
||||
|
||||
if (!page.classList.contains('itemDetailPage')) {
|
||||
|
||||
if (getHolidayTheme() == 'christmas') {
|
||||
Backdrops.setBackdropUrl(page, 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/themes/holiday/bgc.jpg');
|
||||
} else {
|
||||
Backdrops.setBackdropUrl(page, 'https://raw.githubusercontent.com/MediaBrowser/Emby.Resources/master/themes/holiday/bg.jpg');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var holidayThemeKey = 'holidaytheme4';
|
||||
function getHolidayTheme() {
|
||||
return appStorage.getItem(holidayThemeKey);
|
||||
}
|
||||
|
||||
function setHolidayTheme(value) {
|
||||
appStorage.setItem(holidayThemeKey, value);
|
||||
setBodyClass();
|
||||
}
|
||||
|
||||
function setBodyClass() {
|
||||
if (getHolidayTheme() == 'christmas') {
|
||||
document.documentElement.classList.add('christmas');
|
||||
} else {
|
||||
document.documentElement.classList.remove('christmas');
|
||||
}
|
||||
}
|
||||
|
||||
function onIconClick(e) {
|
||||
|
||||
// todo: switch this to action sheet
|
||||
|
||||
var items = [];
|
||||
|
||||
var current = getHolidayTheme();
|
||||
|
||||
items.push({
|
||||
name: 'None',
|
||||
id: 'none',
|
||||
ironIcon: current == 'off' ? 'check' : null
|
||||
});
|
||||
items.push({
|
||||
name: 'Joy!',
|
||||
id: 'joy',
|
||||
ironIcon: current != 'off' && current != 'christmas' ? 'check' : null
|
||||
});
|
||||
|
||||
items.push({
|
||||
name: 'Christmas',
|
||||
id: 'christmas',
|
||||
ironIcon: current == 'christmas' ? 'check' : null
|
||||
});
|
||||
|
||||
require(['actionsheet'], function () {
|
||||
|
||||
ActionSheetElement.show({
|
||||
title: 'Happy holidays from the Emby team! Select your holiday theme:',
|
||||
items: items,
|
||||
callback: function (id) {
|
||||
|
||||
switch (id) {
|
||||
|
||||
case 'none':
|
||||
setHolidayTheme('off');
|
||||
destroyTheme();
|
||||
break;
|
||||
case 'joy':
|
||||
setHolidayTheme('');
|
||||
setBackdrop($($.mobile.activePage)[0]);
|
||||
break;
|
||||
case 'christmas':
|
||||
setHolidayTheme('christmas');
|
||||
setBackdrop($($.mobile.activePage)[0]);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function addIcon() {
|
||||
|
||||
if (iconCreated) {
|
||||
return;
|
||||
}
|
||||
|
||||
iconCreated = true;
|
||||
|
||||
var elem = document.createElement('paper-icon-button');
|
||||
elem.icon = 'info';
|
||||
elem.classList.add('holidayInfoButton');
|
||||
elem.addEventListener('click', onIconClick);
|
||||
|
||||
var viewMenuSecondary = document.querySelector('.viewMenuSecondary');
|
||||
|
||||
if (viewMenuSecondary) {
|
||||
viewMenuSecondary.insertBefore(elem, viewMenuSecondary.childNodes[0]);
|
||||
}
|
||||
}
|
||||
|
||||
pageClassOn('pageshow', "libraryPage", onPageShow);
|
||||
|
||||
function playSound(path, volume) {
|
||||
|
||||
require(['howler'], function (howler) {
|
||||
|
||||
var sound = new Howl({
|
||||
urls: [path],
|
||||
volume: volume || .3
|
||||
});
|
||||
|
||||
sound.play();
|
||||
currentSound = sound;
|
||||
lastSound = new Date().getTime();
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
(function () {
|
||||
|
||||
// The star of every good animation
|
||||
var requestAnimationFrame = window.requestAnimationFrame ||
|
||||
window.mozRequestAnimationFrame ||
|
||||
window.webkitRequestAnimationFrame ||
|
||||
window.msRequestAnimationFrame;
|
||||
|
||||
var transforms = ["transform",
|
||||
"msTransform",
|
||||
"webkitTransform",
|
||||
"mozTransform",
|
||||
"oTransform"];
|
||||
|
||||
var transformProperty = getSupportedPropertyName(transforms);
|
||||
|
||||
// Array to store our Snowflake objects
|
||||
var snowflakes = [];
|
||||
|
||||
// Global variables to store our browser's window size
|
||||
var browserWidth;
|
||||
var browserHeight;
|
||||
|
||||
// Specify the number of snowflakes you want visible
|
||||
var numberOfSnowflakes = 50;
|
||||
|
||||
// Flag to reset the position of the snowflakes
|
||||
var resetPosition = false;
|
||||
|
||||
//
|
||||
// It all starts here...
|
||||
//
|
||||
function setup() {
|
||||
window.addEventListener("resize", setResetFlag, false);
|
||||
}
|
||||
setup();
|
||||
|
||||
//
|
||||
// Vendor prefix management
|
||||
//
|
||||
function getSupportedPropertyName(properties) {
|
||||
for (var i = 0; i < properties.length; i++) {
|
||||
if (typeof document.body.style[properties[i]] != "undefined") {
|
||||
return properties[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
//
|
||||
// Constructor for our Snowflake object
|
||||
//
|
||||
function Snowflake(element, radius, speed, xPos, yPos) {
|
||||
|
||||
// set initial snowflake properties
|
||||
this.element = element;
|
||||
this.radius = radius;
|
||||
this.speed = speed;
|
||||
this.xPos = xPos;
|
||||
this.yPos = yPos;
|
||||
|
||||
// declare variables used for snowflake's motion
|
||||
this.counter = 0;
|
||||
this.sign = Math.random() < 0.5 ? 1 : -1;
|
||||
|
||||
// setting an initial opacity and size for our snowflake
|
||||
this.element.style.opacity = .1 + Math.random();
|
||||
this.element.style.fontSize = 12 + Math.random() * 50 + "px";
|
||||
}
|
||||
|
||||
//
|
||||
// The function responsible for actually moving our snowflake
|
||||
//
|
||||
Snowflake.prototype.update = function () {
|
||||
|
||||
// using some trigonometry to determine our x and y position
|
||||
this.counter += this.speed / 5000;
|
||||
this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
|
||||
this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
|
||||
|
||||
// setting our snowflake's position
|
||||
setTranslate3DTransform(this.element, Math.round(this.xPos), Math.round(this.yPos));
|
||||
|
||||
// if snowflake goes below the browser window, move it back to the top
|
||||
if (this.yPos > browserHeight) {
|
||||
this.yPos = -50;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// A performant way to set your snowflake's position
|
||||
//
|
||||
function setTranslate3DTransform(element, xPosition, yPosition) {
|
||||
var val = "translate3d(" + xPosition + "px, " + yPosition + "px" + ", 0)";
|
||||
element.style[transformProperty] = val;
|
||||
}
|
||||
|
||||
//
|
||||
// The function responsible for creating the snowflake
|
||||
//
|
||||
function generateSnowflakes() {
|
||||
|
||||
// get our snowflake element from the DOM and store it
|
||||
var originalSnowflake = document.querySelector(".snowflake");
|
||||
|
||||
// access our snowflake element's parent container
|
||||
var snowflakeContainer = originalSnowflake.parentNode;
|
||||
|
||||
// get our browser's size
|
||||
browserWidth = document.documentElement.clientWidth;
|
||||
browserHeight = document.documentElement.clientHeight;
|
||||
|
||||
// create each individual snowflake
|
||||
for (var i = 0; i < numberOfSnowflakes; i++) {
|
||||
|
||||
// clone our original snowflake and add it to snowflakeContainer
|
||||
var snowflakeCopy = originalSnowflake.cloneNode(true);
|
||||
snowflakeContainer.appendChild(snowflakeCopy);
|
||||
|
||||
// set our snowflake's initial position and related properties
|
||||
var initialXPos = getPosition(50, browserWidth);
|
||||
var initialYPos = getPosition(50, browserHeight);
|
||||
var speed = 5 + Math.random() * 40;
|
||||
var radius = 4 + Math.random() * 10;
|
||||
|
||||
// create our Snowflake object
|
||||
var snowflakeObject = new Snowflake(snowflakeCopy,
|
||||
radius,
|
||||
speed,
|
||||
initialXPos,
|
||||
initialYPos);
|
||||
snowflakes.push(snowflakeObject);
|
||||
}
|
||||
|
||||
// remove the original snowflake because we no longer need it visible
|
||||
snowflakeContainer.removeChild(originalSnowflake);
|
||||
|
||||
// call the moveSnowflakes function every 30 milliseconds
|
||||
moveSnowflakes();
|
||||
}
|
||||
|
||||
var stopped = false;
|
||||
|
||||
window.generateSnowflakes = generateSnowflakes;
|
||||
window.stopSnowflakes = function () {
|
||||
stopped = true;
|
||||
$('.snowflake').remove();
|
||||
};
|
||||
|
||||
//
|
||||
// Responsible for moving each snowflake by calling its update function
|
||||
//
|
||||
function moveSnowflakes() {
|
||||
|
||||
if (stopped) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (var i = 0; i < snowflakes.length; i++) {
|
||||
var snowflake = snowflakes[i];
|
||||
snowflake.update();
|
||||
}
|
||||
|
||||
// Reset the position of all the snowflakes to a new value
|
||||
if (resetPosition) {
|
||||
browserWidth = document.documentElement.clientWidth;
|
||||
browserHeight = document.documentElement.clientHeight;
|
||||
|
||||
for (var i = 0; i < snowflakes.length; i++) {
|
||||
var snowflake = snowflakes[i];
|
||||
|
||||
snowflake.xPos = getPosition(50, browserWidth);
|
||||
snowflake.yPos = getPosition(50, browserHeight);
|
||||
}
|
||||
|
||||
resetPosition = false;
|
||||
}
|
||||
|
||||
requestAnimationFrame(moveSnowflakes);
|
||||
}
|
||||
|
||||
//
|
||||
// This function returns a number between (maximum - offset) and (maximum + offset)
|
||||
//
|
||||
function getPosition(offset, size) {
|
||||
return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
|
||||
}
|
||||
|
||||
//
|
||||
// Trigger a reset of all the snowflakes' positions
|
||||
//
|
||||
function setResetFlag(e) {
|
||||
resetPosition = true;
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user