Merge pull request #21 from adlawson/series/4.x

Project refactor for Mixcloud's new (Beta) website

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.gitignore

@@ -1,4 +1,5 @@
 .DS_STORE
-*.crx
-*.xpi
-*.zip
+build
+node_modules
+npm-debug.log
+templates/*.js

Makefile

@@ -1,13 +1,55 @@
-FILES:=images/* templates/* playerbar.js tracklist.js manifest.json
+#
+# Source
+# ------
+BUILD := manifest.json images/* build/mixcloud-tracklist.js
+SOURCE := manifest.json images/* templates/*.dust tracklist.js
+
+
+# Executable path
+# ---------------
+PATH_BIN = ./node_modules/.bin
+
+
+# Make all
+# --------
+all: js xpi zip userscript
+
+.PHONY: clean
+clean:
+	@rm -rf build templates/*.js
+
+
+# Build aliases
+# -------------
+.PHONY: js
+js: build/mixcloud-tracklist.js
 
 .PHONY: xpi
-xpi: mixcloud-tracklist.xpi
+xpi: build/mixcloud-tracklist.xpi
 
 .PHONY: zip
-zip: mixcloud-tracklist.zip
+zip: build/mixcloud-tracklist.zip
+
+.PHONY: userscript
+userscript: build/mixcloud-tracklist.user.js
+
+
+# Build targets
+# -------------
+build:
+	@mkdir -p build
+
+build/mixcloud-tracklist.js: build $(SOURCE)
+	@$(PATH_BIN)/dustc templates/**/*.dust -s --cjs
+	@$(PATH_BIN)/browserify tracklist.js -t babelify -o build/mixcloud-tracklist.js -d
+
+build/mixcloud-tracklist.xpi: build js $(SOURCE)
+	@zip build/mixcloud-tracklist.xpi $(BUILD)
 
-mixcloud-tracklist.xpi: $(FILES)
-	zip mixcloud-tracklist.xpi $(FILES)
+build/mixcloud-tracklist.zip: build js $(SOURCE)
+	@zip build/mixcloud-tracklist.zip $(BUILD)
 
-mixcloud-tracklist.zip: $(FILES)
-	zip mixcloud-tracklist.zip $(FILES)
+build/mixcloud-tracklist.user.js: build js $(SOURCE)
+	@cat userscript.txt > build/mixcloud-tracklist.user.js
+	@echo '' >> build/mixcloud-tracklist.user.js
+	@cat build/mixcloud-tracklist.js >> build/mixcloud-tracklist.user.js

README.md

@@ -2,26 +2,34 @@
 
 This is an *unofficial* Mixcloud browser extension. It displays the tracklist
 the same way it did before they changed their [licensing][mc-support].
-
-> As a non-interactive streaming service, our licenses don't allow for
-> tracklists to be made visible in advance. However as you listen through a
-> show or DJ mix set, the track names will be revealed.
->
-> Last Updated: Jul 28, 2015 05:20PM IST
+It supports both the old (~2013-2016) Mixcloud website and the new Mixcloud
+website (still in beta as of November 2016).
 
 The extension has been built with [Mozilla's WebExtensions API][moz-webext] so
 it should be compatible with Mozilla Firefox, Google Chrome, and any other
 browser that supports the WebExtension APIs.
 
-## Install
- - [Chrome Web Store][chrome-install]
- - [Firefox Add-ons][firefox-install]
- - [Tampermonkey Userscript][tampermonkey-install] (requires [Tampermonkey][tampermonkey])
+---
+
+ - [Google Chrome Extension][chrome-install]
+ - [Mozilla Firefox Add-on][firefox-install]
+ - [Tampermonkey Userscript][tampermonkey-install] for users on other browsers (requires [Tampermonkey][tampermonkey])
+
+---
 
 ![Screenshot](screenshot.png)
 
+## Didn't this used to exist?
+Yep, it used to be built into the Mixcloud website, but their licensing changed meaning they couldn't show the tracklist.
+
+> As a non-interactive streaming service, our licenses don't allow for
+> tracklists to be made visible in advance. However as you listen through a
+> show or DJ mix set, the track names will be revealed.
+>
+> Last Updated: Jul 28, 2015 05:20PM IST
+
 ## Thanks
- - [Perry Harlock](https://github.com/perryharlock) for helping me with the the HTML template.
+ - [Perry Harlock](https://github.com/perryharlock) for helping me with the the HTML template and for debugging some of the compatibility issues with the new Mixcloud website :heart:
 
 ## License
 The content of this library is released under the **MIT License** by

browser.js

@@ -0,0 +1,49 @@
+/*
+ * Mixcloud Tracklist browser extension
+ *
+ * Copyright (c) 2015 Andrew Lawson <http://adlawson.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @link https://github.com/adlawson/mixcloud-tracklist
+ */
+
+'use strict';
+
+module.exports = {
+    insert,
+    insertBefore,
+    onChange,
+    querySelector,
+    replace
+}
+
+function insert(container, html) {
+    container.insertAdjacentHTML('beforeend', html);
+}
+
+function insertBefore(container, sibling, html) {
+    const temp = document.createElement('div');
+    temp.insertAdjacentHTML('afterbegin', html);
+    container.insertBefore(temp.firstChild, sibling);
+}
+
+function onChange(element, fn) {
+    const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+            if (mutation.addedNodes.length > 0) fn();
+        });
+    });
+    observer.observe(element, { childList: true });
+}
+
+function querySelector(query) {
+    return document.querySelector(query);
+}
+
+function replace(container, old, html) {
+    const temp = document.createElement('div');
+    temp.insertAdjacentHTML('afterbegin', html);
+    container.replaceChild(temp.firstChild, old);
+}

manifest.json

@@ -1,33 +1,25 @@
 {
-    "name": "Mixcloud Tracklist",
-    "version": "3.0.0",
-    "manifest_version": 2,
-    "description": "Display the tracklist on Mixcloud Cloudcasts",
-    "homepage_url": "https://github.com/adlawson/mixcloud-tracklist",
-    "icons": {
-        "16": "images/mixcloud-16.png",
-        "48": "images/mixcloud-48.png",
-        "128": "images/mixcloud-128.png"
-    },
-    "applications": {
-        "gecko": {
-            "id": "[email protected]",
-            "strict_min_version": "45.0"
-        }
-    },
-    "content_scripts": [
-        {
-            "matches": ["*://*.mixcloud.com/*"],
-            "run_at": "document_start",
-            "js": ["playerbar.js"]
-        },
-        {
-            "matches": ["*://*.mixcloud.com/*"],
-            "run_at": "document_idle",
-            "js": ["tracklist.js"]
-        }
-    ],
-    "web_accessible_resources": [
-        "templates/tracklist.html"
-    ]
+  "name": "Mixcloud Tracklist",
+  "version": "4.0.0",
+  "manifest_version": 2,
+  "description": "Display tracklists on Mixcloud",
+  "homepage_url": "https://github.com/adlawson/mixcloud-tracklist",
+  "icons": {
+    "16": "images/mixcloud-16.png",
+    "48": "images/mixcloud-48.png",
+    "128": "images/mixcloud-128.png"
+  },
+  "applications": {
+    "gecko": {
+      "id": "[email protected]",
+      "strict_min_version": "45.0"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*.mixcloud.com/*"],
+      "run_at": "document_idle",
+      "js": ["build/mixcloud-tracklist.js"]
+    }
+  ]
 }

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "mixcloud-tracklist",
+  "version": "4.0.0",
+  "private": true,
+  "description": "Display tracklists on Mixcloud",
+  "author": "Andrew Lawson",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adlawson/mixcloud-tracklist.git"
+  },
+  "homepage": "https://github.com/adlawson/mixcloud-tracklist",
+  "bugs": "https://github.com/adlawson/mixcloud-tracklist/issues",
+  "license": "MIT",
+  "engines": {
+  	"node": ">=6.9.0"
+  },
+  "dependencies": {
+  	"dustjs-linkedin": "~2.7.0",
+    "request": "~2.78"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.0.0",
+    "babel-preset-es2015": "^6.18.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.1.1"
+  }
+}

templates/legacy.dust

@@ -0,0 +1,51 @@
+<div ng-init="tracklistShown=false;audioLength={audio_length};sectionStartTimes=[]">
+
+    <!-- Toggle -->
+    <div class="tracklist-toggle-container">
+        <svg version="1.1" class="tracklist-toggle-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="160px" height="26px" viewBox="0 0 160 26" enable-background="new 0 0 160 26" xml:space="preserve">
+            <switch>
+                <g><path fill-rule="evenodd" clip-rule="evenodd" d="M160,26c0,0-5-2.135-5-5.043C155,14.744,155,5,155,5c0-2.761-2.238-5-5-5H10C7.239,0,5,2.239,5,5c0,0,0,9.803,0,16.014C5,23.893,0,26,0,26H160z"></path></g>
+                <foreignObject width="0" height="0" overflow="hidden">
+                    <div class="tracklist-toggle-fallback"></div>
+                </foreignObject>
+            </switch>
+        </svg>
+        <div class="tracklist-toggle-text" m-click="tracklistShown=!tracklistShown">
+            <span ng-show="tracklistShown" class="tracklist-toggle-arrow arrow-show ng-hide">
+                <span class="tracklist-toggle-text-content">Hide </span>
+            </span>
+            <span ng-show="!tracklistShown" class="tracklist-toggle-arrow">
+                <span class="tracklist-toggle-text-content">Show </span>
+            </span>
+            <span class="tracklist-toggle-text-content">Tracklist</span>
+        </div>
+    </div>
+
+    <!-- Tracklist -->
+    <div class="cloudcast-tracklist" ng-class="{'open':tracklistShown}">
+        {#sections}
+            <div class="track-row cf" ng-hide="juno.sections.length">
+                <div class="container">
+                    {?chapter}
+                        <div class="track-name" title="{title}">
+                            <span class="track-number">{track_number}.</span>
+                            <a class="track-song-name-link" href="{track_url}">{chapter}</span>
+                        </div>
+                    {:else}
+                        <div class="track-name" title="{title}">
+                            <span class="track-number">{track_number}.</span>
+                            <a class="track-song-name-link" href="{track_url}">{title}</a>
+                        </div>
+                    {/chapter}
+                    {?artist}
+                        <div class="track-by">
+                            <span class="track-by-name">by</span>
+                            <a class="artist-name-link" href="{artist_url}"><strong>{artist}</strong></a>
+                        </div>
+                    {/artist}
+                </div>
+            </div>
+        {/sections}
+    </div>
+
+</div>