Compare commits
1 Commits
master
...
header/met
| Author | SHA1 | Date |
|---|---|---|
 Icedream
|
1d23a5fa67
|
18
.babelrc
18
.babelrc
|
|
@ -1,12 +1,18 @@
|
||||||
{
|
{
|
||||||
"presets": [
|
"presets": [
|
||||||
[
|
["babel-preset-env", {
|
||||||
"@babel/preset-env",
|
|
||||||
{
|
|
||||||
"targets": {
|
"targets": {
|
||||||
"node": true
|
"node": true,
|
||||||
|
"uglify": false
|
||||||
}
|
}
|
||||||
}
|
}]
|
||||||
]
|
],
|
||||||
|
"plugins": [
|
||||||
|
"babel-plugin-dynamic-import-node",
|
||||||
|
"babel-plugin-syntax-export-extensions",
|
||||||
|
"babel-plugin-transform-class-properties",
|
||||||
|
"babel-plugin-transform-export-extensions",
|
||||||
|
"babel-plugin-transform-object-rest-spread",
|
||||||
|
"babel-plugin-transform-runtime"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -1,14 +1,3 @@
|
||||||
http://:80
|
http://:80
|
||||||
|
|
||||||
root /htdocs/
|
root /htdocs/
|
||||||
|
|
||||||
# Forward non-existent paths to original REKT server.
|
|
||||||
# See https://github.com/mholt/caddy/issues/695#issuecomment-201871982
|
|
||||||
rewrite {
|
|
||||||
to {path} /proxy/{uri}
|
|
||||||
}
|
|
||||||
proxy /proxy https://rekt.fm {
|
|
||||||
header_upstream Host rekt.fm
|
|
||||||
transparent
|
|
||||||
without /proxy
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,7 @@ if (env.BRANCH_NAME != "master") {
|
||||||
}
|
}
|
||||||
|
|
||||||
// How to access the swarm manager of the deployment infrastructure
|
// How to access the swarm manager of the deployment infrastructure
|
||||||
def dockerSwarmManagerUrl = 'tcp://dn-cos-docker-a.dmz.hzn-b.serverkomplex.de:2375'
|
def dockerSwarmManagerUrl = 'tcp://prod-docker-mgr.dmz.dreamnetwork.oss:2375'
|
||||||
def dockerSwarmManagerCredentials = 'docker_socket_project_gitea_icedream'
|
def dockerSwarmManagerCredentials = 'docker_socket_project_gitea_icedream'
|
||||||
|
|
||||||
// Docker image version tags
|
// Docker image version tags
|
||||||
|
|
|
||||||
|
|
@ -1,15 +1,16 @@
|
||||||
import postcssAutoprefixerPlugin from 'autoprefixer';
|
import postcssAutoprefixerPlugin from 'autoprefixer';
|
||||||
import postcssImportPlugin from 'postcss-import';
|
import postcssImportPlugin from 'postcss-import';
|
||||||
import postcssPresetEnvPlugin from 'postcss-preset-env';
|
import postcssPresetEnvPlugin from 'postcss-preset-env';
|
||||||
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
|
|
||||||
|
|
||||||
export default class Environment {
|
export default class Environment {
|
||||||
constructor(options = {}) {
|
constructor(options) {
|
||||||
this.development = true;
|
this.development = true;
|
||||||
this.production = false;
|
this.production = false;
|
||||||
this.server = false;
|
this.server = false;
|
||||||
this.docker = false;
|
this.docker = false;
|
||||||
|
|
||||||
|
this.locales = ['de'];
|
||||||
|
|
||||||
if (options !== undefined && options !== null) {
|
if (options !== undefined && options !== null) {
|
||||||
this.input(options);
|
this.input(options);
|
||||||
}
|
}
|
||||||
|
|
@ -66,16 +67,16 @@ export default class Environment {
|
||||||
|
|
||||||
// @HACK
|
// @HACK
|
||||||
// ExtractTextPlugin,
|
// ExtractTextPlugin,
|
||||||
// MiniCssExtractPlugin,
|
MiniCssExtractPlugin,
|
||||||
} = this;
|
} = this;
|
||||||
|
|
||||||
// if (!ExtractTextPlugin) {
|
// if (!ExtractTextPlugin) {
|
||||||
// throw new Error('Need a valid ExtractTextPlugin fed into the environment object.');
|
// throw new Error('Need a valid ExtractTextPlugin fed into the environment object.');
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// if (!MiniCssExtractPlugin) {
|
if (!MiniCssExtractPlugin) {
|
||||||
// throw new Error('Need a valid MiniCssExtractPlugin fed into the environment object.');
|
throw new Error('Need a valid MiniCssExtractPlugin fed into the environment object.');
|
||||||
// }
|
}
|
||||||
|
|
||||||
const cssLoaders = [
|
const cssLoaders = [
|
||||||
{
|
{
|
||||||
|
|
@ -84,9 +85,9 @@ export default class Environment {
|
||||||
importLoaders: 1,
|
importLoaders: 1,
|
||||||
sourceMap: true,
|
sourceMap: true,
|
||||||
modules: false,
|
modules: false,
|
||||||
// localIdentName: production
|
localIdentName: production
|
||||||
// ? '[name]__[local]--[hash:base64:5]'
|
? '[name]__[local]--[hash:base64:5]'
|
||||||
// : '[name]__[local]--[hash:base64:5]',
|
: '[name]__[local]--[hash:base64:5]',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -110,6 +111,7 @@ export default class Environment {
|
||||||
{
|
{
|
||||||
loader: 'resolve-url-loader',
|
loader: 'resolve-url-loader',
|
||||||
options: {
|
options: {
|
||||||
|
fail: true,
|
||||||
silent: false,
|
silent: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -121,7 +123,7 @@ export default class Environment {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (!server) {
|
if (!server) {
|
||||||
// const fallback = {
|
// const fallback = {
|
||||||
// loader: 'style-loader',
|
// loader: 'style-loader',
|
||||||
// };
|
// };
|
||||||
|
|
@ -129,15 +131,8 @@ export default class Environment {
|
||||||
// fallback,
|
// fallback,
|
||||||
// use: cssLoaders,
|
// use: cssLoaders,
|
||||||
// });
|
// });
|
||||||
// cssLoaders.unshift(MiniCssExtractPlugin.loader);
|
cssLoaders.unshift(MiniCssExtractPlugin.loader);
|
||||||
cssLoaders.unshift({
|
}
|
||||||
loader: MiniCssExtractPlugin.loader,
|
|
||||||
options: {
|
|
||||||
hmr: this.server,
|
|
||||||
// reloadAll: true,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// }
|
|
||||||
|
|
||||||
return cssLoaders;
|
return cssLoaders;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,5 +4,5 @@ if (process.env.NODE_ENV === 'production') {
|
||||||
process.exit(0);
|
process.exit(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
require('@babel/register');
|
require('babel-register');
|
||||||
require('./main');
|
require('./main');
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
109
package.json
109
package.json
|
|
@ -14,65 +14,70 @@
|
||||||
"lint:eslint": "eslint .",
|
"lint:eslint": "eslint .",
|
||||||
"postinstall": "node ./devtools/lockfiles",
|
"postinstall": "node ./devtools/lockfiles",
|
||||||
"prepublishOnly": "run-s build:production",
|
"prepublishOnly": "run-s build:production",
|
||||||
"start:webpack-dev-server": "nodemon --watch webpack.config.babel.js --watch config/webpack --watch browserslist --watch .browserslistrc --exec webpack-dev-server --mode development --env server --inline --hot",
|
"start:webpack-dev-server": "nodemon --watch webpack.config.babel.js --watch config/webpack --watch browserslist --watch .browserslistrc --exec webpack-dev-server --mode development --env development --hot --inline",
|
||||||
"start": "run-p start:*"
|
"start": "run-p start:*"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/cli": "^7.7.0",
|
"autoprefixer": "^8.6.5",
|
||||||
"@babel/core": "^7.7.2",
|
"babel-cli": "^6.26.0",
|
||||||
"@babel/preset-env": "^7.7.1",
|
"babel-core": "^6.26.3",
|
||||||
"@babel/register": "^7.7.0",
|
"babel-eslint": "^8.2.6",
|
||||||
"autoprefixer": "^9.7.2",
|
"babel-loader": "^7.1.5",
|
||||||
"babel-eslint": "^10.0.3",
|
"babel-plugin-dynamic-import-node": "^2.0.0",
|
||||||
"babel-loader": "^8.0.6",
|
"babel-plugin-dynamic-import-webpack": "^1.0.2",
|
||||||
"better-npm-run": "^0.1.1",
|
"babel-plugin-syntax-export-extensions": "^6.13.0",
|
||||||
"browserslist": "^4.7.3",
|
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||||
"case-sensitive-paths-webpack-plugin": "^2.2.0",
|
"babel-plugin-transform-export-extensions": "^6.22.0",
|
||||||
"chalk": "^3.0.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"core-js": "3.x",
|
"babel-plugin-transform-runtime": "^6.23.0",
|
||||||
"css-loader": "^3.2.0",
|
"babel-polyfill": "^6.26.0",
|
||||||
"cssnano": "^4.1.10",
|
"babel-preset-env": "^1.7.0",
|
||||||
"debug": "^4.1.1",
|
"babel-register": "^6.26.0",
|
||||||
"eslint": "6",
|
"better-npm-run": "^0.1.0",
|
||||||
"eslint-config-airbnb-base": "^14.0.0",
|
"browserslist": "^4.0.0",
|
||||||
"eslint-plugin-babel": "^5.3.0",
|
"case-sensitive-paths-webpack-plugin": "^2.1.2",
|
||||||
"eslint-plugin-import": "^2.18.2",
|
"chalk": "^2.4.1",
|
||||||
"eslint-plugin-json": "^2.0.1",
|
"css-loader": "^1.0.0",
|
||||||
"execa": "^3.3.0",
|
"cssnano": "^4.0.1",
|
||||||
"file-loader": "^4.2.0",
|
"debug": "^3.1.0",
|
||||||
|
"eslint": "4",
|
||||||
|
"eslint-config-airbnb-base": "^13.0.0",
|
||||||
|
"eslint-plugin-babel": "^5.1.0",
|
||||||
|
"eslint-plugin-import": "^2.13.0",
|
||||||
|
"eslint-plugin-json": "^1.2.0",
|
||||||
|
"execa": "^0.10.0",
|
||||||
|
"file-loader": "^1.1.11",
|
||||||
"html-webpack-plugin": "^3.2.0",
|
"html-webpack-plugin": "^3.2.0",
|
||||||
"image-webpack-loader": "^6.0.0",
|
"jimp": "^0.2.28",
|
||||||
"jimp": "^0.8.5",
|
"mini-css-extract-plugin": "^0.4.1",
|
||||||
"mini-css-extract-plugin": "^0.8.0",
|
"node-sass": "^4.9.2",
|
||||||
"node-sass": "^4.13.0",
|
"nodemon": "^1.18.1",
|
||||||
"nodemon": "^1.19.4",
|
|
||||||
"normalize-scss": "^7.0.1",
|
"normalize-scss": "^7.0.1",
|
||||||
"npm-run-all": "^4.1.5",
|
"npm-run-all": "^4.1.3",
|
||||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
"optimize-css-assets-webpack-plugin": "^4.0.3",
|
||||||
"postcss-import": "^12.0.1",
|
"postcss-import": "^11.1.0",
|
||||||
"postcss-loader": "^3.0.0",
|
"postcss-loader": "^2.1.6",
|
||||||
"postcss-preset-env": "^6.7.0",
|
"postcss-preset-env": "^5.2.1",
|
||||||
"postcss-safe-parser": "^4.0.1",
|
"postcss-safe-parser": "^3.0.1",
|
||||||
"progress-bar-webpack-plugin": "^1.12.1",
|
"progress-bar-webpack-plugin": "^1.11.0",
|
||||||
"resolve-url-loader": "^3.1.1",
|
"resolve-url-loader": "^2.3.0",
|
||||||
"responsive-loader": "^1.2.0",
|
"responsive-loader": "^1.1.0",
|
||||||
"rimraf": "^3.0.0",
|
"rimraf": "^2.6.2",
|
||||||
"sass-lint": "^1.13.1",
|
"sass-lint": "^1.12.1",
|
||||||
"sass-loader": "^8.0.0",
|
"sass-loader": "^7.0.3",
|
||||||
"slash": "^3.0.0",
|
"slash": "^2.0.0",
|
||||||
"style-loader": "^1.0.0",
|
"style-loader": "^0.21.0",
|
||||||
"synp": "^1.7.0",
|
"synp": "^1.3.0",
|
||||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
"uglifyjs-webpack-plugin": "^1.2.7",
|
||||||
"url-loader": "^2.2.0",
|
"url-loader": "^1.0.1",
|
||||||
"webfontloader": "^1.6.28",
|
"webfontloader": "^1.6.28",
|
||||||
"webpack": "^4.41.2",
|
"webpack": "^4.16.0",
|
||||||
"webpack-cli": "^3.3.10",
|
"webpack-cli": "^3.0.8",
|
||||||
"webpack-dev-server": "^3.9.0",
|
"webpack-dev-server": "^3.1.4",
|
||||||
"webpack-hot-middleware": "^2.25.0",
|
"webpack-hot-middleware": "^2.22.2",
|
||||||
"webpack-merge": "^4.2.2",
|
"webpack-merge": "^4.1.3"
|
||||||
"webpack-userscript": "^2.3.1"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"typeface-orbitron": "^0.0.72"
|
"typeface-orbitron": "^0.0.54"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
25
src/.babelrc
25
src/.babelrc
|
|
@ -1,15 +1,24 @@
|
||||||
{
|
{
|
||||||
"presets": [
|
"presets": [
|
||||||
[
|
["babel-preset-env", {
|
||||||
"@babel/preset-env",
|
|
||||||
{
|
|
||||||
"targets": {
|
"targets": {
|
||||||
"browsers": ">1%"
|
"browsers": ">1%",
|
||||||
|
"uglify": false
|
||||||
},
|
},
|
||||||
"useBuiltIns": "usage",
|
|
||||||
"corejs": 3,
|
|
||||||
"modules": false
|
"modules": false
|
||||||
}
|
}],
|
||||||
]
|
"babel-preset-react"
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
"babel-plugin-dynamic-import-node",
|
||||||
|
"babel-plugin-syntax-export-extensions",
|
||||||
|
"babel-plugin-transform-class-properties",
|
||||||
|
"babel-plugin-transform-export-extensions",
|
||||||
|
"babel-plugin-transform-react-constant-elements",
|
||||||
|
["babel-plugin-transform-runtime", {
|
||||||
|
"helpers": false,
|
||||||
|
"polyfill": false,
|
||||||
|
"regenerator": true
|
||||||
|
}]
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
@ -1,3 +1,10 @@
|
||||||
@import 'header/nav';
|
@import 'header/nav';
|
||||||
@import 'header/meta';
|
@import 'header/meta';
|
||||||
@import 'header/player';
|
@import 'header/player';
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,2 @@
|
||||||
@import 'main/page';
|
@import 'main/page';
|
||||||
@import 'main/smoke';
|
@import 'main/smoke';
|
||||||
|
|
||||||
#main {
|
|
||||||
background-image: url(./images/decay.png);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: 50%;
|
|
||||||
background-color: #000;
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
@mixin saturate-from-red($brightness: 250%, $saturate: 45%) {
|
|
||||||
filter: hue-rotate(220deg) brightness($brightness) saturate($saturate);
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin saturate-from-blue($brightness: 250%, $saturate: 45%) {
|
|
||||||
filter: brightness($brightness) saturate($saturate);
|
|
||||||
}
|
|
||||||
|
|
@ -11,21 +11,17 @@ $icedream-text-color: #EEE !default;
|
||||||
$icedream-extended-line-height: 5vmin !default;
|
$icedream-extended-line-height: 5vmin !default;
|
||||||
|
|
||||||
// extra features
|
// extra features
|
||||||
$icedream-saturation: true !default;
|
|
||||||
$icedream-metadata-overlay: false !default;
|
$icedream-metadata-overlay: false !default;
|
||||||
$icedream-metadata-overlay-background-gradient-from: #000 !default;
|
$icedream-metadata-overlay-background-gradient-from: #000 !default;
|
||||||
$icedream-metadata-overlay-background-gradient-to: transparent !default;
|
$icedream-metadata-overlay-background-gradient-to: transparent !default;
|
||||||
$icedream-metadata-prefix: '🎶 Now playing:\00a0 ' !default;
|
$icedream-metadata-prefix: '🎶 Now playing: ' !default;
|
||||||
$icedream-nav-tab-fix: false !default;
|
$icedream-nav-tab-fix: false !default;
|
||||||
$icedream-nav-bg-fade: true !default;
|
$icedream-nav-bg-fade: true !default;
|
||||||
$icedream-fog-base-opacity: 0.15 !default;
|
|
||||||
$icedream-fog-bg: true !default;
|
$icedream-fog-bg: true !default;
|
||||||
$icedream-fog-bg-blur: false !default;
|
$icedream-fog-bg-blur: false !default;
|
||||||
$icedream-fog-bg-animated: true !default;
|
$icedream-fog-bg-animated: true !default;
|
||||||
$icedream-fog-bg-pulse: true !default;
|
$icedream-fog-bg-animation-length: 30s !default;
|
||||||
$icedream-fog-bg-pulse-animation-length: 68s !default;
|
$icedream-station-fill-background-color: rgba(255, 255, 255, .1);
|
||||||
$icedream-fog-bg-slide-animation-length: 25s !default;
|
|
||||||
$icedream-station-fill-background-color: rgba(255, 255, 255, .1) !default;
|
|
||||||
|
|
||||||
$rekt-tab-count: 4 !default;
|
$rekt-tab-count: 4 !default;
|
||||||
$rekt-border-color: #AAA !default;
|
$rekt-border-color: #AAA !default;
|
||||||
|
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
window.addEventListener("load", () => {
|
|
||||||
document.body.classList.add("icedream");
|
|
||||||
});
|
|
||||||
|
|
@ -2,7 +2,12 @@
|
||||||
@import 'meta/prefix';
|
@import 'meta/prefix';
|
||||||
|
|
||||||
// currently playing track metadata
|
// currently playing track metadata
|
||||||
.meta {
|
#meta {
|
||||||
|
margin-top: 2vmin;
|
||||||
|
margin-bottom: none;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
|
||||||
|
@include icedream-font;
|
||||||
color: $icedream-text-color;
|
color: $icedream-text-color;
|
||||||
line-height: $icedream-extended-line-height;
|
line-height: $icedream-extended-line-height;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,14 @@
|
||||||
@import 'nav/bgfade';
|
@import 'nav/bgfade';
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
|
margin-top: 1vmin;
|
||||||
|
flex: 0 0 100%;
|
||||||
|
|
||||||
|
@include icedream-font;
|
||||||
|
|
||||||
|
// push in some air
|
||||||
|
line-height: $icedream-extended-line-height;
|
||||||
|
|
||||||
> .active {
|
> .active {
|
||||||
// apply darker background and brighter text to content
|
// apply darker background and brighter text to content
|
||||||
background: $icedream-bg-color;
|
background: $icedream-bg-color;
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,5 @@
|
||||||
@import 'player/button';
|
// player container
|
||||||
@import 'player/slider';
|
#player {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-top: 2vmin;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// metadata overlay tweak
|
// metadata overlay tweak
|
||||||
@if $icedream-metadata-overlay {
|
@if $icedream-metadata-overlay {
|
||||||
.meta {
|
#meta {
|
||||||
margin: 0; // sass-lint:disable-line variable-for-property
|
margin: 0; // sass-lint:disable-line variable-for-property
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
@ -15,11 +15,9 @@
|
||||||
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$icedream-metadata-overlay-background-gradient-from}, endColorstr=#{$icedream-metadata-overlay-background-gradient-to});
|
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#{$icedream-metadata-overlay-background-gradient-from}, endColorstr=#{$icedream-metadata-overlay-background-gradient-to});
|
||||||
}
|
}
|
||||||
|
|
||||||
#main {
|
.page {
|
||||||
section {
|
&:not(#page_EQ) {
|
||||||
&:not(#pageEQ) {
|
|
||||||
height: calc(100% - 9vmin);
|
height: calc(100% - 9vmin);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@if $icedream-metadata-prefix {
|
@if $icedream-metadata-prefix {
|
||||||
#nowplaying {
|
#meta {
|
||||||
&::before {
|
&::before {
|
||||||
content: $icedream-metadata-prefix;
|
content: $icedream-metadata-prefix;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
#player {
|
|
||||||
.player_button {
|
|
||||||
@if $icedream-saturation {
|
|
||||||
@include saturate-from-red();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
#volumeSVG {
|
|
||||||
@if $icedream-saturation {
|
|
||||||
@include saturate-from-blue();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,24 +1,12 @@
|
||||||
@charset 'UTF-8';
|
@charset 'UTF-8';
|
||||||
|
|
||||||
@import 'mixins';
|
|
||||||
|
|
||||||
@import 'variables';
|
@import 'variables';
|
||||||
|
|
||||||
@import 'font';
|
@import 'font';
|
||||||
@import 'debug';
|
@import 'debug';
|
||||||
|
|
||||||
|
// wrap all rules in body{} to increase css rule specificity, relatively safe overriding without !important
|
||||||
$gradient-stop-0: #46c;
|
body {
|
||||||
$gradient-stop-1: #013;
|
|
||||||
$gradient-radial: rgba(64, 128, 255, 0.05);
|
|
||||||
|
|
||||||
body.rekt.icedream, body.archives.icedream {
|
|
||||||
--gradient-stop-0: #{$gradient-stop-0};
|
|
||||||
--gradient-stop-1: #{$gradient-stop-1};
|
|
||||||
--gradient-radial: #{$gradient-radial};
|
|
||||||
|
|
||||||
@include icedream-font;
|
|
||||||
|
|
||||||
@import 'header';
|
@import 'header';
|
||||||
@import 'main';
|
@import 'main';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB After Width: | Height: | Size: 328 KiB |
407
src/index.html
407
src/index.html
|
|
@ -1,360 +1,85 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
||||||
|
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
<head>
|
||||||
<script>
|
<title>Get REKT! - Rekt Network - 320kbps Post Apocalyptic Radio</title>
|
||||||
function gtag(){}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<meta charset="UTF-8"/>
|
<meta name=viewport content="width=device-width, initial-scale=0.75" />
|
||||||
<meta name="theme-color" content="#110F10">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"/>
|
<meta name="description" content="There are two choices left for you. Succumb to the mindset of the machine city? Or Get Rekt! On the Rekt Network's
|
||||||
<meta name="keywords" content="rekt, cyberpunk, rekt fm, dubstep, drum, bass, online radio, music, aesthetic, futurism, live, podcast, DJ, 320k, streaming, equalizer, equaliser, milkdrop, visualiser, visualizer, webaudio, webrtc, webirc, irc"/>
|
320kbps post apocalyptic radio streams" />
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
|
||||||
<title>Rekt Network - The Home of Cyberpunk Radio</title>
|
<meta property="og:url" content="https://rekt.network" />
|
||||||
<meta name="description" content="Stream and Listen to the Cyberpunk Music Radio. Featuring 320kbps Audio, Live DJs, IRC Chats & Custom Code. Programmed to hack your mind with Dubstep, Synthwave, DnB, EDM, Lo-Fi & Jazz">
|
<meta property="og:site_name" content="https://rekt.network" />
|
||||||
<link id="favicon" rel="shortcut icon" href="/static/img/favicon.png">
|
<meta property="og:type" content="music.radio_station" />
|
||||||
<link rel="manifest" href="manifest.json">
|
<meta property="og:audio:url" content="https://stream.rekt.network/live.mp3" />
|
||||||
<meta name="theme-color" content="#181818">
|
<meta property="og:title" content="Get REKT! - Rekt Network - 320kbps Post Apocalyptic Radio" />
|
||||||
|
<meta property="og:description" content="There are two choices left for you. Succumb to the mindset of the machine city? Or Get Rekt! On the Rekt Network's
|
||||||
|
320kbps post apocalyptic radio streams" />
|
||||||
|
<meta property="og:image" content="https://rekt.network/img/rekt_white.png" />
|
||||||
|
<meta property="fb:app_id" content="1000465486695949" />
|
||||||
|
|
||||||
<!--FACEBOOK-->
|
<meta name="twitter:card" content="player" />
|
||||||
<meta property="og:title" content="Rekt Network - The Home of Cyberpunk Radio">
|
<meta name="twitter:title" content="Rekt Network" />
|
||||||
<meta property="og:description" content="Stream and Listen to the Cyberpunk Music Radio. Featuring 320kbps Audio, Live DJs, IRC Chats & Custom Code. Programmed to hack your mind with Dubstep, Synthwave, DnB, EDM, Lo-Fi & Jazz">
|
<meta name="twitter:description" content="There are two choices left for you. Succumb to the mindset of the machine city? Or Get Rekt! On the Rekt Network's
|
||||||
<meta property="og:image" content="https://rekt.fm/static/img/logo.png">
|
320kbps post apocalyptic radio streams" />
|
||||||
<meta property="og:site_name" content="Rekt FM">
|
<meta name="twitter:player" content="https://rekt.network/player?station=live" />
|
||||||
<meta property="og:url" content="https://rekt.fm/?station=rekt">
|
<meta name="twitter:player:width" content="600" />
|
||||||
<meta property="fb:app_id" content="1000465486695949"/>
|
<meta name="twitter:player:height" content="100" />
|
||||||
<meta property="og:audio" content="https://rekt.fm/stream/rekt.m4a">
|
<meta name="twitter:image" content="https://rekt.network/img/rekt_white.png" />
|
||||||
<meta property="og:type" content="music.radio_station">
|
<meta name="twitter:player:stream" content="https://stream.rekt.network/live.mp3" />
|
||||||
|
<meta name="twitter:player:stream:content_type" content="audio/mpeg " />
|
||||||
<!--TWITTER-->
|
|
||||||
<meta name="twitter:title" content="Rekt Network - The Home of Cyberpunk Radio">
|
|
||||||
<meta name="twitter:description" content="Stream and Listen to the Cyberpunk Music Radio. Featuring 320kbps Audio, Live DJs, IRC Chats & Custom Code. Programmed to hack your mind with Dubstep, Synthwave, DnB, EDM, Lo-Fi & Jazz">
|
|
||||||
<meta name="twitter:image" content="https://rekt.fm/static/img/logo.png">
|
|
||||||
<meta name="twitter:url" content="https://rekt.fm/?station=rekt">
|
|
||||||
<meta name="twitter:site" content="@TheRektNetwork">
|
|
||||||
<meta name="twitter:creator" content="@TheRektNetwork">
|
|
||||||
<meta name="twitter:card" content="player">
|
|
||||||
<meta name="twitter:player" content="https://rekt.fm/player/?station=rekt">
|
|
||||||
<meta name="twitter:player:stream" content="https://rekt.fm/stream/rekt.m4a">
|
|
||||||
<meta name="twitter:player:stream:content_type" content="audio/aac">
|
|
||||||
<meta name="twitter:player:width" content="1200">
|
|
||||||
<meta name="twitter:player:height" content="900">
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://rekt.fm"/>
|
|
||||||
<link rel="apple-touch-icon" href="static/img/logo.png"/>
|
|
||||||
<link rel="apple-touch-startup-image" href="static/img/logo.png"/>
|
|
||||||
|
|
||||||
|
|
||||||
<script type="application/ld+json">
|
<link rel="shortcut icon" href="https://rekt.network/static/img/favicon.png">
|
||||||
{
|
<link rel="manifest" href="https://rekt.network/manifest.json" />
|
||||||
"@context": "http://schema.org",
|
|
||||||
"@graph": [{
|
|
||||||
"@type": "WebSite",
|
|
||||||
"@id": "https://rekt.fm/#website",
|
|
||||||
"name": "Rekt FM",
|
|
||||||
"description": "Rekt FM is an online radio platform providing 320kbps cyberpunk electronic music streams",
|
|
||||||
"url": "https://rekt.fm",
|
|
||||||
"genre": "Cyberpunk",
|
|
||||||
"keywords": "radio,music,cyberpunk,electronic,programming",
|
|
||||||
"accessMode": ["textual", "auditory", "visual", "musicOnVisual"],
|
|
||||||
"creator": {"@id": "https://rekt.fm/#person-z"},
|
|
||||||
"sourceOrganization": {"@id": "https://rekt.fm/#organization"}
|
|
||||||
}, {
|
|
||||||
"@type": "WebPage",
|
|
||||||
"@id": "https://rekt.fm/#webpage",
|
|
||||||
"name": "Rekt FM - Cyberpunk Radio",
|
|
||||||
"description": "Rekt FM is an online radio platform providing 320kbps cyberpunk electronic music streams",
|
|
||||||
"url": "https://rekt.fm",
|
|
||||||
"isPartOf":{"@id":"https://rekt.fm/#website"},
|
|
||||||
"genre": "Cyberpunk",
|
|
||||||
"audio": {
|
|
||||||
"@type": "AudioObject",
|
|
||||||
"@id": "https://rekt.fm/#audio-rekt",
|
|
||||||
"name": "rekt.m4a",
|
|
||||||
"description": "Rekt FM Cyberpunk Radio Stream",
|
|
||||||
"isAccessibleForFree": true,
|
|
||||||
"genre": "Cyberpunk",
|
|
||||||
"bitrate": "320000",
|
|
||||||
"contentUrl": "https://rekt.fm/stream/rekt.m4a",
|
|
||||||
"embedUrl": "https://rekt.fm/stream/rekt.m4a",
|
|
||||||
"encodingFormat": "audio/aac",
|
|
||||||
"publication": [
|
|
||||||
{
|
|
||||||
"@type": "BroadcastEvent",
|
|
||||||
"isLiveBroadcast": true,
|
|
||||||
"startDate": "2019-06-29T00:00:00Z",
|
|
||||||
"endDate": "2022-06-29T00:00:00Z"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"discussionUrl": "https://rekt.fm/#Chat"
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
"@type": "Organization",
|
|
||||||
"@id": "https://rekt.fm/#organization",
|
|
||||||
"name": "Rekt FM",
|
|
||||||
"url": "https://rekt.fm",
|
|
||||||
"email": "info@rekt.fm",
|
|
||||||
"founder": {"@id": "https://rekt.fm/#person-z"},
|
|
||||||
"sameAs": [
|
|
||||||
"https://twitter.com/TheRektNetwork"
|
|
||||||
],
|
|
||||||
"parentOrganization": {"@id": "https://rekt.fm/#parent"}
|
|
||||||
}, {
|
|
||||||
"@type": "Organization",
|
|
||||||
"@id": "https://rekt.fm/#parent",
|
|
||||||
"name": "Rekt Network",
|
|
||||||
"url": "https://rekt.network",
|
|
||||||
"email": "info@rekt.network",
|
|
||||||
"founder": {"@id": "https://rekt.fm/#person-z"},
|
|
||||||
"sameAs": [
|
|
||||||
"https://twitter.com/TheRektNetwork"
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"@type": "RadioStation",
|
|
||||||
"@id": "https://rekt.fm/#radio-station",
|
|
||||||
"openingHours": ["Mo-Su"],
|
|
||||||
"brand": {"@id": "https://rekt.fm/#organization"},
|
|
||||||
"parentOrganization": {"@id": "https://rekt.fm/#organization"},
|
|
||||||
"name": "Rekt FM",
|
|
||||||
"url": "https://rekt.fm",
|
|
||||||
"email": "info@rekt.fm",
|
|
||||||
"founder": {"@id": "https://rekt.fm/#person-z"},
|
|
||||||
"image": "https://rekt.fm/static/img/logo.png",
|
|
||||||
"logo": "https://rekt.fm/static/img/logo.png",
|
|
||||||
"mainEntityOfPage": {"@id": "https://rekt.fm/#website"},
|
|
||||||
"sameAs": [
|
|
||||||
"https://twitter.com/TheRektNetwork"
|
|
||||||
]
|
|
||||||
}, {
|
|
||||||
"@type":"Person",
|
|
||||||
"@id": "https://rekt.fm/#person-z",
|
|
||||||
"name": "Z",
|
|
||||||
"email": "z@rekt.network"
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="static/css/main.css">
|
<link rel="stylesheet" href="https://rekt.network/static/css/slider.css" type="text/css" />
|
||||||
<noscript>
|
<link rel="stylesheet" href="https://rekt.network/static/css/style.css" type="text/css" />
|
||||||
<style>
|
<link rel="stylesheet" href="https://rekt.network/static/css/irc.css" type="text/css" />
|
||||||
header{
|
<link rel="stylesheet" href="https://rekt.network/static/theme/css/default.css" type="text/css" id="theme" />
|
||||||
box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary);
|
</head>
|
||||||
}
|
|
||||||
audio {
|
|
||||||
display:block;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!-- <link rel="stylesheet" href="static/css/rekt.css"> -->
|
|
||||||
</noscript>
|
|
||||||
|
|
||||||
</head>
|
<body class="table">
|
||||||
|
|
||||||
<body class="loading scanlines flicker">
|
|
||||||
<div class="overlay radial"></div>
|
|
||||||
<div class="overlay flicker"></div>
|
|
||||||
<div class="overlay scanlines"></div>
|
|
||||||
<div class="overlay scanline"></div>
|
|
||||||
<header>
|
<header>
|
||||||
<div class="headerTop fr">
|
<div id="player">
|
||||||
<div class="headerLeft">
|
<div id="player_play" class="player_button"></div>
|
||||||
|
<div id="player_stop" class="player_button" style="display:none;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="meta">
|
||||||
<div class="headerCenter" id="player" style="padding-bottom:2vmin;">
|
Loading Track Information
|
||||||
<div id="playerPlay" class="toggle f0">
|
|
||||||
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<polyline class="fill" id="playSVG" points="4.35,0 4.35,65 60.65,32.5"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="playerStop" class="toggle f0">
|
<nav id="nav">
|
||||||
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect class="fill" id="stopSVG" width="65" height="65"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div id="playerSlider" class="slider horizontal f0">
|
|
||||||
<svg id="volumeSVG" viewBox="0 0 780 65" height="65px" width="780px" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<defs>
|
|
||||||
<linearGradient id="rektGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="65">
|
|
||||||
<stop offset="0" stop-color="var(--gradient-stop-0, #FD0000)"/>
|
|
||||||
<stop offset="1" stop-color="var(--gradient-stop-1, #980000)"/>
|
|
||||||
</linearGradient>
|
|
||||||
<mask id="mask1">
|
|
||||||
<rect id="activeMask" x="0" y="0" width="780" height="65" fill="white" />
|
|
||||||
</mask>
|
|
||||||
<mask id="mask2">
|
|
||||||
<rect id="passiveMask" x="780" y="0" width="780" height="65" fill="white" />
|
|
||||||
</mask>
|
|
||||||
<g id="rektnetwork">
|
|
||||||
<path d="M 190.19957,-0.35100882 156.17143,30.906736 h 16.94948 l 34.02866,-31.25774482 z m 572.85646,0 -34.02865,31.25774482 h 16.94949 L 780.00552,-0.35100882 Z M 605.01544,2.2271461 c -8.85081,0 -16.30503,3.0292181 -22.36309,9.0873639 -6.01513,6.015183 -9.02278,13.448149 -9.02278,22.299056 0,8.764984 3.45874,16.197946 10.37616,22.299061 6.91742,6.058146 13.92048,9.087364 21.00971,9.087364 8.89382,0 16.34854,-3.007584 22.3637,-9.022767 6.01512,-6.015187 9.02225,-13.469784 9.02225,-22.363658 0,-8.764979 -3.07202,-16.176828 -9.21607,-22.234978 -6.144,-6.1011074 -13.53383,-9.1514419 -22.16988,-9.1514419 z M 6.7024813,2.355821 V 15.761303 H 32.54605 c 5.413624,0 9.817436,2.019306 13.211691,6.05807 2.878675,3.566145 4.318114,7.540377 4.318114,11.922872 h 13.469557 c 0,-8.764983 -3.072007,-16.176315 -9.216039,-22.234464 C 48.185341,5.4066695 40.795522,2.355821 32.159509,2.355821 Z m 290.6200087,0 v 62.64417 h 13.27575 V 33.678163 h 18.88324 z m 52.07368,0 v 31.322342 h -18.88323 l 32.15951,31.321828 V 2.355821 Z m 152.85013,0 v 62.64417 L 534.40584,33.678163 H 515.52262 V 2.355821 Z m 32.15954,31.322342 32.15951,31.321828 V 51.272567 2.355821 H 554.12673 V 33.678163 Z M 650.42595,2.355821 v 13.405482 h 25.84354 c 5.41364,0 9.81796,2.019306 13.21222,6.05807 2.87866,3.566145 4.31758,7.540377 4.31758,11.922872 h 13.46957 c 0,-8.764983 -3.07198,-16.176315 -9.21603,-22.234464 -6.14404,-6.1011115 -13.53386,-9.15196 -22.16988,-9.15196 z M 212.6025,2.4850062 V 15.632099 h 15.91852 l -0.0646,49.367885 h 27.1329 V 15.632106 h 15.33872 V 2.4850138 Z m 226.19714,0 V 15.632099 h 15.9185 l -0.0646,49.367885 h 27.1324 V 15.632106 h 15.33868 V 2.4850138 Z M 70.867501,2.5490696 V 15.632084 H 135.18652 V 2.5490696 Z m 297.064609,0 V 15.632084 h 64.31903 V 2.5490696 Z m 237.4699,13.0830144 c 5.41361,0 9.81792,2.019827 13.21219,6.058591 2.92167,3.566146 4.3822,7.540381 4.3822,11.922869 0,5.026974 -1.74022,9.280341 -5.22039,12.760554 -3.48018,3.480214 -7.60484,5.220392 -12.374,5.220392 -5.32769,0 -9.70986,-2.126944 -13.1471,-6.380537 -2.92163,-3.566138 -4.3827,-7.432744 -4.3827,-11.600409 0,-4.941042 1.71857,-9.173296 5.15577,-12.696472 3.48021,-3.523183 7.60488,-5.284988 12.37403,-5.284988 z M 70.867501,26.781871 70.674214,64.935372 135.1219,64.999965 V 51.852381 H 84.465732 V 39.929508 H 94.648649 V 26.781893 Z m 297.064609,0 -0.19378,38.153501 64.44818,0.06459 V 51.852354 H 381.53032 V 39.929482 h 10.18295 V 26.781893 Z M 0,33.742245 V 64.999991 H 13.469559 V 33.742245 Z m 14.436432,0 32.159508,31.257746 H 63.545412 L 31.385907,33.742245 Z m 127.427248,0 v 31.257746 h 13.53415 V 33.742245 Z m 14.30775,0 34.02814,31.257746 h 16.95 L 173.12091,33.742245 Z m 487.55201,0 v 31.257746 h 13.46958 V 33.742245 Z m 14.43643,0 32.15954,31.257746 h 16.94945 L 675.10935,33.742245 Z m 56.55978,0 v 31.257746 h 13.53413 V 33.742245 Z m 14.30773,0 34.02865,31.257746 h 16.94949 L 745.97687,33.742245 Z M 278.24082,56.363766 v 8.636225 h 9.92453 v -8.636225 z"/>
|
|
||||||
</g>
|
|
||||||
<pattern id="pattern" patternUnits="userSpaceOnUse" x="0" y="0" preserveAspectRatio="xMidYMid slice" viewBox="0 0 780 65" height="65px" width="780px">
|
|
||||||
<image id="imagePattern" x="0" y="0" width="100%" height="65px" xlink:href="#rektGradient" preserveAspectRatio="xMidYMid slice"/>
|
|
||||||
</pattern>
|
|
||||||
</defs>
|
|
||||||
<use xlink:href="#rektnetwork" x="0" y="0" style="fill:white;mask: url(#mask2)"></use>
|
|
||||||
<use id="rektNetworkActive" class="fill" xlink:href="#rektnetwork" x="0" y="0" style="mask: url(#mask1)"></use>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
<div id="playerSliderActive" style="width:100%">
|
|
||||||
<div id="speaker">
|
|
||||||
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M832 352v1088q0 26-19 45t-45 19-45-19l-333-333h-262q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45zm384 544q0 76-42.5 141.5t-112.5 93.5q-10 5-25 5-26 0-45-18.5t-19-45.5q0-21 12-35.5t29-25 34-23 29-36 12-56.5-12-56.5-29-36-34-23-29-25-12-35.5q0-27 19-45.5t45-18.5q15 0 25 5 70 27 112.5 93t42.5 142zm256 0q0 153-85 282.5t-225 188.5q-13 5-25 5-27 0-46-19t-19-45q0-39 39-59 56-29 76-44 74-54 115.5-135.5t41.5-173.5-41.5-173.5-115.5-135.5q-20-15-76-44-39-20-39-59 0-26 19-45t45-19q13 0 26 5 140 59 225 188.5t85 282.5zm256 0q0 230-127 422.5t-338 283.5q-13 5-26 5-26 0-45-19t-19-45q0-36 39-59 7-4 22.5-10.5t22.5-10.5q46-25 82-51 123-91 192-227t69-289-69-289-192-227q-36-26-82-51-7-4-22.5-10.5t-22.5-10.5q-39-23-39-59 0-26 19-45t45-19q13 0 26 5 211 91 338 283.5t127 422.5z" fill="#aaa"/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="headerRight">
|
|
||||||
|
|
||||||
<nav class="menu">
|
|
||||||
<button class="menu" id="navSettings" data-name="Settings" title="Settings">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd" d="M7,0 h2 v2 h2 v-1 h2 v2 h-1 v1 h1 v1 h1 v-1 h2 v2 h-1 v1 h-1 v2 h1 v1 h1 v2 h-2 v-1 h-1 v1 h-1 v1 h1 v2 h-2 v-1 h-2 v2 h-2 v-2 h-2 v1 h-2 v-2 h1 v-1 h-1 v-1 h-1 v1 h-2 v-2 h1 v-1 h1 v-2 h-1 v-1 h-1 v-2 h2 v1 h1 v-1 h1 v-1 h-1 v-2 h2 v1 h2 z M6,4 h4 v1 h1 v1 h1 v4 h-1 v1 h-1 v1 h-4 v-1 h-1 v-1 h-1 v-4 h1 v-1 h1 z M7,6 h2 v1 h1 v2 h-1 v1 h-2 v-1 h-1 v-2 h1 z"/>
|
|
||||||
</button>
|
|
||||||
</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="nowplayingDiv"class="headerBottom fr">
|
|
||||||
<div id="seek" class="meta">
|
|
||||||
<div class="npTime f0">
|
|
||||||
<a id="npTime" title="Progress"></a>
|
|
||||||
</div>
|
|
||||||
<h1 id="nowplaying">
|
|
||||||
<a id="npArtist" title="Rekt FM">Rekt FM</a>
|
|
||||||
<a id="npTitle" title="Cyberpunk Radio">The Home of Cyberpunk Radio</a>
|
|
||||||
</h1>
|
|
||||||
<div class="npTime f0">
|
|
||||||
<a id="npDuration" title="Duration"></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav id="nav" class="menu">
|
|
||||||
<a class="menu" id="navEQ" data-name="EQ" href="#EQ" title="Graphic Equalizer"><h2>EQ</h2></a>
|
|
||||||
<a class="menu" id="navMilkdrop" data-name="Milkdrop" href="#Milkdrop" title="Milkdrop Visualiser"><h2>Milkdrop</h2></a>
|
|
||||||
<a class="menu" id="navStations" data-name="Station" href="#Station" title="Radio Stations"><h2>Station</h2></a>
|
|
||||||
<a class="menu" id="navChat" data-name="Chat" href="#Chat" title="IRC Chatroom"><h2>Chat</h2></a>
|
|
||||||
<a class="menu" id="navArchive" data-name="Archive" href="#Archive" title="Archived Shows"><h2>Archive</h2></a>
|
|
||||||
<a class="menu" id="navReleases" data-name="Releases" href="#Releases" title="Music Releases"><h2>Releases</h2></a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main id="main">
|
<main id="main">
|
||||||
<section id="init" class="active init">
|
|
||||||
<noscript>
|
|
||||||
Please Enable JavaScript Then Jack-In
|
|
||||||
</noscript>
|
|
||||||
<audio id="audio" controls preload="none" src="/stream/rekt.m4a"></audio>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageEQ">
|
|
||||||
<canvas id="waves"></canvas>
|
|
||||||
<div id="eqs" class="fr">
|
|
||||||
<!-- Q-Values tuned to band crossover at -3dB -->
|
|
||||||
<div class="eq" data-f="31.25" data-type="lowshelf"></div>
|
|
||||||
<div class="eq" data-f="62.5" data-q="1"></div>
|
|
||||||
<div class="eq" data-f="125" data-q="2"></div>
|
|
||||||
<div class="eq" data-f="250" data-q="1.3333"></div>
|
|
||||||
<div class="eq" data-f="500" data-q="1.6"></div>
|
|
||||||
<div class="eq" data-f="1000" data-q="1.4545"></div>
|
|
||||||
<div class="eq" data-f="2000" data-q="1.5238"></div>
|
|
||||||
<div class="eq" data-f="4000" data-q="1.4884"></div>
|
|
||||||
<div class="eq" data-f="8000" data-q="1.5059"></div>
|
|
||||||
<div class="eq" data-f="10656.25" data-type="highshelf"></div>
|
|
||||||
</div>
|
|
||||||
<canvas id="bars"></canvas>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageMilkdrop" class="fr">
|
|
||||||
<canvas id="canvasMilkdrop"></canvas>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageStations">
|
|
||||||
<nav>
|
|
||||||
<a class="station" data-station="rekt" data-type="stream"><h3>REKT</h3></a>
|
|
||||||
<a class="station" data-station="nightride" data-type="stream"><h3>NIGHTRIDE</h3></a>
|
|
||||||
<a class="station" data-station="rektory" data-type="stream"><h3>REKTORY</h3></a>
|
|
||||||
<a class="station" data-station="rektify" data-type="stream"><h3>REKTIFY</h3></a>
|
|
||||||
<a class="station" data-station="archives" data-type="file"><h3>ARCHIVES</h3></a>
|
|
||||||
<a class="station" data-station="releases" data-type="file"><h3>RELEASES</h3></a>
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageChat">
|
|
||||||
<div>
|
|
||||||
<div class="fr">
|
|
||||||
<div id="chatMain" class="rtl">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="chatSide" class="container f0 auto">
|
|
||||||
<nav id="chatChannels" class="menu c r chanlist active">
|
|
||||||
<ol id="serverList">
|
|
||||||
<a class="channel title" data-channel="" title="irc.rekt.network">!Rekt.Network</a>
|
|
||||||
</ol>
|
|
||||||
<ol id="publicList">
|
|
||||||
<a class="channel title" data-channel="#rekt" data-active="1" title="rekt">#rekt</a>
|
|
||||||
</ol>
|
|
||||||
<ol id="privateList">
|
|
||||||
</ol>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="chatInput" class="f0 auto">
|
|
||||||
<input></input>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageArchive" class="fr">
|
|
||||||
<nav id="archiveMenu" class="menu c rtl">
|
|
||||||
<!-- <a class="title filter" data-station="all"><h3>ALL</h3></a>
|
|
||||||
<a class="title filter" data-station="rekt"><h3>REKT</h3></a>
|
|
||||||
<a class="title filter" data-station="nightride"><h3>NIGHTRIDE</h3></a>
|
|
||||||
<a class="title filter" data-station="rektory"><h3>REKTORY</h3></a>
|
|
||||||
<a class="title filter" data-station="rektify"><h3>REKTIFY</h3></a> -->
|
|
||||||
</nav>
|
|
||||||
<div id="archiveMain" class="container">
|
|
||||||
<!-- <section></section> -->
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageReleases" class="fr">
|
|
||||||
<nav id="releaseMenu"class="menu c rtl">
|
|
||||||
</nav>
|
|
||||||
<div id="releaseMain" class="container">
|
|
||||||
<!-- <section></section> -->
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="pageSettings">
|
|
||||||
<article id="About">
|
|
||||||
</article>
|
|
||||||
<nav id="pageSettingsNav">
|
|
||||||
<a class="setting" id="settingFlicker" title="Toggle CRT Flicker Effects"><h3>Flicker FX</h3></a>
|
|
||||||
<a class="setting" id="settingScanlines" title="Toggle Scanline Overlay Effects"><h3>Scanlines</h3></a>
|
|
||||||
<a class="setting" id="settingClearCache" title="Clear All Stored Data"><h3>Clear Cache</h3></a>
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
<script src="https://rekt.network/static/js/shaka.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/helper.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/slider.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/page.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/stream.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/eq.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/station.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/settings.js"></script>
|
||||||
|
|
||||||
|
<script src="https://rekt.network/static/js/fetch.js"></script>
|
||||||
|
<!-- <script src="https://rekt.network/static/js/meta_worker.js"></script> -->
|
||||||
|
<script src="https://rekt.network/static/js/meta.js"></script>
|
||||||
|
|
||||||
|
<script src="https://rekt.network/static/js/webrtc.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/irc.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://rekt.network/static/js/firebase-app.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/firebase-messaging.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/push.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/player.js"></script>
|
||||||
|
<script src="https://rekt.network/static/js/keybind.js"></script>
|
||||||
|
<script>
|
||||||
|
params = new URLSearchParams(location.search); // querystring parameters
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
<footer></footer>
|
|
||||||
</div>
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<script src="/static/js/helper.js"></script>
|
|
||||||
<script src="/static/js/slider.js"></script>
|
|
||||||
<script src="/static/js/station.js"></script>
|
|
||||||
<script src="/static/js/page.js"></script>
|
|
||||||
<script src="/static/js/webrtc.js"></script>
|
|
||||||
<script src="/static/js/chat.js"></script>
|
|
||||||
<script src="/static/js/eq.js"></script>
|
|
||||||
<script src="<%= require('!!file-loader!./rekt-embedded.js') %>"></script>
|
|
||||||
<script src="<%= require('!!file-loader!./dj.js') %>"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,64 +1,20 @@
|
||||||
@import 'page/meta_overlay_fix';
|
@import 'page/meta_overlay_fix';
|
||||||
@import 'page/stations';
|
@import 'page/stations';
|
||||||
|
|
||||||
section {
|
.page {
|
||||||
// background-color: #000;
|
// background-color: #000;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: $icedream-text-color;
|
color: $icedream-text-color;
|
||||||
|
|
||||||
&#pageEQ {
|
|
||||||
background: initial;
|
|
||||||
flex-direction: row;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
// NOTE - #bars is used by the website to determine the dimensions of the waveform canvas, do not set display: none on it or it will disappear on page resize!
|
|
||||||
|
|
||||||
#waves, #bars {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#waves {
|
|
||||||
@if $icedream-saturation {
|
|
||||||
@include saturate-from-red(300%, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#eqs {
|
|
||||||
z-index: 1;
|
|
||||||
padding: 20vh;
|
|
||||||
transition: opacity ease-out .33s, transform ease-out .33s;
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.75);
|
|
||||||
.slider {
|
|
||||||
background-color: rgba(0, 0, 0, .75);
|
|
||||||
}
|
|
||||||
.eq {
|
|
||||||
@if $icedream-saturation {
|
|
||||||
@include saturate-from-blue();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#bars {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
#eqs {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// seems like above colors get overwritten again when .active is added
|
// seems like above colors get overwritten again when .active is added
|
||||||
&.active {
|
&.active {
|
||||||
// background-color: #000;
|
// background-color: #000;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
color: $icedream-text-color;
|
color: $icedream-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// apply theme font to all pages but chat page (monospace!)
|
||||||
|
&:not(#page_Chat) {
|
||||||
|
@include icedream-font;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
opacity: $icedream-fog-base-opacity;
|
opacity: .2;
|
||||||
background-image: url('../images/whitefog.png');
|
background-image: url('../images/whitefog.png');
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
content: ' '; // sass-lint:disable-line variable-for-property
|
content: ' '; // sass-lint:disable-line variable-for-property
|
||||||
|
|
@ -30,31 +30,9 @@
|
||||||
@if $icedream-fog-bg-animated {
|
@if $icedream-fog-bg-animated {
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
@if $icedream-fog-bg-pulse {
|
animation: icedream-bg-slide linear $icedream-fog-bg-animation-length infinite;
|
||||||
animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite,
|
|
||||||
icedream-bg-pulse ease-in-out $icedream-fog-bg-pulse-animation-length infinite;
|
|
||||||
} @else {
|
|
||||||
animation: icedream-bg-slide linear $icedream-fog-bg-slide-animation-length infinite;
|
|
||||||
}
|
|
||||||
transform: scale(2, 1) translateX(0);
|
transform: scale(2, 1) translateX(0);
|
||||||
transform-origin: left;
|
transform-origin: left;
|
||||||
@keyframes icedream-bg-pulse {
|
|
||||||
0% {
|
|
||||||
opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
|
|
||||||
}
|
|
||||||
22% {
|
|
||||||
opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .12);
|
|
||||||
}
|
|
||||||
54% {
|
|
||||||
opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .15);
|
|
||||||
}
|
|
||||||
77% {
|
|
||||||
opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .5);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes icedream-bg-slide {
|
@keyframes icedream-bg-slide {
|
||||||
to {
|
to {
|
||||||
transform: scale(2, 1) translateX(-50%);
|
transform: scale(2, 1) translateX(-50%);
|
||||||
|
|
|
||||||
|
|
@ -1,521 +0,0 @@
|
||||||
|
|
||||||
["nav", "main",
|
|
||||||
"npTime", "npArtist", "npTitle", "npDuration",
|
|
||||||
"pageEQ", "navEQ",
|
|
||||||
"pageMilkdrop", "navMilkdrop", "canvasMilkdrop",
|
|
||||||
"pageStations", "navStations",
|
|
||||||
"pageChat", "navChat",
|
|
||||||
"pageArchive", "navArchive",
|
|
||||||
"pageReleases", "navReleases",
|
|
||||||
"pageSettings", "navSettings", "pageSettingsNav", "settingFlicker", "settingScanlines", "settingClearCache",
|
|
||||||
].forEach(val => {W[val] = I(val)});
|
|
||||||
|
|
||||||
var requestPermission = () => {};
|
|
||||||
var requested = false;
|
|
||||||
var context;
|
|
||||||
|
|
||||||
new Setting({
|
|
||||||
name: "settingFlicker",
|
|
||||||
body: settingFlicker,
|
|
||||||
init: !IS_MOBILE,
|
|
||||||
callback: (active) => {
|
|
||||||
if (active) {
|
|
||||||
D.body.classList.add("flicker")
|
|
||||||
} else {
|
|
||||||
D.body.classList.remove("flicker")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
new Setting({
|
|
||||||
name: "settingScanlines",
|
|
||||||
body: settingScanlines,
|
|
||||||
init: true,
|
|
||||||
callback: (active) => {
|
|
||||||
if (active) {
|
|
||||||
D.body.classList.add("scanlines")
|
|
||||||
} else {
|
|
||||||
D.body.classList.remove("scanlines")
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
function initEQ() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
["waves", "bars"].forEach(val => {W[val] = I(val)});
|
|
||||||
// reject("test");
|
|
||||||
audio.crossOrigin = "anonymous"
|
|
||||||
context = new AudioContext();
|
|
||||||
sourceNode = context.createMediaElementSource(audio);
|
|
||||||
|
|
||||||
if (!AnalyserNode.prototype.getFloatTimeDomainData) {
|
|
||||||
AnalyserNode.prototype.getFloatTimeDomainData = function(array) {
|
|
||||||
this.timeUint8Array = new Uint8Array(this.fftSize);
|
|
||||||
|
|
||||||
this.getFloatTimeDomainData = function(a) {
|
|
||||||
this.getByteTimeDomainData(this.timeUint8Array);
|
|
||||||
var i = 0;
|
|
||||||
while (i < this.fftSize) {
|
|
||||||
array[i++] = (this.timeUint8Array[i] - 128 ) * 0.0078125;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
this.getFloatTimeDomainData(array);
|
|
||||||
console.log("Initialised getFloatTimeDomainData");
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 10 band Graphic EQ'
|
|
||||||
let pBand = sourceNode;
|
|
||||||
Array.from(D.getElementsByClassName('eq')).forEach(band => {
|
|
||||||
let f = context.createBiquadFilter();
|
|
||||||
let type = band.dataset.type || "peaking";
|
|
||||||
f.type = type;
|
|
||||||
f.frequency.value = band.dataset.f;
|
|
||||||
if (band.dataset.q) {
|
|
||||||
f.Q.value = band.dataset.q
|
|
||||||
}
|
|
||||||
pBand.connect(f);
|
|
||||||
pBand = f;
|
|
||||||
|
|
||||||
new Slider(`eq_band_${band.dataset.f}`, band, (v)=>{f.gain.value = (v-0.5)*24}, 0.5, 'vertical');
|
|
||||||
});
|
|
||||||
pBand.connect(context.destination);
|
|
||||||
|
|
||||||
vis = new Visualiser(pBand, waves, bars);
|
|
||||||
this.activeFuncs.push(vis.start);
|
|
||||||
this.inactiveFuncs.push(vis.stop);
|
|
||||||
|
|
||||||
resolve("test");
|
|
||||||
// attach the audio element as a webaudio source last in case of an earlier error, because this will take over the source
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function initMilkdrop() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
Promise.all([
|
|
||||||
scriptLoad("static/js/butterchurn/butterchurn.min.js"),
|
|
||||||
scriptLoad("static/js/butterchurn/butterchurnExtraImages.min.js"),
|
|
||||||
scriptLoad("static/js/butterchurn/presets/butterchurnPresets.min.js"),
|
|
||||||
scriptLoad("static/js/butterchurn/presets/butterchurnPresetsExtra.min.js"),
|
|
||||||
scriptLoad("static/js/butterchurn/presets/butterchurnPresetsExtra2.min.js"),
|
|
||||||
])
|
|
||||||
.then(results => {
|
|
||||||
console.log("Loaded Scripts", results);
|
|
||||||
scriptLoad("static/js/butterchurn.js")
|
|
||||||
.then(r => {
|
|
||||||
console.log("MILKDROP", this);
|
|
||||||
butterVis = new ButterchurnVis(this, context, vis.analyser);
|
|
||||||
new Setting({
|
|
||||||
name:"settingPresetCycle",
|
|
||||||
heading: "Preset Autocycle",
|
|
||||||
title: "Toggle Milkdrop Preset Autocycle",
|
|
||||||
init: true,
|
|
||||||
callback: (active) => {
|
|
||||||
butterVis.cycle = active;
|
|
||||||
butterVis.initialised && butterVis.clearCycle();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
// Push page activation functions
|
|
||||||
this.activeFuncs.push(butterVis.start);
|
|
||||||
this.inactiveFuncs.push(butterVis.stop);
|
|
||||||
resolve(r);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.log("Script Loading Error", e);
|
|
||||||
reject(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initStations() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
Array.from(D.getElementsByClassName('station')).forEach(s => new Station(s));
|
|
||||||
!IS_BOT && startMeta();
|
|
||||||
resolve("test");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function onPopStations(params) {
|
|
||||||
let s = Station.map.get(params.get('station'));
|
|
||||||
if (s) {
|
|
||||||
s.setActive(true)
|
|
||||||
} else {
|
|
||||||
Station.map.values().next().value.setActive();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initChat() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
["chatSide", "chatMain", "chatInput", "serverList", "publicList", "privateList"].forEach(val => {W[val] = I(val)});
|
|
||||||
rektirc = new IRC({
|
|
||||||
side: chatSide,
|
|
||||||
section: chatMain,
|
|
||||||
input: chatInput,
|
|
||||||
feedURL: "/irc",
|
|
||||||
offerURL: "/offer",
|
|
||||||
serverList: serverList,
|
|
||||||
publicList: publicList,
|
|
||||||
privateList: privateList,
|
|
||||||
});
|
|
||||||
Array.from(D.getElementsByClassName('channel')).forEach(c => {
|
|
||||||
let chan = rektirc.createChan({name:c.dataset.channel, title:c});
|
|
||||||
c.dataset.active && chan.setActive();
|
|
||||||
});
|
|
||||||
this.activeFuncs.push(()=>{
|
|
||||||
Channel.active && Channel.active.scrollBottom();
|
|
||||||
if (rektirc.connected) {
|
|
||||||
Channel.active && Channel.active.input.input.focus();
|
|
||||||
} else {
|
|
||||||
rektirc.login.focus();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
resizeFuncs.push(chatResize);
|
|
||||||
resolve("test");
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function initArchive() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
["archiveMenu", "archiveMain"].forEach(val => {W[val] = I(val)});
|
|
||||||
fetch('/api/archives')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(r => {
|
|
||||||
console.log('Archives Result', r);
|
|
||||||
r.forEach(obj => new DJ({name:obj.N,data:obj,parent:{section:archiveMain}}));
|
|
||||||
resolve("test");
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
reject(e);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.activeFuncs.push(()=>{
|
|
||||||
if (!DJ.active) {
|
|
||||||
let dj = DJ.map.size && Array.from(DJ.map.values())[0];
|
|
||||||
dj && dj.setActive();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function onPopArchive(params) {
|
|
||||||
if (params.get('dj') || params.get('file')) {
|
|
||||||
let dj = DJ.map.get(params.get('dj'));
|
|
||||||
let file = ArchiveTrack.map.get(params.get('file'));
|
|
||||||
let t = params.get('t');
|
|
||||||
|
|
||||||
if (!file && dj) {
|
|
||||||
file = dj.children.values().next().value.children.values().next().value;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (file) {
|
|
||||||
file.setActive(true)
|
|
||||||
if (t) {
|
|
||||||
let position = parseFloat(t) / file.duration;
|
|
||||||
if (position < 1) {
|
|
||||||
file.setPosition(position);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initReleases() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
["releaseMenu", "releaseMain"].forEach(val => {W[val] = I(val)});
|
|
||||||
fetch('/api/releases')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(r => {
|
|
||||||
console.log('Releases Result', r);
|
|
||||||
r.forEach(obj => new Artist({name:obj.N,data:obj,parent:{section:releaseMain}}));
|
|
||||||
resolve("test");
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
reject(e);
|
|
||||||
});
|
|
||||||
|
|
||||||
this.activeFuncs.push(()=>{
|
|
||||||
if (!Artist.active) {
|
|
||||||
let artist = Artist.map.size && Array.from(Artist.map.values())[0];
|
|
||||||
artist && artist.setActive();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function onPopReleases(params) {
|
|
||||||
if (params.get('artist') || params.get('release') || params.get('track')) {
|
|
||||||
let artist = Artist.map.get(params.get('artist'));
|
|
||||||
console.log("ARTIST", artist);
|
|
||||||
let release = (artist && artist.children.get(params.get('release'))) || Release.map.get(params.get('release')) || artist && artist.children.values().next().value;
|
|
||||||
console.log("RELEASE", release);
|
|
||||||
let file = release && release.children.get(params.get('track')) || ReleaseTrack.map.get(params.get('track')) || release && release.children.values().next().value;;
|
|
||||||
file && file.setActive(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function initSettings() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
resolve(true);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function init() {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
var promises = [];
|
|
||||||
|
|
||||||
if (CAN_WEBAUDIO) {
|
|
||||||
// Set up EQ page
|
|
||||||
EQ = new Page({section:pageEQ, title:navEQ, init:initEQ});
|
|
||||||
promises.push(EQ.promise);
|
|
||||||
Milkdrop = undefined;
|
|
||||||
|
|
||||||
if (CAN_WEBGL) {
|
|
||||||
Milkdrop = new Page({section:pageMilkdrop, title:navMilkdrop, init:initMilkdrop});
|
|
||||||
promises.push(Milkdrop.promise);
|
|
||||||
Milkdrop.promise.then(() => {})
|
|
||||||
.catch(e => {
|
|
||||||
console.warn("Error initialising Milkdrop, disabling", e);
|
|
||||||
Page.map.delete(Milkdrop.index);
|
|
||||||
delete canvasMilkdrop;
|
|
||||||
delete Milkdrop;
|
|
||||||
removeEls([pageMilkdrop, navMilkdrop]);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
removeEls([pageMilkdrop, navMilkdrop]);
|
|
||||||
}
|
|
||||||
|
|
||||||
EQ.promise
|
|
||||||
.then(()=>{
|
|
||||||
Milkdrop && Milkdrop.init();
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.warn("Error initialising WebAudio API, disabling EQ and Milkdrop", e);
|
|
||||||
Page.map.delete(EQ.index);
|
|
||||||
delete EQ;
|
|
||||||
removeEls([pageEQ, navEQ, pageMilkdrop, navMilkdrop]);
|
|
||||||
});
|
|
||||||
|
|
||||||
EQ.init();
|
|
||||||
} else {
|
|
||||||
removeEls([pageEQ, navEQ, pageMilkdrop, navMilkdrop]);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Build Station Page
|
|
||||||
Stations = new Page({section:pageStations, title:navStations, init:initStations, pop:onPopStations});
|
|
||||||
promises.push(Stations.promise);
|
|
||||||
|
|
||||||
// Build Chat Page
|
|
||||||
Chat = new Page({section:pageChat, title:navChat, init:initChat});
|
|
||||||
promises.push(Chat.promise);
|
|
||||||
Chat.promise
|
|
||||||
.then(()=>{
|
|
||||||
!IS_BOT && rektirc.startFeed();
|
|
||||||
})
|
|
||||||
.catch(e=>{
|
|
||||||
console.warn("Error initialising Chat", e);
|
|
||||||
Page.map.delete(Chat.index);
|
|
||||||
delete Chat;
|
|
||||||
removeEls([pageChat, navChat]);
|
|
||||||
});
|
|
||||||
Chat.init();
|
|
||||||
|
|
||||||
// Build Archives Page
|
|
||||||
Archives = new Page({section:pageArchive, title:navArchive, init:initArchive, pop: onPopArchive});
|
|
||||||
promises.push(Archives.promise);
|
|
||||||
Archives.promise
|
|
||||||
.then(()=>{
|
|
||||||
// Activate latest archive
|
|
||||||
})
|
|
||||||
.catch(e=>{
|
|
||||||
console.warn("Error initialising Archives", e);
|
|
||||||
Page.map.delete(Archives.index);
|
|
||||||
delete Archives;
|
|
||||||
removeEls([pageArchive, navArchive]);
|
|
||||||
});
|
|
||||||
// Build Releases Page
|
|
||||||
Releases = new Page({section:pageReleases, title:navReleases, init:initReleases, pop:onPopReleases});
|
|
||||||
promises.push(Releases.promise);
|
|
||||||
Releases.promise
|
|
||||||
.then(()=>{
|
|
||||||
// Activate latest release
|
|
||||||
})
|
|
||||||
.catch(e=>{
|
|
||||||
console.warn("Error initialising Releases", e);
|
|
||||||
Page.map.delete(Releases.index);
|
|
||||||
delete Releases;
|
|
||||||
removeEls([pageReleases, navReleases]);
|
|
||||||
});
|
|
||||||
|
|
||||||
Settings = new Page({section:pageSettings, title:navSettings, init:initSettings, toggle:true});
|
|
||||||
promises.push(Settings.promise);
|
|
||||||
Settings.init();
|
|
||||||
|
|
||||||
Stations.promise
|
|
||||||
.then(()=>{
|
|
||||||
ArchiveTrack.station = Station.map.get("archives");
|
|
||||||
ReleaseTrack.station = Station.map.get("releases");
|
|
||||||
Archives.init();
|
|
||||||
Releases.init();
|
|
||||||
})
|
|
||||||
.catch(e=>{});
|
|
||||||
|
|
||||||
Stations.init();
|
|
||||||
|
|
||||||
Promise.all(promises)
|
|
||||||
.then(()=>{
|
|
||||||
resolve("All Promises Complete");
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
resolve("Something Went Wrong", e);
|
|
||||||
reject(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
init()
|
|
||||||
.then(e=>{
|
|
||||||
console.log(e);
|
|
||||||
})
|
|
||||||
.catch(e=>console.log(e));
|
|
||||||
|
|
||||||
// Player
|
|
||||||
["audio", "player", "playerPlay", "playerStop", "activeMask", "passiveMask", "volumeSVG", "playerSlider", "playerSliderActive", "nowplayingDiv", "seek"].forEach(val => {W[val] = I(val)});
|
|
||||||
const SVG_WIDTH = volumeSVG.width.baseVal.value;
|
|
||||||
|
|
||||||
// Slider Setup
|
|
||||||
volumeSlider = new Slider('volume', player, (v)=>{
|
|
||||||
audio.volume = v;
|
|
||||||
youtube && youtube.setVolume && youtube.setVolume(v * 100);
|
|
||||||
}, 1, 'horizontal', true);
|
|
||||||
volumeSlider.setValueSilent = function(value) {
|
|
||||||
this.value = clamp(1, value);
|
|
||||||
var x = this.value * SVG_WIDTH;
|
|
||||||
activeMask.setAttribute("width", x), passiveMask.setAttribute("x", x);
|
|
||||||
playerSliderActive.style.width = this.value*100 + '%';
|
|
||||||
sl(this.id, this.value);
|
|
||||||
}
|
|
||||||
volumeSlider.slider = volumeSVG;
|
|
||||||
volumeSlider.init();
|
|
||||||
|
|
||||||
// Playback Slider
|
|
||||||
seeker = new Slider('seek', seek, (v)=>{
|
|
||||||
Station.active && Station.active.file && Station.active.file.slider.setValue(v);
|
|
||||||
}, 0, 'horizontal', false);
|
|
||||||
|
|
||||||
|
|
||||||
// Player Functions
|
|
||||||
var stopTimeout;
|
|
||||||
function play(){
|
|
||||||
clearTimeout(stopTimeout);
|
|
||||||
let station = Station.active;
|
|
||||||
if (!station) {
|
|
||||||
station = Station.map.get("rekt");
|
|
||||||
station && station.setActive();
|
|
||||||
}
|
|
||||||
station && station.updateMediaSession();
|
|
||||||
let newSrc = station && station.src || "/stream/rekt.m4a";
|
|
||||||
if (!audio.src.endsWith(newSrc)) {
|
|
||||||
audio.src = newSrc;
|
|
||||||
audio.load();
|
|
||||||
console.log("Audio Loaded");
|
|
||||||
}
|
|
||||||
context && context.resume();
|
|
||||||
audio.play().catch(e => console.warn(e));
|
|
||||||
D.body.classList.add("playing");
|
|
||||||
playing = true;
|
|
||||||
youtube && youtube.stopVideo && youtube.stopVideo();
|
|
||||||
requestPermission();
|
|
||||||
}
|
|
||||||
function pause(){
|
|
||||||
audio.pause();
|
|
||||||
D.body.classList.remove("playing");
|
|
||||||
playing = false;
|
|
||||||
}
|
|
||||||
function stop(force){
|
|
||||||
audio.pause();
|
|
||||||
D.body.classList.remove("playing");
|
|
||||||
playing = false;
|
|
||||||
if (force) {
|
|
||||||
audio.src = '';
|
|
||||||
console.log("Audio Stopped");
|
|
||||||
} else {
|
|
||||||
stopTimeout = setTimeout(()=>{
|
|
||||||
audio.src = '';
|
|
||||||
console.log("Audio Stopped");
|
|
||||||
}, 10000)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function replay(e) {
|
|
||||||
if (playing) {
|
|
||||||
console.log("Restarting Stream");
|
|
||||||
stop(true);
|
|
||||||
play();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
audio.addEventListener('error', replay);
|
|
||||||
audio.addEventListener('stalled', replay);
|
|
||||||
audio.addEventListener('ended', (e) => Station.active.file && Station.active.file.ended(e));
|
|
||||||
audio.addEventListener('pause', (e) => Station.active.file && Station.active.file.pause(e));
|
|
||||||
audio.addEventListener('durationchange', (e) => Station.active.file && Station.active.file.durationchange(e));
|
|
||||||
audio.addEventListener('timeupdate', (e) => Station.active.file && Station.active.file.timeupdate(e));
|
|
||||||
|
|
||||||
playerPlay.addEventListener('click', play, false);
|
|
||||||
playerStop.addEventListener('click', stop, false);
|
|
||||||
|
|
||||||
if ('mediaSession' in N) {
|
|
||||||
Station.mediaSession = true;
|
|
||||||
N.mediaSession.setActionHandler('play', play);
|
|
||||||
N.mediaSession.setActionHandler('pause', stop);
|
|
||||||
|
|
||||||
N.mediaSession.setActionHandler('seekbackward', () => {
|
|
||||||
|
|
||||||
});
|
|
||||||
N.mediaSession.setActionHandler('seekforward', () => {
|
|
||||||
|
|
||||||
});
|
|
||||||
N.mediaSession.setActionHandler('previoustrack', () => {
|
|
||||||
|
|
||||||
});
|
|
||||||
N.mediaSession.setActionHandler('nexttrack', () => {
|
|
||||||
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
new Setting({
|
|
||||||
name: "settingClearCache",
|
|
||||||
body: settingClearCache,
|
|
||||||
toggle: false,
|
|
||||||
callback: () => {
|
|
||||||
W.localStorage && localStorage.clear();
|
|
||||||
let promises = []
|
|
||||||
W.caches && promises.push(caches.keys().then(cs=>cs.forEach(c=>caches.delete(c))));
|
|
||||||
|
|
||||||
N.serviceWorker && promises.push(N.serviceWorker.getRegistrations().then(rs=>{
|
|
||||||
rs.forEach(r=>r.unregister());
|
|
||||||
}));
|
|
||||||
console.log("Cache Clear!");
|
|
||||||
Promise.all(promises).finally(res => {
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
function getState(e, init) {
|
|
||||||
let params = new URLSearchParams(location.search);
|
|
||||||
let redir = params.get('redir');
|
|
||||||
let page = Page.map.get(redir);
|
|
||||||
if (page) {
|
|
||||||
W.history && W.history.replaceState({}, D.title, `#${redir}`)
|
|
||||||
} else {
|
|
||||||
let hash = location.hash.slice(1);
|
|
||||||
page = Page.map.get(hash) || Page.map.get("EQ");
|
|
||||||
}
|
|
||||||
page && page.setActive();
|
|
||||||
popStateFuncs.forEach(f => f(params));
|
|
||||||
}
|
|
||||||
W.onpopstate = getState;
|
|
||||||
getState(null, true);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Script has loaded
|
|
||||||
D.body.classList.replace("loading", "loaded");
|
|
||||||
|
|
@ -40,10 +40,12 @@ const {
|
||||||
ModuleConcatenationPlugin,
|
ModuleConcatenationPlugin,
|
||||||
} = optimize;
|
} = optimize;
|
||||||
|
|
||||||
const dj = 'icedream';
|
|
||||||
|
|
||||||
export default (options, { mode }) => {
|
export default (options, { mode }) => {
|
||||||
const environment = new Environment();
|
const environment = new Environment({
|
||||||
|
// @HACK
|
||||||
|
// ExtractTextPlugin,
|
||||||
|
MiniCssExtractPlugin,
|
||||||
|
});
|
||||||
|
|
||||||
environment.input(options);
|
environment.input(options);
|
||||||
environment.input(mode);
|
environment.input(mode);
|
||||||
|
|
@ -57,62 +59,39 @@ export default (options, { mode }) => {
|
||||||
docker,
|
docker,
|
||||||
} = environment;
|
} = environment;
|
||||||
|
|
||||||
const baseOutputFilepath = 'static/theme/[type]/[filename]';
|
const baseOutputFilename = development
|
||||||
const filenames = {
|
? 'assets/dev/[name].dev.[ext]'
|
||||||
css: '[name].[ext]',
|
|
||||||
default: development
|
|
||||||
? '[name].dev.[ext]'
|
|
||||||
// Always use a hash (in production) to prevent files with the same name causing issues
|
// Always use a hash (in production) to prevent files with the same name causing issues
|
||||||
: '[name].[chunkhash:8].[ext]',
|
: 'assets/prod/[chunkhash:2]/[name].[chunkhash:8].[ext]';
|
||||||
};
|
|
||||||
|
|
||||||
function replaceField(string, name, value) {
|
const webpackChunkFilename = baseOutputFilename
|
||||||
const retval = string.replace(new RegExp(`\\[${name}(.*?)\\]`), value);
|
.replace(/\[ext(.*?)\]/g, 'js');
|
||||||
debug('replaceField:', { args: { string, name, value } }, string, '=>', retval);
|
const webpackOutputFilename = webpackChunkFilename;
|
||||||
return retval;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getOutputFilename(type) {
|
const assetOutputFilename = baseOutputFilename
|
||||||
let filename = baseOutputFilepath;
|
.replace(/\[chunkhash(.*?)\]/g, '[hash$1]');
|
||||||
switch (type) {
|
|
||||||
case 'css':
|
|
||||||
filename = replaceField(filename, 'type', type);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
filename = replaceField(filename, 'type', `${type}/${dj}`);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
filename = replaceField(filename, 'filename', filenames[type] || filenames.default);
|
|
||||||
return filename;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAssetOutputFilename(type) {
|
const cssOutputFileName = baseOutputFilename
|
||||||
let filename = getOutputFilename(type);
|
|
||||||
filename = replaceField(filename, 'chunkhash', '[hash$1]');
|
|
||||||
return filename;
|
|
||||||
}
|
|
||||||
|
|
||||||
const cssOutputFileName = getOutputFilename('css')
|
|
||||||
.replace(/\[ext(.*?)\]/g, 'css');
|
.replace(/\[ext(.*?)\]/g, 'css');
|
||||||
// .replace(/\[chunkhash(.*?)\]/g, '[contenthash$1]');
|
// .replace(/\[chunkhash(.*?)\]/g, '[contenthash$1]');
|
||||||
const cssChunkOutputFileName = getOutputFilename('css')
|
const cssChunkOutputFileName = baseOutputFilename
|
||||||
.replace(/\[chunkhash(.*?)\]/g, '[id$1]')
|
.replace(/\[chunkhash(.*?)\]/g, '[id$1]')
|
||||||
.replace(/\[ext(.*?)\]/g, 'css');
|
.replace(/\[ext(.*?)\]/g, 'css');
|
||||||
// const cssOutputRebasePath = `${slash(path.relative(path.dirname(cssOutputFileName), ''))}/`;
|
// const cssOutputRebasePath = `${slash(path.relative(path.dirname(cssOutputFileName), ''))}/`;
|
||||||
const cssOutputRebasePath = '../../../';
|
const cssOutputRebasePath = '/';
|
||||||
|
|
||||||
// Default options for file-loader
|
// Default options for file-loader
|
||||||
const getFileLoaderOptions = type => ({
|
const fileLoaderOptions = {
|
||||||
name: getAssetOutputFilename(type),
|
name: assetOutputFilename,
|
||||||
publicPath: cssOutputRebasePath,
|
publicPath: cssOutputRebasePath,
|
||||||
});
|
};
|
||||||
|
|
||||||
// Default options for url-loader
|
// Default options for url-loader
|
||||||
const getUrlLoaderOptions = type => ({
|
const urlLoaderOptions = {
|
||||||
...getFileLoaderOptions(type),
|
...fileLoaderOptions,
|
||||||
// limit: 1, // Don't inline anything (but empty files) by default
|
// limit: 1, // Don't inline anything (but empty files) by default
|
||||||
limit: 4 * 1024,
|
limit: 4 * 1024,
|
||||||
});
|
};
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
name: 'frontend',
|
name: 'frontend',
|
||||||
|
|
@ -128,7 +107,7 @@ export default (options, { mode }) => {
|
||||||
historyApiFallback: {
|
historyApiFallback: {
|
||||||
index: '/',
|
index: '/',
|
||||||
},
|
},
|
||||||
hot: false,
|
hot: true,
|
||||||
https: !docker,
|
https: !docker,
|
||||||
noInfo: false,
|
noInfo: false,
|
||||||
overlay: true,
|
overlay: true,
|
||||||
|
|
@ -138,15 +117,6 @@ export default (options, { mode }) => {
|
||||||
watchOptions: {
|
watchOptions: {
|
||||||
ignored: /node_modules/,
|
ignored: /node_modules/,
|
||||||
},
|
},
|
||||||
proxy: {
|
|
||||||
'**': {
|
|
||||||
target: 'https://rekt.fm',
|
|
||||||
headers: {
|
|
||||||
Host: 'rekt.fm',
|
|
||||||
},
|
|
||||||
secure: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
module: {
|
module: {
|
||||||
|
|
@ -161,9 +131,32 @@ export default (options, { mode }) => {
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
options: {
|
options: {
|
||||||
// Look for babel configuration in project directory
|
// Look for babel configuration in project directory
|
||||||
babelrc: true,
|
babelrc: false,
|
||||||
// Cache transformations to the filesystem (in default temp dir)
|
// Cache transformations to the filesystem (in default temp dir)
|
||||||
cacheDirectory: true,
|
cacheDirectory: true,
|
||||||
|
|
||||||
|
presets: [
|
||||||
|
['babel-preset-env', {
|
||||||
|
targets: {
|
||||||
|
browsers: {},
|
||||||
|
uglify: false,
|
||||||
|
},
|
||||||
|
// spec: true,
|
||||||
|
// debug: development,
|
||||||
|
useBuiltIns: true,
|
||||||
|
modules: false, // do not transpile modules, webpack 2+ does that
|
||||||
|
}],
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
'babel-plugin-transform-class-properties',
|
||||||
|
'babel-plugin-transform-object-rest-spread',
|
||||||
|
['babel-plugin-transform-runtime', {
|
||||||
|
helpers: false,
|
||||||
|
polyfill: false,
|
||||||
|
regenerator: true,
|
||||||
|
}],
|
||||||
|
'babel-plugin-dynamic-import-webpack',
|
||||||
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -175,57 +168,22 @@ export default (options, { mode }) => {
|
||||||
/\.jpe?g$/i, // jpeg
|
/\.jpe?g$/i, // jpeg
|
||||||
].map(test => ({
|
].map(test => ({
|
||||||
test,
|
test,
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'url-loader',
|
loader: 'url-loader',
|
||||||
options: {
|
options: {
|
||||||
...getUrlLoaderOptions('img'),
|
...urlLoaderOptions,
|
||||||
// fallback: 'responsive-loader',
|
// fallback: 'responsive-loader',
|
||||||
},
|
},
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'image-webpack-loader',
|
|
||||||
options: {
|
|
||||||
mozjpeg: {
|
|
||||||
progressive: true,
|
|
||||||
quality: 80,
|
|
||||||
},
|
|
||||||
optipng: {
|
|
||||||
enabled: true,
|
|
||||||
optimizationLevel: 7,
|
|
||||||
},
|
|
||||||
pngquant: {
|
|
||||||
enabled: false,
|
|
||||||
quality: '65-85',
|
|
||||||
speed: 2,
|
|
||||||
strip: true,
|
|
||||||
},
|
|
||||||
gifsicle: {
|
|
||||||
interlaced: false,
|
|
||||||
},
|
|
||||||
disable: development,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
})),
|
})),
|
||||||
|
|
||||||
...[
|
...[
|
||||||
/\.(mp4|ogg|webm)$/i, // video
|
/\.(mp4|ogg|webm)$/i, // video
|
||||||
|
/\.(eot|otf|ttf|woff|woff2)$/i, // fonts
|
||||||
/\.(wav|mp3|m4a|aac|oga)$/i, // audio
|
/\.(wav|mp3|m4a|aac|oga)$/i, // audio
|
||||||
].map(test => ({
|
].map(test => ({
|
||||||
test,
|
test,
|
||||||
loader: 'url-loader',
|
loader: 'url-loader',
|
||||||
options: getUrlLoaderOptions('media'),
|
options: urlLoaderOptions,
|
||||||
})),
|
})),
|
||||||
|
|
||||||
...[
|
|
||||||
/\.(eot|otf|ttf|woff|woff2)$/i, // fonts
|
|
||||||
].map(test => ({
|
|
||||||
test,
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: getUrlLoaderOptions('font'),
|
|
||||||
})),
|
|
||||||
|
|
||||||
{
|
{
|
||||||
test: /\.css$/,
|
test: /\.css$/,
|
||||||
use: environment.styleLoaders(),
|
use: environment.styleLoaders(),
|
||||||
|
|
@ -247,8 +205,8 @@ export default (options, { mode }) => {
|
||||||
},
|
},
|
||||||
|
|
||||||
output: {
|
output: {
|
||||||
filename: replaceField(getOutputFilename('js'), 'ext', 'js'),
|
filename: webpackOutputFilename,
|
||||||
chunkFilename: replaceField(getOutputFilename('js'), 'ext', 'js'),
|
chunkFilename: webpackChunkFilename,
|
||||||
path: path.join(__dirname, 'dist'),
|
path: path.join(__dirname, 'dist'),
|
||||||
publicPath: '',
|
publicPath: '',
|
||||||
globalObject: 'this', // https://github.com/webpack-contrib/worker-loader/issues/142#issuecomment-385764803
|
globalObject: 'this', // https://github.com/webpack-contrib/worker-loader/issues/142#issuecomment-385764803
|
||||||
|
|
@ -283,44 +241,20 @@ export default (options, { mode }) => {
|
||||||
// Dev server build
|
// Dev server build
|
||||||
...[
|
...[
|
||||||
// Hot module reloading
|
// Hot module reloading
|
||||||
// new HotModuleReplacementPlugin(),
|
new HotModuleReplacementPlugin(),
|
||||||
new NoEmitOnErrorsPlugin(),
|
new NoEmitOnErrorsPlugin(),
|
||||||
|
|
||||||
// Use paths as names when serving
|
// Use paths as names when serving
|
||||||
new NamedModulesPlugin(),
|
new NamedModulesPlugin(),
|
||||||
].filter(() => server),
|
].filter(() => server),
|
||||||
|
|
||||||
// Extract imported stylesheets out into .css files
|
// If we're not serving, we're creating a static build
|
||||||
|
...[// Extract imported stylesheets out into .css files
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: cssOutputFileName,
|
filename: cssOutputFileName,
|
||||||
chunkFileName: cssChunkOutputFileName,
|
chunkFileName: cssChunkOutputFileName,
|
||||||
}),
|
}),
|
||||||
|
].filter(() => !server),
|
||||||
new HtmlPlugin({
|
|
||||||
template: path.join(__dirname, 'src', 'index.html'),
|
|
||||||
filename: 'index.html',
|
|
||||||
hash: false,
|
|
||||||
inject: "body",
|
|
||||||
// compile: true,
|
|
||||||
favicon: false,
|
|
||||||
minify: production ? {
|
|
||||||
removeComments: true,
|
|
||||||
removeRedundantAttributes: true,
|
|
||||||
removeScriptTypeAttributes: true,
|
|
||||||
removeStyleLinkTypeAttributes: true,
|
|
||||||
useShortDoctype: true,
|
|
||||||
// includeAutoGeneratedTags: false,
|
|
||||||
collapseWhitespace: true,
|
|
||||||
// conservativeCollapse: true,
|
|
||||||
} : false,
|
|
||||||
// cache: true,
|
|
||||||
showErrors: true,
|
|
||||||
chunks: 'all',
|
|
||||||
excludeChunks: [],
|
|
||||||
title: 'REKT Network',
|
|
||||||
xhtml: false,
|
|
||||||
chunksSortMode: 'dependency',
|
|
||||||
}),
|
|
||||||
|
|
||||||
// If we're generating an HTML file, we must be building a web app, so
|
// If we're generating an HTML file, we must be building a web app, so
|
||||||
// configure deterministic hashing for long-term caching.
|
// configure deterministic hashing for long-term caching.
|
||||||
|
|
@ -341,6 +275,31 @@ export default (options, { mode }) => {
|
||||||
new ModuleConcatenationPlugin(),
|
new ModuleConcatenationPlugin(),
|
||||||
].filter(() => production),
|
].filter(() => production),
|
||||||
|
|
||||||
|
new HtmlPlugin({
|
||||||
|
template: path.join(__dirname, 'src', 'index.html'),
|
||||||
|
filename: 'index.html',
|
||||||
|
hash: false,
|
||||||
|
inject: true,
|
||||||
|
compile: true,
|
||||||
|
favicon: false,
|
||||||
|
minify: production ? {
|
||||||
|
removeComments: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
removeScriptTypeAttributes: true,
|
||||||
|
removeStyleLinkTypeAttributes: true,
|
||||||
|
useShortDoctype: true,
|
||||||
|
// includeAutoGeneratedTags: false,
|
||||||
|
collapseWhitespace: true,
|
||||||
|
// conservativeCollapse: true,
|
||||||
|
} : false,
|
||||||
|
cache: true,
|
||||||
|
showErrors: true,
|
||||||
|
chunks: 'all',
|
||||||
|
excludeChunks: [],
|
||||||
|
title: 'REKT Network',
|
||||||
|
xhtml: false,
|
||||||
|
chunksSortMode: 'dependency',
|
||||||
|
}),
|
||||||
].filter(plugin => plugin !== false),
|
].filter(plugin => plugin !== false),
|
||||||
resolve: {
|
resolve: {
|
||||||
extensions: [
|
extensions: [
|
||||||
|
|
@ -366,9 +325,9 @@ export default (options, { mode }) => {
|
||||||
sourceMap: true,
|
sourceMap: true,
|
||||||
}),
|
}),
|
||||||
new OptimizeCssAssetsPlugin({
|
new OptimizeCssAssetsPlugin({
|
||||||
|
assetNameRegExp: /\.css$/gi,
|
||||||
cssProcessor: cssnano,
|
cssProcessor: cssnano,
|
||||||
cssProcessorOptions: {
|
cssProcessorOptions: {
|
||||||
preset: 'advanced',
|
|
||||||
parser: postcssSafeParser,
|
parser: postcssSafeParser,
|
||||||
discardComments: { removeAll: true },
|
discardComments: { removeAll: true },
|
||||||
},
|
},
|
||||||
|
|
@ -378,7 +337,7 @@ export default (options, { mode }) => {
|
||||||
},
|
},
|
||||||
devtool: server ? 'cheap-module-source-map' : 'source-map',
|
devtool: server ? 'cheap-module-source-map' : 'source-map',
|
||||||
entry: {
|
entry: {
|
||||||
[dj]: [
|
app: [
|
||||||
path.join(__dirname, 'src'),
|
path.join(__dirname, 'src'),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue