From 06b3412e4f7b08bce8b90e48da22ac30fac469db Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 28 Mar 2015 16:32:54 -0700 Subject: [PATCH] First attempt at embeddable winamp2-js --- embed.html | 8 +++++ embed/.gitignore | 1 + embed/Gruntfile.js | 58 +++++++++++++++++++++++++++++++ embed/README.md | 20 +++++++++++ embed/analytics.js | 9 +++++ embed/package.json | 9 +++++ html/template.html | 85 ++++++++++++++++++++++++++++++++++++++++++++++ js/embed.js | 59 ++++++++++++++++++++++++++++++++ 8 files changed, 249 insertions(+) create mode 100644 embed.html create mode 100644 embed/.gitignore create mode 100644 embed/Gruntfile.js create mode 100644 embed/README.md create mode 100644 embed/analytics.js create mode 100644 embed/package.json create mode 100644 html/template.html create mode 100644 js/embed.js diff --git a/embed.html b/embed.html new file mode 100644 index 00000000..272026f7 --- /dev/null +++ b/embed.html @@ -0,0 +1,8 @@ + + + + + diff --git a/embed/.gitignore b/embed/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/embed/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/embed/Gruntfile.js b/embed/Gruntfile.js new file mode 100644 index 00000000..7d660915 --- /dev/null +++ b/embed/Gruntfile.js @@ -0,0 +1,58 @@ +module.exports = function(grunt) { + + // 1. All configuration goes here + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + concat: { + js: { + // the files to concatenate + src: [ + '../js/jszip.2.4.0.min.js', + '../js/browser.js', + '../js/file.js', + '../js/visualizer.js', + '../js/media.js', + '../js/font.js', + '../js/skin-sprites.js', + '../js/skin.js', + '../js/multi-display.js', + '../js/hotkeys.js', + '../js/context.js', + '../js/window-manager.js', + '../js/main-window.js', + '../js/winamp.js', + '../js/embed.js' + ], + // the location of the resulting JS file + dest: '../embed.js' + }, + css: { + // the files to concatenate + src: [ + '../css/winamp.css', + '../css/main.css', + '../css/context-menu.css' + ], + // the location of the resulting JS file + dest: '../embed.css' + } + }, + uglify: { + options: { + // the banner is inserted at the top of the output + banner: '/* http://jordaneldredge.com/projects/winamp2-js/ */\n' + }, + dist: { + files: { + '../embed.min.js': ['../embed.js'] + } + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-concat'); + + grunt.registerTask('default', ['concat', 'uglify']); + +}; diff --git a/embed/README.md b/embed/README.md new file mode 100644 index 00000000..d99f45ac --- /dev/null +++ b/embed/README.md @@ -0,0 +1,20 @@ +## TLDR; + +You can ignore everything in this directory. + +# Production + +In production (http://jordaneldredge.com/projects/winamp.js/), I host a version +of the project that minifies and inlines many of the assets in improve load +time, and reduce load on my server. These files are used to build that version +production version of `index.html`. + +If you have [Grunt](http://gruntjs.com) installed, you should be able to +generate the production build using these steps: + + cd production/ + npm install + grunt + + + diff --git a/embed/analytics.js b/embed/analytics.js new file mode 100644 index 00000000..ec187180 --- /dev/null +++ b/embed/analytics.js @@ -0,0 +1,9 @@ + diff --git a/embed/package.json b/embed/package.json new file mode 100644 index 00000000..abeecf9b --- /dev/null +++ b/embed/package.json @@ -0,0 +1,9 @@ +{ + "name": "Winamp2-js", + "version": "0.1.0", + "devDependencies": { + "grunt": "^0.4.5", + "grunt-contrib-concat": "^0.5.1", + "grunt-contrib-uglify": "^0.8.0" + } +} diff --git a/html/template.html b/html/template.html new file mode 100644 index 00000000..d898b76e --- /dev/null +++ b/html/template.html @@ -0,0 +1,85 @@ +
+
Loading...
+
+
+
    +
  • Winamp2-js...
    • +
    • +
  • Play File...
    • +
  • +
      +
    • Load Skin...
      • +
      • +
    • <Base Skin>
      • +
    • Mac OSX v1.5 (Aqua)
      • +
    • TopazAmp
      • +
    • Vizor
      • +
    • XMMS Turquoise
      • +
    • Zaxon Remake
      • +
    + Skins +
    • +
    • +
  • Exit
    • +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+
+ +
diff --git a/js/embed.js b/js/embed.js new file mode 100644 index 00000000..6b7cbf5d --- /dev/null +++ b/js/embed.js @@ -0,0 +1,59 @@ +var scriptTag = document.currentScript; + +var loadCss = function(url) { + var xhr = new XMLHttpRequest(); + xhr.open('GET', url); + xhr.onload = function(e) { + if (this.status == 200) { + var style = document.createElement("style"); + + style.appendChild(document.createTextNode(this.response)); + + document.head.appendChild(style); + } + }; + xhr.send(); +}; + +loadCss('embed.css'); + +var xhr = new XMLHttpRequest(); +xhr.open('GET', 'html/template.html'); +xhr.onload = function(e) { + if (this.status == 200) { + initFromTemplate(this.response); + } +}; +xhr.send(); + +var initFromTemplate = function (template) { + var node = document.createElement('div'); + node.style.position = "relative"; + node.innerHTML = template; + + if (scriptTag.nextSibling) { + scriptTag.parentNode.insertBefore(node, scriptTag.nextSibling); + } + else { + scriptTag.parentNode.appendChild(node); + } + if(Browser.isCompatible()) { + winamp = Winamp.init({ + 'volume': 50, + 'balance': 0, + 'mediaFile': { + 'url': scriptTag.dataset.media, + 'name': scriptTag.dataset.trackname + }, + 'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz' + }); + + Hotkeys.init(winamp); + Context.init(winamp); + } else { + document.getElementById('winamp').style.display = 'none'; + document.getElementById('browser-compatibility').style.display = 'block'; + } +}; + +