Add cache busting

js/actionCreators.js

@@ -1,4 +1,3 @@
-import { cdnUrl } from "../package.json";
 import { parser, creator } from "winamp-eqf";
 import MyFile from "./myFile";
 import skinParser from "./skinParser";
@@ -157,11 +156,6 @@ export function setSkinFromUrl(url) {
   return setSkinFromFile(skinFile);
 }
 
-export function setSkinFromFilename(filename) {
-  const url = `${cdnUrl}/skins/${filename}`;
-  return setSkinFromUrl(url);
-}
-
 export function openFileDialog(fileInput) {
   fileInput.click();
   // No reducers currently respond to this.

js/components/MainWindow/MainContextMenu.js

@@ -1,19 +1,21 @@
 import React from "react";
 import { connect } from "react-redux";
-import {
-  close,
-  setSkinFromFilename,
-  openFileDialog
-} from "../../actionCreators";
+import { close, setSkinFromUrl, openFileDialog } from "../../actionCreators";
 import { ContextMenu, Hr, Node, Parent, LinkNode } from "../ContextMenu";
+import base from "../../../skins/base-2.91.wsz";
+import osx from "../../../skins/MacOSXAqua1-5.wsz";
+import topaz from "../../../skins/TopazAmp1-2.wsz";
+import visor from "../../../skins/Vizor1-01.wsz";
+import xmms from "../../../skins/XMMS-Turquoise.wsz";
+import zaxon from "../../../skins/ZaxonRemake1-0.wsz";
 
 const SKINS = [
-  { file: "base-2.91.wsz", name: "<Base Skin>" },
-  { file: "MacOSXAqua1-5.wsz", name: "Mac OSX v1.5 (Aqua)" },
-  { file: "TopazAmp1-2.wsz", name: "TopazAmp" },
-  { file: "Vizor1-01.wsz", name: "Vizor" },
-  { file: "XMMS-Turquoise.wsz", name: "XMMS Turquoise " },
-  { file: "ZaxonRemake1-0.wsz", name: "Zaxon Remake" }
+  { url: base, name: "<Base Skin>" },
+  { url: osx, name: "Mac OSX v1.5 (Aqua)" },
+  { url: topaz, name: "TopazAmp" },
+  { url: visor, name: "Vizor" },
+  { url: xmms, name: "XMMS Turquoise " },
+  { url: zaxon, name: "Zaxon Remake" }
 ];
 
 const MainContextMenu = props => (
@@ -34,8 +36,8 @@ const MainContextMenu = props => (
       <Hr />
       {SKINS.map(skin => (
         <Node
-          key={skin.file}
-          onClick={props.setSkin.bind(null, skin.file)}
+          key={skin.url}
+          onClick={() => props.setSkin(skin.url)}
           label={skin.name}
         />
       ))}
@@ -48,7 +50,7 @@ const MainContextMenu = props => (
 const mapDispatchToProps = (dispatch, ownProps) => ({
   close: () => dispatch(close()),
   openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
-  setSkin: filename => dispatch(setSkinFromFilename(filename))
+  setSkin: url => dispatch(setSkinFromUrl(url))
 });
 
 export default connect(null, mapDispatchToProps)(MainContextMenu);

js/config.js

@@ -1,4 +1,5 @@
-import { cdnUrl } from "../package.json";
+import skin from "../skins/base-2.91.wsz";
+import audio from "../mp3/llama-2.91.mp3";
 
 const { hash } = window.location;
 let config = {};
@@ -10,12 +11,9 @@ if (hash) {
   }
 }
 
-const or = (value, fallback) => (value === undefined ? fallback : value);
-
-const assetBase = process.env.NODE_ENV === "production" ? cdnUrl : "";
 // Turn on the incomplete playlist window
-export const skinUrl = or(config.skinUrl, `${assetBase}skins/base-2.91.wsz`);
-export const audioUrl = or(config.audioUrl, `${assetBase}mp3/llama-2.91.mp3`);
+export const skinUrl = skin;
+export const audioUrl = audio;
 export const playlistEnabled = config.playlist || false;
 export const noMarquee = config.noMarquee || false;
 export const hideAbout = config.hideAbout || false;

package.json

@@ -43,7 +43,7 @@
     "eslint-config-prettier": "^2.3.0",
     "eslint-plugin-prettier": "^2.2.0",
     "eslint-plugin-react": "7.3.0",
-    "file-loader": "^0.11.0",
+    "file-loader": "^1.1.5",
     "gzip-size-cli": "^2.0.0",
     "jest-cli": "^21.0.2",
     "react-test-renderer": "16.0.0-rc.2",
@@ -78,7 +78,9 @@
   "jest": {
     "testRegex": "\\.test\\.js$",
     "moduleNameMapper": {
-      "\\.css$": "<rootDir>/js/__mocks__/styleMock.js"
+      "\\.css$": "<rootDir>/js/__mocks__/styleMock.js",
+      "\\.wsz$": "<rootDir>/js/__mocks__/fileMock.js",
+      "\\.mp3$": "<rootDir>/js/__mocks__/fileMock.js"
     }
   }
 }

webpack.config.js

@@ -25,6 +25,18 @@ module.exports = {
         use: {
           loader: "babel-loader"
         }
+      },
+      {
+        test: /\.(wsz|mp3)$/,
+        use: [
+          {
+            loader: "file-loader",
+            options: {
+              emitFile: true,
+              name: "[path][name]-[hash].[ext]"
+            }
+          }
+        ]
       }
     ],
     noParse: [/jszip\.js$/]

webpack.production.config.js

@@ -1,3 +1,4 @@
+const { cdnUrl } = require("./package.json");
 const config = require("./webpack.config");
 const webpack = require("webpack");
 
@@ -12,6 +13,8 @@ config.plugins = (config.plugins || []).concat([
   })
 ]);
 
+config.output.publicPath = `${cdnUrl}built/`;
+
 config.entry.winamp.unshift("./js/googleAnalytics.min.js");
 
 module.exports = config;

yarn.lock

@@ -2324,11 +2324,12 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@^0.11.0:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
+file-loader@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.5.tgz#91c25b6b6fbe56dae99f10a425fd64933b5c9daa"
   dependencies:
     loader-utils "^1.0.2"
+    schema-utils "^0.3.0"
 
 filename-regex@^2.0.0:
   version "2.0.0"