mirror of
https://github.com/Poniverse/Pony.fm.git
synced 2024-11-21 20:48:00 +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"
|
||||
}
|
||||
],
|
||||
"theme_color": "#84528A",
|
||||
"background_color": "#EEE",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"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
|
||||
// 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
|
||||
self.addEventListener('install', function(event) {
|
||||
// Doesn't do anything right now
|
||||
// Could never get offline to fully
|
||||
// work without bugs :(
|
||||
|
||||
// Perform install steps
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME)
|
||||
.then(function(cache) {
|
||||
console.log('Opened cache');
|
||||
.then(function(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