mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-22 04:58:01 +01:00
Updated offline mode with a basic offline page
This commit is contained in:
Josef Citrine
parent
e4d270b794
commit
8b6b441edc
4 changed files with 325 additions and 19 deletions
|
|
@ -18,6 +18,8 @@
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"theme_color": "#84528A",
|
||||||
|
"background_color": "#EEE",
|
||||||
"start_url": "/",
|
"start_url": "/",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"orientation": "portrait"
|
"orientation": "portrait"
|
||||||
|
|
|
||||||
59
public/offline.html
Normal file
59
public/offline.html
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
<!--
|
||||||
|
~ Pony.fm - A community for pony fan music.
|
||||||
|
~ Copyright (C) 2016 Josef Citrine
|
||||||
|
~
|
||||||
|
~ This program is free software: you can redistribute it and/or modify
|
||||||
|
~ it under the terms of the GNU Affero General Public License as published by
|
||||||
|
~ the Free Software Foundation, either version 3 of the License, or
|
||||||
|
~ (at your option) any later version.
|
||||||
|
~
|
||||||
|
~ This program is distributed in the hope that it will be useful,
|
||||||
|
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
~ GNU Affero General Public License for more details.
|
||||||
|
~
|
||||||
|
~ You should have received a copy of the GNU Affero General Public License
|
||||||
|
~ along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<title>Pony.fm - Unlimited Pony Music Hosting</title>
|
||||||
|
<meta name="description" content="Pony.fm is the world's largest collection of My Little Pony fan music. Enjoy unlimited uploads, streaming, and downloads!">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<meta name="theme-color" content="#84528A">
|
||||||
|
<link rel="manifest" href="/manifest.json">
|
||||||
|
<base href="/">
|
||||||
|
<link rel="stylesheet" href="/styles/offline.css">
|
||||||
|
<style type="text/css"></style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="mobile-header">
|
||||||
|
<a href="/" class="logo"><img src="/images/ponyfm-logo-white.svg"></a>
|
||||||
|
</div>
|
||||||
|
<div class="now-playing"></div>
|
||||||
|
</header>
|
||||||
|
<div class="site-body">
|
||||||
|
<ul class="sidebar">
|
||||||
|
<a href="/">
|
||||||
|
<img src="/images/ponyfm-logo-white.svg" class="logo">
|
||||||
|
</a>
|
||||||
|
<li class="x-attribution">
|
||||||
|
<a href="#">
|
||||||
|
<span>Powered by</span>
|
||||||
|
<img src="/images/ponyfm-logo-white.svg" alt="Pony.fm logo" title="Pony.fm">
|
||||||
|
<span>We're open-source!</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="site-content offline">
|
||||||
|
<h1>No connection :(</h1>
|
||||||
|
<p>Pony.fm needs an internet connection to work</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -14,34 +14,47 @@
|
||||||
// You should have received a copy of the GNU Affero General Public License
|
// You should have received a copy of the GNU Affero General Public License
|
||||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
var urlsToCache = [
|
|
||||||
'/',
|
|
||||||
'/build/styles/app.css',
|
|
||||||
'/build/scripts/app.js',
|
|
||||||
'/build/scripts/templates.js',
|
|
||||||
'/templates/directives/player.html',
|
|
||||||
'/templates/directives/search.html',
|
|
||||||
'/templates/directives/tracks-list.html',
|
|
||||||
'/templates/directives/users-list.html',
|
|
||||||
'/templates/directives/albums-list.html',
|
|
||||||
'/templates/directives/playlists-list.html',
|
|
||||||
'/templates/home/index.html',
|
|
||||||
|
|
||||||
|
var urlsToCache = [
|
||||||
|
'/offline.html',
|
||||||
|
'/styles/offline.css',
|
||||||
|
'/images/ponyfm-logo-white.svg'
|
||||||
];
|
];
|
||||||
|
|
||||||
var CACHE_NAME = 'pfm-cache-v1';
|
var CACHE_NAME = 'pfm-offline-v1';
|
||||||
|
|
||||||
// Set the callback for the install step
|
// Set the callback for the install step
|
||||||
self.addEventListener('install', function(event) {
|
self.addEventListener('install', function(event) {
|
||||||
// Doesn't do anything right now
|
|
||||||
// Could never get offline to fully
|
|
||||||
// work without bugs :(
|
|
||||||
|
|
||||||
// Perform install steps
|
// Perform install steps
|
||||||
event.waitUntil(
|
event.waitUntil(
|
||||||
caches.open(CACHE_NAME)
|
caches.open(CACHE_NAME)
|
||||||
.then(function(cache) {
|
.then(function(cache) {
|
||||||
console.log('Opened cache');
|
cache.addAll(urlsToCache);
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Delete old caches
|
||||||
|
self.addEventListener('activate', function (event) {
|
||||||
|
event.waitUntil(caches.keys().then(function (cacheNames) {
|
||||||
|
return Promise.all(cacheNames.map(function (cacheName) {
|
||||||
|
if (cacheName != CACHE_NAME) {
|
||||||
|
return caches.delete(cacheName);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Basic offline mode
|
||||||
|
// Just respond with an offline error page for now
|
||||||
|
self.addEventListener('fetch', function(event) {
|
||||||
|
event.respondWith(
|
||||||
|
caches.match(event.request).then(function(response) {
|
||||||
|
return response || fetch(event.request);
|
||||||
|
}).catch(function () {
|
||||||
|
if (event.request.mode == 'navigate') {
|
||||||
|
return caches.match('/offline.html');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
|
||||||
232
public/styles/offline.css
vendored
Normal file
232
public/styles/offline.css
vendored
Normal file
|
|
@ -0,0 +1,232 @@
|
||||||
|
/*
|
||||||
|
* Pony.fm - A community for pony fan music.
|
||||||
|
* Copyright (C) 2016 Josef Citrine
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html {
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 10px;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0px !important;
|
||||||
|
background: rgb(68, 68, 68);
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0px;
|
||||||
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.42857;
|
||||||
|
color: rgb(51, 51, 51);
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
article, aside, details, figcaption, figure, footer,
|
||||||
|
header, hgroup, main, menu, nav, section, summary {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.mobile-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
color: rgb(194, 136, 156);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border: 0px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.now-playing {
|
||||||
|
margin-left: 160px;
|
||||||
|
height: 64px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 500;
|
||||||
|
border-bottom: 1px solid rgb(188, 188, 188);
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin-top: 0px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
width: 160px;
|
||||||
|
height: 100%;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
font-size: 10pt;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
background: rgb(81, 81, 81);
|
||||||
|
}
|
||||||
|
.sidebar > a {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
width: 160px;
|
||||||
|
height: 64px;
|
||||||
|
line-height: 42px;
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
font-size: 24pt;
|
||||||
|
font-weight: lighter;
|
||||||
|
z-index: 600;
|
||||||
|
font-family: "Josefin Sans", sans-serif;
|
||||||
|
position: relative;
|
||||||
|
background: rgb(132, 82, 138);
|
||||||
|
}
|
||||||
|
.sidebar > a img.logo {
|
||||||
|
padding-left: 6px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 94%;
|
||||||
|
padding-top: 13px;
|
||||||
|
}
|
||||||
|
.sidebar li {
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
.sidebar li.x-attribution {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.sidebar li > a {
|
||||||
|
display: block;
|
||||||
|
padding: 10px 0px 10px 25px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
}
|
||||||
|
.sidebar li.x-attribution a {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.sidebar li.x-attribution span {
|
||||||
|
font-size: 90%;
|
||||||
|
text-transform: lowercase;
|
||||||
|
margin: 7px 0px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.sidebar li.x-attribution img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.site-content {
|
||||||
|
overflow: hidden;
|
||||||
|
margin-left: 160px;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgb(255, 255, 255);
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0px;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6,
|
||||||
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
|
font-family: inherit;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
h1, .h1, h2, .h2, h3, .h3 {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
h1, .h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
.site-content h1, .site-content h2 {
|
||||||
|
margin: 1px 1px 5px;
|
||||||
|
font-size: 15pt;
|
||||||
|
color: rgb(194, 136, 156);
|
||||||
|
line-height: normal;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.offline h1 {
|
||||||
|
font-size: 2.7em;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin: 0px 0px 10px;
|
||||||
|
}
|
||||||
|
.offline p {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.2em;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.site-body {
|
||||||
|
height: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.mobile-header {
|
||||||
|
display: block!important;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
background: #84528A;
|
||||||
|
height: 64px;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.mobile-header .logo {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: middle;
|
||||||
|
display: block;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
height: 50px;
|
||||||
|
width: 160px;
|
||||||
|
padding-top: 16px;
|
||||||
|
}
|
||||||
|
.mobile-header .logo>img {
|
||||||
|
max-height: 90%;
|
||||||
|
}
|
||||||
|
.now-playing {
|
||||||
|
margin-left: 0;
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1010;
|
||||||
|
box-shadow: 0 0 8px rgba(0,0,0,.5);
|
||||||
|
}
|
||||||
|
.track-player {
|
||||||
|
margin-right: 0!important;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.site-content {
|
||||||
|
margin-left: 0;
|
||||||
|
overflow: scroll;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.site-body {
|
||||||
|
padding-top: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue