Merge branch 'master' into header/meta/overlay

[ci skip]

package.json

@@ -38,7 +38,7 @@
     "case-sensitive-paths-webpack-plugin": "^2.1.2",
     "chalk": "^2.4.1",
     "css-loader": "^1.0.0",
-    "cssnano": "^4.0.1",
+    "cssnano": "^4.0.3",
     "debug": "^3.1.0",
     "eslint": "4",
     "eslint-config-airbnb-base": "^13.0.0",
@@ -48,6 +48,7 @@
     "execa": "^0.10.0",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
+    "image-webpack-loader": "^4.3.1",
     "jimp": "^0.2.28",
     "mini-css-extract-plugin": "^0.4.1",
     "node-sass": "^4.9.2",

src/_header.scss

@@ -1,2 +1,3 @@
 @import 'header/nav';
 @import 'header/meta';
+@import 'header/player';

src/_main.scss

@@ -1,2 +1,10 @@
 @import 'main/page';
 @import 'main/smoke';
+
+#main {
+  background-image: url(./images/decay.png);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 50%;
+  background-color: #000;
+}

src/_mixins.scss

@@ -0,0 +1,3 @@
+@mixin saturate-from-red($brightness: 250%, $saturate: 45%) {
+  filter: hue-rotate(220deg) brightness($brightness) saturate($saturate);
+}

src/_variables.scss

@@ -11,18 +11,20 @@ $icedream-text-color: #EEE !default;
 $icedream-extended-line-height: 5vmin !default;
 
 // extra features
+$icedream-saturation: true !default;
 $icedream-metadata-overlay: true !default;
-$icedream-metadata-overlay-background-gradient-from: rgba(0, 0, 0, .75) !default;
+$icedream-metadata-overlay-background-gradient-from: #000 !default;
 $icedream-metadata-overlay-background-gradient-to: transparent !default;
 $icedream-metadata-prefix: '🎶 Now playing: ' !default;
 $icedream-nav-tab-fix: false !default;
 $icedream-nav-bg-fade: true !default;
+$icedream-fog-base-opacity: 0.05 !default;
 $icedream-fog-bg: true !default;
 $icedream-fog-bg-blur: false !default;
 $icedream-fog-bg-animated: true !default;
 $icedream-fog-bg-pulse-animation-length: 68s !default;
 $icedream-fog-bg-slide-animation-length: 25s !default;
-$icedream-station-fill-background-color: rgba(255, 255, 255, .1);
+$icedream-station-fill-background-color: rgba(255, 255, 255, .1) !default;
 
 $rekt-tab-count: 4 !default;
 $rekt-border-color: #AAA !default;

src/header/_player.scss

@@ -0,0 +1,15 @@
+// player
+#player {
+  .player_button {
+    @if $icedream-saturation {
+      @include saturate-from-red();
+    }
+  }
+  .slider {
+    .active {
+      @if $icedream-saturation {
+        @include saturate-from-red();
+      }
+    }
+  }
+}

src/icedream.scss

@@ -1,5 +1,7 @@
 @charset 'UTF-8';
 
+@import 'mixins';
+
 @import 'variables';
 
 @import 'font';

src/main/_page.scss

@@ -17,4 +17,44 @@
   &:not(#page_Chat) {
     @include icedream-font;
   }
+
+  &#page_EQ {
+    #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();
+    }
+  }
+
+  #wave {
+    @if $icedream-saturation {
+      @include saturate-from-red(300%, 5%);
+    }
+  }
 }

src/main/_smoke.scss

@@ -8,7 +8,7 @@
     overflow-x: hidden;
 
     &::before {
-      opacity: .2;
+      opacity: $icedream-fog-base-opacity;
       background-image: url('../images/whitefog.png');
       background-attachment: fixed;
       content: ' '; // sass-lint:disable-line variable-for-property
@@ -36,19 +36,19 @@
         transform-origin: left;
         @keyframes icedream-bg-pulse {
           0% {
-            opacity: .3;
+            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
           }
           22% {
-            opacity: .2;
+            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .12);
           }
           54% {
-            opacity: .35;
+            opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .15);
           }
           77% {
-            opacity: .16;
+            opacity: $icedream-fog-base-opacity + ($icedream-fog-base-opacity * .5);
           }
           100% {
-            opacity: .3;
+            opacity: $icedream-fog-base-opacity - ($icedream-fog-base-opacity * .05);
           }
         }
         @keyframes icedream-bg-slide {

webpack.config.babel.js

@@ -40,6 +40,8 @@ const {
   ModuleConcatenationPlugin,
 } = optimize;
 
+const dj = 'icedream';
+
 export default (options, { mode }) => {
   const environment = new Environment({
     // @HACK
@@ -59,39 +61,62 @@ export default (options, { mode }) => {
     docker,
   } = environment;
 
-  const baseOutputFilename = development
-    ? 'assets/dev/[name].dev.[ext]'
+  const baseOutputFilepath = 'static/theme/[type]/[filename]';
+  const filenames = {
+    css: '[name].[ext]',
+    default: development
+      ? '[name].dev.[ext]'
       // Always use a hash (in production) to prevent files with the same name causing issues
-    : 'assets/prod/[chunkhash:2]/[name].[chunkhash:8].[ext]';
+      : '[name].[chunkhash:8].[ext]',
+  };
 
-  const webpackChunkFilename = baseOutputFilename
-    .replace(/\[ext(.*?)\]/g, 'js');
-  const webpackOutputFilename = webpackChunkFilename;
+  function replaceField(string, name, value) {
+    const retval = string.replace(new RegExp(`\\[${name}(.*?)\\]`), value);
+    debug('replaceField:', { args: { string, name, value } }, string, '=>', retval);
+    return retval;
+  }
 
-  const assetOutputFilename = baseOutputFilename
-    .replace(/\[chunkhash(.*?)\]/g, '[hash$1]');
+  function getOutputFilename(type) {
+    let filename = baseOutputFilepath;
+    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;
+  }
 
-  const cssOutputFileName = baseOutputFilename
+  function getAssetOutputFilename(type) {
+    let filename = getOutputFilename(type);
+    filename = replaceField(filename, 'chunkhash', '[hash$1]');
+    return filename;
+  }
+
+  const cssOutputFileName = getOutputFilename('css')
     .replace(/\[ext(.*?)\]/g, 'css');
     // .replace(/\[chunkhash(.*?)\]/g, '[contenthash$1]');
-  const cssChunkOutputFileName = baseOutputFilename
+  const cssChunkOutputFileName = getOutputFilename('css')
     .replace(/\[chunkhash(.*?)\]/g, '[id$1]')
     .replace(/\[ext(.*?)\]/g, 'css');
   // const cssOutputRebasePath = `${slash(path.relative(path.dirname(cssOutputFileName), ''))}/`;
-  const cssOutputRebasePath = '/';
+  const cssOutputRebasePath = '../../../';
 
   // Default options for file-loader
-  const fileLoaderOptions = {
-    name: assetOutputFilename,
+  const getFileLoaderOptions = type => ({
+    name: getAssetOutputFilename(type),
     publicPath: cssOutputRebasePath,
-  };
+  });
 
   // Default options for url-loader
-  const urlLoaderOptions = {
-    ...fileLoaderOptions,
+  const getUrlLoaderOptions = type => ({
+    ...getFileLoaderOptions(type),
     // limit: 1, // Don't inline anything (but empty files) by default
     limit: 4 * 1024,
-  };
+  });
 
   const config = {
     name: 'frontend',
@@ -168,22 +193,57 @@ export default (options, { mode }) => {
           /\.jpe?g$/i, // jpeg
         ].map(test => ({
           test,
+          use: [
+            {
               loader: 'url-loader',
               options: {
-            ...urlLoaderOptions,
+                ...getUrlLoaderOptions('img'),
                 // 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
-          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
           /\.(wav|mp3|m4a|aac|oga)$/i, // audio
         ].map(test => ({
           test,
           loader: 'url-loader',
-          options: urlLoaderOptions,
+          options: getUrlLoaderOptions('media'),
         })),
+
+        ...[
+          /\.(eot|otf|ttf|woff|woff2)$/i, // fonts
+        ].map(test => ({
+          test,
+          loader: 'url-loader',
+          options: getUrlLoaderOptions('font'),
+        })),
+
         {
           test: /\.css$/,
           use: environment.styleLoaders(),
@@ -205,8 +265,8 @@ export default (options, { mode }) => {
     },
 
     output: {
-      filename: webpackOutputFilename,
-      chunkFilename: webpackChunkFilename,
+      filename: replaceField(getOutputFilename('js'), 'ext', 'js'),
+      chunkFilename: replaceField(getOutputFilename('js'), 'ext', 'js'),
       path: path.join(__dirname, 'dist'),
       publicPath: '',
       globalObject: 'this', // https://github.com/webpack-contrib/worker-loader/issues/142#issuecomment-385764803
@@ -325,9 +385,9 @@ export default (options, { mode }) => {
           sourceMap: true,
         }),
         new OptimizeCssAssetsPlugin({
-          assetNameRegExp: /\.css$/gi,
           cssProcessor: cssnano,
           cssProcessorOptions: {
+            preset: 'advanced',
             parser: postcssSafeParser,
             discardComments: { removeAll: true },
           },
@@ -337,7 +397,7 @@ export default (options, { mode }) => {
     },
     devtool: server ? 'cheap-module-source-map' : 'source-map',
     entry: {
-      app: [
+      [dj]: [
         path.join(__dirname, 'src'),
       ],
     },