Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
...
  • 6 commits
  • 11 files changed
  • 0 commit comments
  • 1 contributor
View
10 Makefile
@@ -1,12 +1,12 @@
all: $(shell find src/coffee -name "*.coffee" -type f)
coffee -o src/compiled src/coffee
-dist:
+build:
@cat \
css/font-awesome.css \
css/nanoscroller.css \
css/style.css \
- > dist/application.css
+ > build/application.css
@cat \
lib/MIDI.js/VersionControl.Base64.js \
lib/MIDI.js/lib/base64binary.js \
@@ -36,8 +36,8 @@ dist:
src/compiled/PlayerWidget.js \
src/compiled/Euphony.js \
src/compiled/Main.js \
- > dist/application.js
- @uglifyjs -o dist/application.js dist/application.js
+ > build/application.js
+ @uglifyjs -o build/application.js build/application.js
watch:
@@ -46,4 +46,4 @@ watch:
server:
python -m SimpleHTTPServer
-.PHONY: dist watch server
+.PHONY: build watch server
View
9 dist/application.css → build/application.css
@@ -298,12 +298,9 @@ ul, ol {
a {
color: #bbb;
- text-decoration: none;
- font-weight: bold;
}
a:hover {
color: #ddd;
- text-decoration: underline;
}
#canvas {
@@ -402,11 +399,6 @@ a:hover {
background-color: rgba(200, 200, 200, 0.2) !important;
}
-.player-filedrop {
- height: 50px;
- border: 1px solid #171717;
-}
-
.hover {
background-color: rgba(200, 200, 200, 0.2) !important;
}
@@ -430,4 +422,5 @@ a:hover {
font-size: 11px;
color: #aaa;
cursor: default;
+ text-align: right;
}
View
18 dist/application.js → build/application.js
9 additions, 9 deletions not shown
View
9 css/style.css
@@ -16,12 +16,9 @@ ul, ol {
a {
color: #bbb;
- text-decoration: none;
- font-weight: bold;
}
a:hover {
color: #ddd;
- text-decoration: underline;
}
#canvas {
@@ -120,11 +117,6 @@ a:hover {
background-color: rgba(200, 200, 200, 0.2) !important;
}
-.player-filedrop {
- height: 50px;
- border: 1px solid #171717;
-}
-
.hover {
background-color: rgba(200, 200, 200, 0.2) !important;
}
@@ -148,4 +140,5 @@ a:hover {
font-size: 11px;
color: #aaa;
cursor: default;
+ text-align: right;
}
View
7 debug.html
@@ -70,15 +70,12 @@
<ul class="player-playlist"></ul>
</div>
</ul>
-
- <div class="player-filedrop">
- <span class="player-filedrop-text">Drop your own MIDI file here</span>
- </div>
</div>
<footer id="about">
- Source code available on <a target="_blank" href="https://github.com/qiao/euphony">Github</a>
+ Source code available on <a target="_blank" href="https://github.com/qiao/euphony">Github</a> <br>
+ Try drag &amp; drop your MIDI files to play
</footer>
</body>
View
11 index.html
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<title>Euphony</title>
- <link href="./dist/application.css" rel="stylesheet" />
+ <link href="./build/application.css" rel="stylesheet" />
<script src="./lib/Detector.js" type="text/javascript"></script>
<script type="text/javascript">
if (!Detector.webgl) {
@@ -36,18 +36,15 @@
<ul class="player-playlist"></ul>
</div>
</ul>
-
- <div class="player-filedrop">
- <span class="player-filedrop-text">Drop your own MIDI file here</span>
- </div>
</div>
<footer id="about">
- Source code available on <a target="_blank" href="https://github.com/qiao/euphony">Github</a>
+ Source code available on <a target="_blank" href="https://github.com/qiao/euphony">Github</a> <br>
+ Try drag &amp; drop your MIDI files to play
</footer>
- <script src="./dist/application.js" type="text/javascript"></script>
+ <script src="./build/application.js" type="text/javascript"></script>
</body>
</html>
View
4 lib/MIDI.js/MIDI.Plugin.js
@@ -45,7 +45,7 @@ if (window.AudioContext || window.webkitAudioContext) (function () {
ctx.decodeAudioData(buffer, function (buffer) {
var msg = url; while(msg.length < 3) msg += "&nbsp;";
if (typeof(loader) !== "undefined") {
- loader.message("Downloading: 100%<br>Processing: "+(index/87 * 100 >> 0)+"%<br>" + msg);
+ loader.message("Processing: "+(index/87 * 100 >> 0)+"%<br>");
}
buffer.id = url;
bufferList[index] = buffer;
@@ -483,4 +483,4 @@ MIDI.noteToKey = {}; // 108 == C8
})();
-MIDI.pianoKeyOffset = 21;
+MIDI.pianoKeyOffset = 21;
View
21 src/coffee/Main.coffee
@@ -3,8 +3,6 @@ $(document)
false
.on 'mousewheel', ->
false
- .on 'drop', ->
- false
.on 'ready', ->
# global loader to show progress
@@ -43,3 +41,22 @@ $(document)
candidates = [3, 5, 6, 7, 10, 11, 12, 13, 14, 16, 19, 30]
id = Math.floor(Math.random() * candidates.length)
player.setTrack(candidates[id])
+
+ setTimeout (->
+ player.hide()
+ player.autoHide()
+ ), 5000
+
+ # drag and drop MIDI files to play
+ document.ondrop = (event) =>
+ event.preventDefault()
+ file = event.dataTransfer.files[0]
+ reader = new FileReader()
+ reader.onload = (e) =>
+ midiFile = e.target.result
+ player.stop()
+ loader.message 'Loading MIDI', ->
+ app.loadMidiFile midiFile, ->
+ loader.stop ->
+ player.play()
+ reader.readAsDataURL(file)
View
61 src/coffee/PlayerWidget.coffee
@@ -5,7 +5,6 @@ class PlayerWidget
@$controlsContainer = $('.player-controls', @$container)
@$playlistContainer = $('.player-playlist-container', @$container)
@$progressContainer = $('.player-progress-container', @$container)
- @$filedropContainer = $('.player-filedrop', @$container)
@$progressBar = $('.player-progress-bar', @$container)
@$progressText = $('.player-progress-text', @$container)
@@ -24,57 +23,79 @@ class PlayerWidget
@$playBtn.click =>
if @current is 'paused' then @resume() else @play()
+ # invoke callback on progress bar click
@$progressContainer.click (event) =>
progress = (event.clientX - @$progressContainer.offset().left) / @$progressContainer.width()
@progressCallback?(progress)
+ # set track on playlist click
@$playlist.click (event) =>
$target = $(event.target)
if $target.is('li')
$list = $('li', @$playlist)
@setTrack($list.index($target))
- filedrop = @$filedropContainer[0]
- filedrop.ondragenter = ->
- $(filedrop).addClass('hover')
- filedrop.ondragleave = ->
- $(filedrop).removeClass('hover')
- filedrop.ondrop = (event) =>
- $(filedrop).removeClass('hover')
- event.stopPropagation()
- event.preventDefault()
- file = event.dataTransfer.files[0]
- reader = new FileReader()
- reader.onload = (e) =>
- @filedropCallback?(e.target.result)
- reader.readAsDataURL(file)
-
@$container.on 'mousewheel', (event) ->
event.stopPropagation()
+ # update size
@updateSize()
-
$(window).resize(@updateSize)
+
+ # set track on url hash change
$(window).on('hashchange', @setTrackFromHash)
+ autoHide: =>
+ onmousemove = (event) =>
+ if event.pageX < 400
+ @show()
+ else
+ @hide()
+ $(document)
+ .on('mousemove', onmousemove)
+ .on 'mousedown', ->
+ $(this).off 'mousemove', onmousemove
+ .on 'mouseup', ->
+ $(this).on 'mousemove', onmousemove
+
updateSize: =>
@$playlistContainer
.height(
@$container.innerHeight() -
@$controlsContainer.outerHeight(true) -
@$progressContainer.outerHeight(true) -
- @$filedropContainer.outerHeight(true)
+ 15
)
.nanoScroller()
show: (callback) =>
+ return if @visible or @animating
+ @visible = true
+ @animating = true
@$container
.animate {
left: '0px'
}, {
- duration: 1000
+ duration: 500
+ easing: 'easeInOutCubic'
+ complete: =>
+ @animating = false
+ callback?()
+ }
+
+ hide: (callback) =>
+ return if !@visible or @animating
+ @visible = false
+ @animating = true
+ @$container
+ .animate {
+ left: "#{-@$container.width()}px"
+ }, {
+ duration: 500
easing: 'easeInOutCubic'
- complete: callback
+ complete: =>
+ @animating = false
+ callback?()
}
setPlaylist: (@playlist) ->
View
28 src/compiled/Main.js
@@ -5,8 +5,6 @@
return false;
}).on('mousewheel', function() {
return false;
- }).on('drop', function() {
- return false;
}).on('ready', function() {
window.loader = new LoaderWidget();
loader.message('Downloading');
@@ -14,6 +12,7 @@
return app.initMidi(function() {
app.initScene();
return app.loadBuiltinPlaylist(function(playlist) {
+ var _this = this;
window.player = new PlayerWidget('#player');
player.setPlaylist(playlist);
player.on('pause', app.pause);
@@ -41,7 +40,7 @@
});
});
app.on('progress', player.displayProgress);
- return player.show(function() {
+ player.show(function() {
var candidates, id;
if (window.location.hash) {
return player.setTrackFromHash();
@@ -51,6 +50,29 @@
return player.setTrack(candidates[id]);
}
});
+ setTimeout((function() {
+ player.hide();
+ return player.autoHide();
+ }), 5000);
+ return document.ondrop = function(event) {
+ var file, reader;
+ event.preventDefault();
+ file = event.dataTransfer.files[0];
+ reader = new FileReader();
+ reader.onload = function(e) {
+ var midiFile;
+ midiFile = e.target.result;
+ player.stop();
+ return loader.message('Loading MIDI', function() {
+ return app.loadMidiFile(midiFile, function() {
+ return loader.stop(function() {
+ return player.play();
+ });
+ });
+ });
+ };
+ return reader.readAsDataURL(file);
+ };
});
});
});
View
78 src/compiled/PlayerWidget.js
@@ -30,17 +30,19 @@
this.onplay = __bind(this.onplay, this);
+ this.hide = __bind(this.hide, this);
+
this.show = __bind(this.show, this);
this.updateSize = __bind(this.updateSize, this);
- var filedrop,
- _this = this;
+ this.autoHide = __bind(this.autoHide, this);
+
+ var _this = this;
this.$container = $(container);
this.$controlsContainer = $('.player-controls', this.$container);
this.$playlistContainer = $('.player-playlist-container', this.$container);
this.$progressContainer = $('.player-progress-container', this.$container);
- this.$filedropContainer = $('.player-filedrop', this.$container);
this.$progressBar = $('.player-progress-bar', this.$container);
this.$progressText = $('.player-progress-text', this.$container);
this.$playlist = $('.player-playlist', this.$container);
@@ -81,25 +83,6 @@
return _this.setTrack($list.index($target));
}
});
- filedrop = this.$filedropContainer[0];
- filedrop.ondragenter = function() {
- return $(filedrop).addClass('hover');
- };
- filedrop.ondragleave = function() {
- return $(filedrop).removeClass('hover');
- };
- filedrop.ondrop = function(event) {
- var file, reader;
- $(filedrop).removeClass('hover');
- event.stopPropagation();
- event.preventDefault();
- file = event.dataTransfer.files[0];
- reader = new FileReader();
- reader.onload = function(e) {
- return typeof _this.filedropCallback === "function" ? _this.filedropCallback(e.target.result) : void 0;
- };
- return reader.readAsDataURL(file);
- };
this.$container.on('mousewheel', function(event) {
return event.stopPropagation();
});
@@ -108,17 +91,62 @@
$(window).on('hashchange', this.setTrackFromHash);
}
+ PlayerWidget.prototype.autoHide = function() {
+ var onmousemove,
+ _this = this;
+ onmousemove = function(event) {
+ if (event.pageX < 400) {
+ return _this.show();
+ } else {
+ return _this.hide();
+ }
+ };
+ return $(document).on('mousemove', onmousemove).on('mousedown', function() {
+ return $(this).off('mousemove', onmousemove);
+ }).on('mouseup', function() {
+ return $(this).on('mousemove', onmousemove);
+ });
+ };
+
PlayerWidget.prototype.updateSize = function() {
- return this.$playlistContainer.height(this.$container.innerHeight() - this.$controlsContainer.outerHeight(true) - this.$progressContainer.outerHeight(true) - this.$filedropContainer.outerHeight(true)).nanoScroller();
+ return this.$playlistContainer.height(this.$container.innerHeight() - this.$controlsContainer.outerHeight(true) - this.$progressContainer.outerHeight(true) - 15).nanoScroller();
};
PlayerWidget.prototype.show = function(callback) {
+ var _this = this;
+ if (this.visible || this.animating) {
+ return;
+ }
+ this.visible = true;
+ this.animating = true;
return this.$container.animate({
left: '0px'
}, {
- duration: 1000,
+ duration: 500,
+ easing: 'easeInOutCubic',
+ complete: function() {
+ _this.animating = false;
+ return typeof callback === "function" ? callback() : void 0;
+ }
+ });
+ };
+
+ PlayerWidget.prototype.hide = function(callback) {
+ var _this = this;
+ if (!this.visible || this.animating) {
+ return;
+ }
+ this.visible = false;
+ this.animating = true;
+ return this.$container.animate({
+ left: "" + (-this.$container.width()) + "px"
+ }, {
+ duration: 500,
easing: 'easeInOutCubic',
- complete: callback
+ complete: function() {
+ _this.animating = false;
+ return typeof callback === "function" ? callback() : void 0;
+ }
});
};

No commit comments for this range

Something went wrong with that request. Please try again.