Compare commits
4 Commits
c741b9e4d3
...
686bb33d2e
| Author | SHA1 | Date |
|---|---|---|
 Icedream
|
686bb33d2e
|
|
|
Icedream
|
a82a0e2dae
|
|
|
Icedream
|
5211f9777e
|
|
|
Icedream
|
d011593a2d
|
18
.babelrc
18
.babelrc
|
|
@ -1,18 +1,12 @@
|
||||||
{
|
{
|
||||||
"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,16 +1,15 @@
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
@ -67,16 +66,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 = [
|
||||||
{
|
{
|
||||||
|
|
@ -85,9 +84,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]',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -111,7 +110,6 @@ export default class Environment {
|
||||||
{
|
{
|
||||||
loader: 'resolve-url-loader',
|
loader: 'resolve-url-loader',
|
||||||
options: {
|
options: {
|
||||||
fail: true,
|
|
||||||
silent: false,
|
silent: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -123,7 +121,7 @@ export default class Environment {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!server) {
|
// if (!server) {
|
||||||
// const fallback = {
|
// const fallback = {
|
||||||
// loader: 'style-loader',
|
// loader: 'style-loader',
|
||||||
// };
|
// };
|
||||||
|
|
@ -131,8 +129,15 @@ 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');
|
||||||
|
|
|
||||||
110
package.json
110
package.json
|
|
@ -14,71 +14,65 @@
|
||||||
"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 development --hot --inline",
|
"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": "run-p start:*"
|
"start": "run-p start:*"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "^8.6.5",
|
"@babel/cli": "^7.7.0",
|
||||||
"babel-cli": "^6.26.0",
|
"@babel/core": "^7.7.2",
|
||||||
"babel-core": "^6.26.3",
|
"@babel/preset-env": "^7.7.1",
|
||||||
"babel-eslint": "^8.2.6",
|
"@babel/register": "^7.7.0",
|
||||||
"babel-loader": "^7.1.5",
|
"autoprefixer": "^9.7.2",
|
||||||
"babel-plugin-dynamic-import-node": "^2.0.0",
|
"babel-eslint": "^10.0.3",
|
||||||
"babel-plugin-dynamic-import-webpack": "^1.0.2",
|
"babel-loader": "^8.0.6",
|
||||||
"babel-plugin-syntax-export-extensions": "^6.13.0",
|
"better-npm-run": "^0.1.1",
|
||||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
"browserslist": "^4.7.3",
|
||||||
"babel-plugin-transform-export-extensions": "^6.22.0",
|
"case-sensitive-paths-webpack-plugin": "^2.2.0",
|
||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"chalk": "^3.0.0",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"core-js": "3.x",
|
||||||
"babel-polyfill": "^6.26.0",
|
"css-loader": "^3.2.0",
|
||||||
"babel-preset-env": "^1.7.0",
|
"cssnano": "^4.1.10",
|
||||||
"babel-register": "^6.26.0",
|
"debug": "^4.1.1",
|
||||||
"better-npm-run": "^0.1.0",
|
"eslint": "6",
|
||||||
"browserslist": "^4.0.0",
|
"eslint-config-airbnb-base": "^14.0.0",
|
||||||
"case-sensitive-paths-webpack-plugin": "^2.1.2",
|
"eslint-plugin-babel": "^5.3.0",
|
||||||
"chalk": "^2.4.1",
|
"eslint-plugin-import": "^2.18.2",
|
||||||
"css-loader": "^1.0.0",
|
"eslint-plugin-json": "^2.0.1",
|
||||||
"cssnano": "^4.0.3",
|
"execa": "^3.3.0",
|
||||||
"debug": "^3.1.0",
|
"file-loader": "^4.2.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": "^4.3.1",
|
"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.3",
|
"npm-run-all": "^4.1.5",
|
||||||
"optimize-css-assets-webpack-plugin": "^4.0.3",
|
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||||
"postcss-import": "^11.1.0",
|
"postcss-import": "^12.0.1",
|
||||||
"postcss-loader": "^2.1.6",
|
"postcss-loader": "^3.0.0",
|
||||||
"postcss-preset-env": "^5.2.1",
|
"postcss-preset-env": "^6.7.0",
|
||||||
"postcss-safe-parser": "^3.0.1",
|
"postcss-safe-parser": "^4.0.1",
|
||||||
"progress-bar-webpack-plugin": "^1.11.0",
|
"progress-bar-webpack-plugin": "^1.12.1",
|
||||||
"resolve-url-loader": "^2.3.0",
|
"resolve-url-loader": "^3.1.1",
|
||||||
"responsive-loader": "^1.1.0",
|
"responsive-loader": "^1.2.0",
|
||||||
"rimraf": "^2.6.2",
|
"rimraf": "^3.0.0",
|
||||||
"sass-lint": "^1.12.1",
|
"sass-lint": "^1.13.1",
|
||||||
"sass-loader": "^7.0.3",
|
"sass-loader": "^8.0.0",
|
||||||
"slash": "^2.0.0",
|
"slash": "^3.0.0",
|
||||||
"style-loader": "^0.21.0",
|
"style-loader": "^1.0.0",
|
||||||
"synp": "^1.3.0",
|
"synp": "^1.7.0",
|
||||||
"uglifyjs-webpack-plugin": "^1.2.7",
|
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||||
"url-loader": "^1.0.1",
|
"url-loader": "^2.2.0",
|
||||||
"webfontloader": "^1.6.28",
|
"webfontloader": "^1.6.28",
|
||||||
"webpack": "^4.16.0",
|
"webpack": "^4.41.2",
|
||||||
"webpack-cli": "^3.0.8",
|
"webpack-cli": "^3.3.10",
|
||||||
"webpack-dev-server": "^3.1.4",
|
"webpack-dev-server": "^3.9.0",
|
||||||
"webpack-hot-middleware": "^2.22.2",
|
"webpack-hot-middleware": "^2.25.0",
|
||||||
"webpack-merge": "^4.1.3"
|
"webpack-merge": "^4.2.2",
|
||||||
|
"webpack-userscript": "^2.3.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"typeface-orbitron": "^0.0.54"
|
"typeface-orbitron": "^0.0.72"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
25
src/.babelrc
25
src/.babelrc
|
|
@ -1,24 +1,15 @@
|
||||||
{
|
{
|
||||||
"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,7 @@
|
||||||
@mixin saturate-from-red($brightness: 250%, $saturate: 45%) {
|
@mixin saturate-from-red($brightness: 250%, $saturate: 45%) {
|
||||||
filter: hue-rotate(220deg) brightness($brightness) saturate($saturate);
|
filter: hue-rotate(220deg) brightness($brightness) saturate($saturate);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin saturate-from-blue($brightness: 250%, $saturate: 45%) {
|
||||||
|
filter: brightness($brightness) saturate($saturate);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
document.body.classList.add("icedream");
|
||||||
|
});
|
||||||
|
|
@ -2,8 +2,7 @@
|
||||||
@import 'meta/prefix';
|
@import 'meta/prefix';
|
||||||
|
|
||||||
// currently playing track metadata
|
// currently playing track metadata
|
||||||
#meta {
|
.meta {
|
||||||
@include icedream-font;
|
|
||||||
color: $icedream-text-color;
|
color: $icedream-text-color;
|
||||||
line-height: $icedream-extended-line-height;
|
line-height: $icedream-extended-line-height;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,6 @@
|
||||||
@import 'nav/bgfade';
|
@import 'nav/bgfade';
|
||||||
|
|
||||||
#nav {
|
#nav {
|
||||||
@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,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,9 +15,11 @@
|
||||||
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});
|
||||||
}
|
}
|
||||||
|
|
||||||
.page {
|
#main {
|
||||||
&:not(#page_EQ) {
|
section {
|
||||||
|
&:not(#pageEQ) {
|
||||||
height: calc(100% - 9vmin);
|
height: calc(100% - 9vmin);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
@if $icedream-metadata-prefix {
|
@if $icedream-metadata-prefix {
|
||||||
#meta {
|
#nowplaying {
|
||||||
&::before {
|
&::before {
|
||||||
content: $icedream-metadata-prefix;
|
content: $icedream-metadata-prefix;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
#volumeSVG {
|
#volumeSVG {
|
||||||
@if $icedream-saturation {
|
@if $icedream-saturation {
|
||||||
@include saturate-from-red();
|
@include saturate-from-blue();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,8 +7,19 @@
|
||||||
@import 'font';
|
@import 'font';
|
||||||
@import 'debug';
|
@import 'debug';
|
||||||
|
|
||||||
|
|
||||||
|
$gradient-stop-0: #46c;
|
||||||
|
$gradient-stop-1: #013;
|
||||||
|
$gradient-radial: rgba(64, 128, 255, 0.05);
|
||||||
|
|
||||||
// wrap all rules in body{} to increase css rule specificity, relatively safe overriding without !important
|
// wrap all rules in body{} to increase css rule specificity, relatively safe overriding without !important
|
||||||
body {
|
body.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';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
563
src/index.html
563
src/index.html
|
|
@ -1,154 +1,179 @@
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<!-- PATCHUP for local testing -->
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
||||||
|
|
||||||
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||||
<script>
|
<script>
|
||||||
function gtag() { }
|
function gtag(){}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- TEMPLATE VARIABLES -->
|
<meta charset="UTF-8"/>
|
||||||
<script>
|
<meta name="theme-color" content="#110F10">
|
||||||
var HOST = "rekt.fm";
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0"/>
|
||||||
|
<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"/>
|
||||||
|
|
||||||
var SITENAME = "Rekt.Network";
|
<title>Rekt Network - The Home of Cyberpunk Radio</title>
|
||||||
var DEFAULT_STATION = "rekt";
|
<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">
|
||||||
var FAVICON = "https://rekt.fm/static/img/favicon.png";
|
<link id="favicon" rel="shortcut icon" href="/static/img/favicon.png">
|
||||||
var FAVICON_LIVE = "https://rekt.fm/static/img/favicon-live.png";
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<meta name=viewport content="width=device-width, initial-scale=1.0"/>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="mobile-web-app-capable" content="yes">
|
|
||||||
|
|
||||||
<link rel="canonical" href="https://rekt.fm"/>
|
|
||||||
|
|
||||||
|
|
||||||
<title>Rekt FM - 320kbps Cyberpunk Radio</title>
|
|
||||||
<meta name="description" content="24/7 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">
|
|
||||||
<link id="favicon" rel="shortcut icon" href="https://rekt.fm/static/img/favicon.png">
|
|
||||||
<link rel="manifest" href="manifest.json">
|
<link rel="manifest" href="manifest.json">
|
||||||
<meta name="theme-color" content="#181818">
|
<meta name="theme-color" content="#181818">
|
||||||
|
|
||||||
<!--FACEBOOK-->
|
<!--FACEBOOK-->
|
||||||
<meta property="og:title" content="Rekt FM - 320kbps Cyberpunk Radio">
|
<meta property="og:title" content="Rekt Network - The Home of Cyberpunk Radio">
|
||||||
<meta property="og:description" content="24/7 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: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:image" content="https://rekt.fm/static/img/logo.png">
|
<meta property="og:image" content="https://rekt.fm/static/img/logo.png">
|
||||||
<meta property="og:site_name" content="Rekt FM">
|
<meta property="og:site_name" content="Rekt FM">
|
||||||
<meta property="og:url" content="https://rekt.fm/">
|
<meta property="og:url" content="https://rekt.fm/?station=rekt">
|
||||||
<meta property="fb:app_id" content="1000465486695949"/>
|
<meta property="fb:app_id" content="1000465486695949"/>
|
||||||
<meta property="og:audio" content="https://stream.rekt.fm/rekt.m4a">
|
<meta property="og:audio" content="https://rekt.fm/stream/rekt.m4a">
|
||||||
<meta property="og:type" content="music.radio_station">
|
<meta property="og:type" content="music.radio_station">
|
||||||
|
|
||||||
<!--TWITTER-->
|
<!--TWITTER-->
|
||||||
<meta name="twitter:title" content="Rekt FM - 320kbps Cyberpunk Radio">
|
<meta name="twitter:title" content="Rekt Network - The Home of Cyberpunk Radio">
|
||||||
<meta name="twitter:description" content="24/7 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="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:image" content="https://rekt.fm/static/img/logo.png">
|
||||||
<meta name="twitter:url" content="https://rekt.fm/">
|
<meta name="twitter:url" content="https://rekt.fm/?station=rekt">
|
||||||
<meta name="twitter:site" content="@TheRektNetwork">
|
<meta name="twitter:site" content="@TheRektNetwork">
|
||||||
<meta name="twitter:creator" content="@TheRektNetwork">
|
<meta name="twitter:creator" content="@TheRektNetwork">
|
||||||
<meta name="twitter:card" content="player">
|
<meta name="twitter:card" content="player">
|
||||||
<meta name="twitter:player" content="https://rekt.fm/player/">
|
<meta name="twitter:player" content="https://rekt.fm/player/?station=rekt">
|
||||||
<meta name="twitter:player:stream" content="https://stream.rekt.fm/rekt.m4a">
|
<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:stream:content_type" content="audio/aac">
|
||||||
<meta name="twitter:player:width" content="600">
|
<meta name="twitter:player:width" content="1200">
|
||||||
<meta name="twitter:player:height" content="100">
|
<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"/>
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://rekt.fm/static/css/style.css" type="text/css"/>
|
<script type="application/ld+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" type="text/css" id="theme"/>
|
<link rel="stylesheet" href="static/css/main.css">
|
||||||
|
<noscript>
|
||||||
|
<style>
|
||||||
|
header{
|
||||||
|
box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary);
|
||||||
|
}
|
||||||
|
audio {
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<!-- <link rel="stylesheet" href="static/css/rekt.css"> -->
|
||||||
|
</noscript>
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/firebase-app.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/firebase-messaging.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/push.js" as="script"/>
|
|
||||||
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/pf_eventsource.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/shaka.js" as="script"/>
|
|
||||||
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/helper.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/settings.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/slider.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/menu.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/page.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/stream.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/station.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/player.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/meta.js" as="script"/>
|
|
||||||
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/webrtc.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/irc.js" as="script"/>
|
|
||||||
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/archive.js" as="script"/>
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/releases.js" as="script"/>
|
|
||||||
|
|
||||||
<link rel="preload" href="https://rekt.fm/static/js/keybind.js" as="script"/>
|
|
||||||
|
|
||||||
<!-- THEMES -->
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/img/rekt.webm" as="video"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/img/rekt.jpg" as="image"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/css/rekt.css" as="style"/>
|
|
||||||
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/img/nightride.jpg" as="image"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/font/nightride/arcade_i-webfont.woff2" as="font"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/css/nightride.css" as="style"/>
|
|
||||||
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/img/rektory.jpg" as="image"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/css/rektory.css" as="style"/>
|
|
||||||
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/img/rektify.webm" as="image"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/font/rektify/JackeyFont.woff" as="font"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/css/rektify.css" as="style"/>
|
|
||||||
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/css/archive.css" as="style"/>
|
|
||||||
<link rel="prefetch" href="https://rekt.fm/static/theme/css/releases.css" as="style"/>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<body class="loading scanlines flicker">
|
||||||
<body class="flex c">
|
<div class="overlay radial"></div>
|
||||||
<aside id="menu_left" class="flex r menu left transition">
|
<div class="overlay flicker"></div>
|
||||||
<nav id="menu_left_nav" class="flex c left">
|
<div class="overlay scanlines"></div>
|
||||||
</nav>
|
<div class="overlay scanline"></div>
|
||||||
<div id="menu_left_page" class="flex c fill">
|
<header>
|
||||||
|
<div class="headerTop fr">
|
||||||
|
<div class="headerLeft">
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
|
||||||
<aside id="menu_right" class="flex rr menu right transition">
|
|
||||||
<nav id="menu_right_nav" class="flex c right">
|
|
||||||
</nav>
|
|
||||||
<div id="menu_right_page" class="flex c fill">
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<div id="handle_left" class="handle left"></div>
|
|
||||||
<div id="handle_right" class="handle right"></div>
|
|
||||||
<div id="overlay"></div>
|
|
||||||
|
|
||||||
<header id="header" class="flex c auto">
|
<div class="headerCenter" id="player" style="padding-bottom:2vmin;">
|
||||||
<div class="flex c fill auto">
|
<div id="playerPlay" class="toggle f0">
|
||||||
<div id="player_wrap" class="flex auto">
|
|
||||||
<div class="flex fill r">
|
|
||||||
<div id="menu_button_left" class="flex fill menu_button">
|
|
||||||
❯
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="player" class="flex center">
|
|
||||||
|
|
||||||
|
|
||||||
<div id="player_play" class="player_button">
|
|
||||||
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
||||||
<polyline class="playstop" id="playSVG" points="4.35,0 4.35,65 60.65,32.5"/>
|
<polyline class="fill" id="playSVG" points="4.35,0 4.35,65 60.65,32.5"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="playerStop" class="toggle f0">
|
||||||
<div id="player_stop" class="player_button" style="display:none;">
|
|
||||||
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
<svg width="65px" height="65px" viewBox="0 0 65 65" xmlns="http://www.w3.org/2000/svg">
|
||||||
<rect class="playstop" id="stopSVG" width="65" height="65"/>
|
<rect class="fill" id="stopSVG" width="65" height="65"/>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="playerSlider" class="slider horizontal f0">
|
||||||
<div id="player_slider" class="player">
|
|
||||||
<svg id="volumeSVG" viewBox="0 0 780 65" height="65px" width="780px" xmlns="http://www.w3.org/2000/svg">
|
<svg id="volumeSVG" viewBox="0 0 780 65" height="65px" width="780px" xmlns="http://www.w3.org/2000/svg">
|
||||||
<defs>
|
<defs>
|
||||||
<linearGradient id="rektGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="65">
|
<linearGradient id="rektGradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="65">
|
||||||
|
|
@ -169,10 +194,10 @@
|
||||||
</pattern>
|
</pattern>
|
||||||
</defs>
|
</defs>
|
||||||
<use xlink:href="#rektnetwork" x="0" y="0" style="fill:white;mask: url(#mask2)"></use>
|
<use xlink:href="#rektnetwork" x="0" y="0" style="fill:white;mask: url(#mask2)"></use>
|
||||||
<use id="rektNetworkActive" xlink:href="#rektnetwork" x="0" y="0" style="mask: url(#mask1)"></use>
|
<use id="rektNetworkActive" class="fill" xlink:href="#rektnetwork" x="0" y="0" style="mask: url(#mask1)"></use>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div id="player_slider_active" style="width:100%">
|
<div id="playerSliderActive" style="width:100%">
|
||||||
<div id="speaker">
|
<div id="speaker">
|
||||||
<svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
|
<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"/>
|
<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"/>
|
||||||
|
|
@ -180,198 +205,156 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex fill rr">
|
</div>
|
||||||
<div id="menu_button_right" class="flex fill menu_button">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
<div id="meta" class="flex center auto">Loading Track Information</div>
|
|
||||||
<nav id="nav" class="flex r center auto"></nav>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main id="main" class="flex c fill"></main>
|
<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>
|
||||||
|
|
||||||
<footer id="footer" class=""></footer>
|
<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>
|
||||||
|
|
||||||
<!-- DEFER FIREBASE -->
|
<section id="pageMilkdrop" class="fr">
|
||||||
<script src="https://rekt.fm/static/js/firebase-app.js" defer></script>
|
<canvas id="canvasMilkdrop"></canvas>
|
||||||
<script src="https://rekt.fm/static/js/firebase-messaging.js" defer></script>
|
</section>
|
||||||
<script src="https://rekt.fm/static/js/push.js" defer></script>
|
|
||||||
<!-- THIRD PARTY -->
|
|
||||||
<script src="https://rekt.fm/static/js/pf_eventsource.js"></script>
|
|
||||||
<script src="https://rekt.fm/static/js/shaka.js"></script>
|
|
||||||
|
|
||||||
<!-- MAIN SCRIPTS -->
|
<section id="pageStations">
|
||||||
<script src="https://rekt.fm/static/js/helper.js"></script>
|
<nav>
|
||||||
<script src="https://rekt.fm/static/js/settings.js"></script>
|
<a class="station" data-station="rekt" data-type="stream"><h3>REKT</h3></a>
|
||||||
<script src="https://rekt.fm/static/js/slider.js"></script>
|
<a class="station" data-station="nightride" data-type="stream"><h3>NIGHTRIDE</h3></a>
|
||||||
<script src="https://rekt.fm/static/js/menu.js"></script>
|
<a class="station" data-station="rektory" data-type="stream"><h3>REKTORY</h3></a>
|
||||||
<script src="https://rekt.fm/static/js/page.js"></script>
|
<a class="station" data-station="rektify" data-type="stream"><h3>REKTIFY</h3></a>
|
||||||
<script src="https://rekt.fm/static/js/stream.js"></script>
|
<a class="station" data-station="archives" data-type="file"><h3>ARCHIVES</h3></a>
|
||||||
<script src="https://rekt.fm/static/js/station.js"></script>
|
<a class="station" data-station="releases" data-type="file"><h3>RELEASES</h3></a>
|
||||||
<script src="https://rekt.fm/static/js/eq.js"></script>
|
</nav>
|
||||||
<script src="https://rekt.fm/static/js/player.js"></script>
|
</section>
|
||||||
<script src="https://rekt.fm/static/js/meta.js"></script>
|
|
||||||
|
|
||||||
<!-- DYNAMIC LOAD -->
|
<section id="pageChat">
|
||||||
<script async>
|
<div>
|
||||||
function loadMilkdrop(){
|
<div class="fr">
|
||||||
return new Promise((resolve, reject) => {
|
<div id="chatMain" class="rtl">
|
||||||
Promise.all([
|
|
||||||
scriptLoad("https://rekt.fm/static/js/butterchurn/butterchurn.min.js"),
|
|
||||||
scriptLoad("https://rekt.fm/static/js/butterchurn/butterchurnExtraImages.min.js"),
|
|
||||||
scriptLoad("https://rekt.fm/static/js/butterchurn/presets/butterchurnPresets.min.js"),
|
|
||||||
scriptLoad("https://rekt.fm/static/js/butterchurn/presets/butterchurnPresetsExtra.min.js"),
|
|
||||||
scriptLoad("https://rekt.fm/static/js/butterchurn/presets/butterchurnPresetsExtra2.min.js"),
|
|
||||||
])
|
|
||||||
.then(results => {
|
|
||||||
console.log("Loaded Scripts", results);
|
|
||||||
scriptLoad("https://rekt.fm/static/js/butterchurn.js")
|
|
||||||
.then(r => resolve(r));
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.log("Script Loading Error", e);
|
|
||||||
reject(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
function loadMathbox(){
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
scriptLoad("https://rekt.fm/static/js/mathbox-bundle.min.js")
|
|
||||||
.then(res => {
|
|
||||||
scriptLoad("https://rekt.fm/static/js/mathbox.js")
|
|
||||||
.then(r => resolve(r));
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.log("Script Loading Error", e);
|
|
||||||
reject(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (CAN_MILKDROP) {
|
</div>
|
||||||
loadMilkdrop().then(r => {
|
<div id="chatSide" class="container f0 auto">
|
||||||
if (CAN_MATHBOX) {
|
<nav id="chatChannels" class="menu c r chanlist active">
|
||||||
loadMathbox();
|
<ol id="serverList">
|
||||||
}
|
<a class="channel title" data-channel="" title="irc.rekt.network">!Rekt.Network</a>
|
||||||
}).catch(e => console.log("Error Loading Milkdrop", e));
|
</ol>
|
||||||
} else if (CAN_MATHBOX) {
|
<ol id="publicList">
|
||||||
loadMathbox();
|
<a class="channel title" data-channel="#rekt" data-active="1" title="rekt">#rekt</a>
|
||||||
}
|
</ol>
|
||||||
|
<ol id="privateList">
|
||||||
|
</ol>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</script>
|
<div id="chatInput" class="f0 auto">
|
||||||
<script src="https://rekt.fm/static/js/webrtc.js"></script>
|
<input></input>
|
||||||
<script src="https://rekt.fm/static/js/irc.js"></script>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="https://rekt.fm/static/js/archive.js"></script>
|
</section>
|
||||||
<script src="https://rekt.fm/static/js/releases.js"></script>
|
|
||||||
|
|
||||||
<script src="https://rekt.fm/static/js/keybind.js"></script>
|
<section id="pageArchive" class="fr">
|
||||||
<script>
|
<nav id="archiveMenu" class="menu c rtl">
|
||||||
function setState(e) {
|
<!-- <a class="title filter" data-station="all"><h3>ALL</h3></a>
|
||||||
e.preventDefault();
|
<a class="title filter" data-station="rekt"><h3>REKT</h3></a>
|
||||||
var params = new URLSearchParams(e.target.search);
|
<a class="title filter" data-station="nightride"><h3>NIGHTRIDE</h3></a>
|
||||||
var param_station = params.get("station");
|
<a class="title filter" data-station="rektory"><h3>REKTORY</h3></a>
|
||||||
var autoplay = params.get("autoplay");
|
<a class="title filter" data-station="rektify"><h3>REKTIFY</h3></a> -->
|
||||||
|
</nav>
|
||||||
|
<div id="archiveMain" class="container">
|
||||||
|
<!-- <section></section> -->
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
var s = W[e.target.hash.slice(1)] instanceof Page ? W[e.target.hash.slice(1)] : pageMap.get(ls("active_page", 0));
|
<section id="pageReleases" class="fr">
|
||||||
if (s !== activePage) {
|
<nav id="releaseMenu"class="menu c rtl">
|
||||||
console.log("pop page");
|
</nav>
|
||||||
s.setActive();
|
<div id="releaseMain" class="container">
|
||||||
}
|
<!-- <section></section> -->
|
||||||
// Check station
|
</div>
|
||||||
s = W[param_station] instanceof Station ? W[param_station] : stationMap.get(ls("active_station", DEFAULT_STATION))
|
</section>
|
||||||
if (s !== activeStation) {
|
|
||||||
s.setActive(e);
|
|
||||||
}
|
|
||||||
setArchive(params);
|
|
||||||
setReleases(params);
|
|
||||||
autoplay && playStream(); //TODO fix autoplay of archive
|
|
||||||
|
|
||||||
return false;
|
<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>
|
||||||
|
|
||||||
function initState(e, init) {
|
</main>
|
||||||
var params = new URLSearchParams(location.search);
|
|
||||||
var param_station = params.get("station");
|
|
||||||
|
|
||||||
var p = W[location.hash.slice(1)] instanceof Page ? W[location.hash.slice(1)] : pageMap.get(ls("active_page", 0));
|
<footer></footer>
|
||||||
if (!p) {
|
</div>
|
||||||
p = pageMap.get(0);
|
<!-- SCRIPTS -->
|
||||||
}
|
<script src="/static/js/helper.js"></script>
|
||||||
if (p && p != activePage) {
|
<script src="/static/js/slider.js"></script>
|
||||||
p.setActive();
|
<script src="/static/js/station.js"></script>
|
||||||
}
|
<script src="/static/js/page.js"></script>
|
||||||
|
<script src="/static/js/webrtc.js"></script>
|
||||||
// Check station
|
<script src="/static/js/chat.js"></script>
|
||||||
var s = W[param_station] instanceof Station ? W[param_station] : stationMap.get(ls("active_station", DEFAULT_STATION))
|
<script src="/static/js/eq.js"></script>
|
||||||
if (!s) {
|
<script src="<%= require('!!file-loader!./rekt-embedded.js') %>"></script>
|
||||||
s = stationMap.get(DEFAULT_STATION);
|
<script src="<%= require('!!file-loader!./dj.js') %>"></script>
|
||||||
}
|
|
||||||
if (s && s != activeStation) {
|
|
||||||
s.setActive();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (init) {
|
|
||||||
var autoplay = params.get('autoplay');
|
|
||||||
|
|
||||||
// Archive Promise
|
|
||||||
fetch('api/archives')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(r => {
|
|
||||||
console.log('Archive Result', r);
|
|
||||||
r.forEach(set => new ArchiveFolder(set));
|
|
||||||
archiveBrowserArtists.appendChild(CE('','fill padding'));
|
|
||||||
setArchive(params);
|
|
||||||
if (autoplay && activeStation === archive) {
|
|
||||||
playStream();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.error("Archives Error", e);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Releases Promise
|
|
||||||
fetch('api/releases')
|
|
||||||
.then(r => r.json())
|
|
||||||
.then(r => {
|
|
||||||
console.log('Releases Result', r);
|
|
||||||
r.forEach(artist => new Artist(artist));
|
|
||||||
releasesBrowserLeft.appendChild(CE('','fill padding'));
|
|
||||||
setReleases(params);
|
|
||||||
if (autoplay && activeStation === releases) {
|
|
||||||
playStream();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch(e => {
|
|
||||||
console.error("Releases Error", e);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (autoplay && activeStation !== archive && activeStation !== releases) {
|
|
||||||
playStream();
|
|
||||||
}
|
|
||||||
|
|
||||||
} else {
|
|
||||||
setArchive(params);
|
|
||||||
setReleases(params);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
D.addEventListener("DOMContentLoaded", function() {
|
|
||||||
StartMetaFeed();
|
|
||||||
StartIRCFeed();
|
|
||||||
|
|
||||||
W.onpopstate = initState;
|
|
||||||
initState(null, true);
|
|
||||||
focus = D.hasFocus();
|
|
||||||
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,65 +1,64 @@
|
||||||
@import 'page/meta_overlay_fix';
|
@import 'page/meta_overlay_fix';
|
||||||
@import 'page/stations';
|
@import 'page/stations';
|
||||||
|
|
||||||
.page {
|
section {
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&#page_EQ {
|
|
||||||
background: initial;
|
|
||||||
#wave {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 25%;
|
|
||||||
bottom: 25%;
|
|
||||||
}
|
|
||||||
#eq {
|
|
||||||
margin: 20vh;
|
|
||||||
transition: opacity ease-out .33s, transform ease-out .33s;
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(0.75);
|
|
||||||
.slider {
|
|
||||||
background-color: rgba(0, 0, 0, .75);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#bars {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
#eq {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.eq {
|
|
||||||
@if $icedream-saturation {
|
|
||||||
@include saturate-from-red();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page_EQ_video {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#wave {
|
|
||||||
@if $icedream-saturation {
|
|
||||||
@include saturate-from-red(300%, 5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,521 @@
|
||||||
|
|
||||||
|
["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");
|
||||||
|
|
@ -43,11 +43,7 @@ const {
|
||||||
const dj = 'icedream';
|
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);
|
||||||
|
|
@ -132,7 +128,7 @@ export default (options, { mode }) => {
|
||||||
historyApiFallback: {
|
historyApiFallback: {
|
||||||
index: '/',
|
index: '/',
|
||||||
},
|
},
|
||||||
hot: true,
|
hot: false,
|
||||||
https: !docker,
|
https: !docker,
|
||||||
noInfo: false,
|
noInfo: false,
|
||||||
overlay: true,
|
overlay: true,
|
||||||
|
|
@ -165,32 +161,9 @@ 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: false,
|
babelrc: true,
|
||||||
// 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',
|
|
||||||
],
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
@ -310,20 +283,44 @@ 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),
|
||||||
|
|
||||||
// If we're not serving, we're creating a static build
|
// Extract imported stylesheets out into .css files
|
||||||
...[// 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.
|
||||||
|
|
@ -344,31 +341,6 @@ 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: [
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue