Simplified design. Added shuffle

sorenlouv · Apr 10, 2012 · 3dd66e0 · 3dd66e0
1 parent 0724a31
commit 3dd66e0
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 90 deletions.
diff --git a/coffee/player.coffee b/coffee/player.coffee
@@ -9,11 +9,15 @@ class Player
     if @current.src != ""
       return false
     else
-      return true
+      return true    
+
+  shuffle: (playlist) -> 
+    playlist.sort -> 0.5 - Math.random()
 
   # add playlist
-  setPlaylist: (playlist = []) ->
+  setPlaylist: (playlist = []) ->    
     @playlist = @playlist.concat(playlist)
+    @playlist = @shuffle(@playlist)
 
   resetPlaylist: ->
     @playlist = []  

diff --git a/coffee/screen.coffee b/coffee/screen.coffee
@@ -1,29 +1,13 @@
 jQuery ->  
 
-  # music controller: jQueryUI button style
-  $( ".play-pause" ).button
-    text: false 
-    icons:
-      primary: "ui-icon-play"
-  .click -> 
-    # start
-    if songPlayer.unstarted()
-      songPlayer.start()
-
-    # resume
-    else if songPlayer.current.paused is true      
-      songPlayer.play()
-
-    # pause
-    else
-      songPlayer.pause()
-
   # add local files to playlist
   $(".upload-song").change =>
     # initial song upload will move upload element to dialog window
     if $(this).parent('.controller-container')
+      $('.init-app').hide();
       $(".upload-song").prependTo('#playlist-dialog');
-      $(".play-pause, .view-playlist").show();
+      $(".initially-hidden").removeClass('initially-hidden');
+      initPlayButton()
 
     # add local songs to playlist
     files = $(".upload-song")[0].files       
@@ -59,4 +43,26 @@ jQuery ->
     #       # artist = dv.getString(30, dv.tell());
     #       # album = dv.getString(30, dv.tell());
     #       # year = dv.getString(4, dv.tell());
-    #       console.log(title);
+    #       console.log(title);
+
+initPlayButton = ->
+  # music controller: jQueryUI button style
+  $( ".play-pause" ).button
+    text: false 
+    icons:
+      primary: "ui-icon-play"
+  .click -> 
+    # start
+    if songPlayer.unstarted()
+      songPlayer.start()
+      console.log("unstarted")
+
+    # resume
+    else if songPlayer.current.paused is true      
+      songPlayer.play()
+      console.log("resume")
+
+    # pause
+    else
+      songPlayer.pause()
+      console.log("pause")
diff --git a/index.php b/index.php
@@ -36,16 +36,21 @@
 
 		<div class="progress-bar">
 			<div class="controller-container">
-				<p class="play-pause"></p>
-				<a class="view-playlist" href="#">Se spilleliste</a>
-				<input type="file" value="upload files" class="upload-song" multiple="multiple" />				
+				<p class="play-pause initially-hidden"></p>
+				<a class="view-playlist initially-hidden" href="#">Se spilleliste</a>
 			</div>
 			<div class="progress-bar-inside"></div>
-			<p class="timer-seconds">60</p>		
+			<div class="content-inside">
+				<div class="init-app">
+					<p class="hint">Vælg 100 sange fra din computer for at starte</p>
+					<input type="file" value="upload files" class="upload-song" multiple="multiple" />
+				</div>
+				<p class="timer-seconds initially-hidden">60</p>		
+			</div>
 		</div>
 
-		<div class="club-number">Club #<span>0</span></div>
-		<div class="current-song">Introsang</div>
+		<div class="club-number initially-hidden">Club #<span>0</span></div>
+		<div class="current-song initially-hidden">&nbsp;</div>
 	</div>
 
 	<div id="playlist-dialog" title="Spilleliste">

diff --git a/js/player.js b/js/player.js
diff --git a/js/screen.js b/js/screen.js
@@ -1,26 +1,15 @@
 (function() {
+  var initPlayButton;
 
   jQuery(function() {
     var _this = this;
-    $(".play-pause").button({
-      text: false,
-      icons: {
-        primary: "ui-icon-play"
-      }
-    }).click(function() {
-      if (songPlayer.unstarted()) {
-        return songPlayer.start();
-      } else if (songPlayer.current.paused === true) {
-        return songPlayer.play();
-      } else {
-        return songPlayer.pause();
-      }
-    });
     $(".upload-song").change(function() {
       var file, files, lastDotPos, playlist, title, url, _i, _len;
       if ($(_this).parent('.controller-container')) {
+        $('.init-app').hide();
         $(".upload-song").prependTo('#playlist-dialog');
-        $(".play-pause, .view-playlist").show();
+        $(".initially-hidden").removeClass('initially-hidden');
+        initPlayButton();
       }
       files = $(".upload-song")[0].files;
       if (window.webkitURL) window.URL = window.webkitURL;
@@ -46,4 +35,24 @@
     });
   });
 
+  initPlayButton = function() {
+    return $(".play-pause").button({
+      text: false,
+      icons: {
+        primary: "ui-icon-play"
+      }
+    }).click(function() {
+      if (songPlayer.unstarted()) {
+        songPlayer.start();
+        return console.log("unstarted");
+      } else if (songPlayer.current.paused === true) {
+        songPlayer.play();
+        return console.log("resume");
+      } else {
+        songPlayer.pause();
+        return console.log("pause");
+      }
+    });
+  };
+
 }).call(this);
diff --git a/sass/screen.sass b/sass/screen.sass
@@ -1,3 +1,4 @@
+@import url(http://fonts.googleapis.com/css?family=Oxygen)
 // This import applies a global reset to any page that imports this stylesheet.
 @import blueprint/reset
 // To configure blueprint, edit the partials/base.sass file.
@@ -67,7 +68,6 @@ body.bp
     z-index: 2
     .play-pause, .view-playlist
       height: 25px
-      display: none
       line-height: 25px
       margin-right: 10px
       float: left
@@ -83,20 +83,30 @@ body.bp
     z-index: 1
     //+single-transition('width', '1s')
 
-  .timer-seconds
-    +column(10, true)
+
+  .content-inside
+    width: 100%
+    height: 100%
     color: #000
-    font-size: 10em
-    height: 1em
-    left: 50%
-    line-height: 1em
-    margin-top: -0.5em
-    margin-left: -0.75em
-    position: absolute
-    text-align: center
-    top: 50%
-    width: 1.5em
+    position: relative
     z-index: 2
+    text-align: center
+
+    .init-app      
+      width: 100%
+      margin-top: 100px
+
+      p
+        font-size: 2em
+        font-family: 'Oxygen', sans-serif
+        margin-bottom: 0.5em
+
+      .upload-song
+        width: 95px
+
+    .timer-seconds
+      font-size: 10em
+      margin-top: 0.5em
 
 .club-number, .current-song
   color: #666
@@ -112,4 +122,8 @@ body.bp
   display: none
 
   .playlist .current
-    font-weight: bold
+    font-weight: bold
+
+// elements which are hidden until app is started
+.initially-hidden
+  display: none!important