David A. Windham
david
/
radio
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

kitch sink -post in main

windhamdavid 9 years ago
parent
9789d5a072
commit
e5b3ded819
26 changed files with 499 additions and 322 deletions
Unified View Show Diff Stats
  1. 3 1
      app.js
  2. 0 0
      app/css/style.min.css
  3. BIN
      app/img/1.png
  4. BIN
      app/img/eq.gif
  5. BIN
      app/img/glyphicons-halflings-white.png
  6. BIN
      app/img/glyphicons-halflings.png
  7. 17 0
      app/img/none.svg
  8. BIN
      app/img/radio.gif
  9. BIN
      app/img/small-gray-pause.png
  10. BIN
      app/img/small-gray-play.png
  11. 178 154
      app/index.html
  12. 10 4
      app/js/radio.min.js
  13. 1 1
      app/js/templates/room.handlebars
  14. 0 0
      app/js/vendor.min.js
  15. BIN
      dump.rdb
  16. 3 3
      gulpfile.js
  17. 0 0
      src/css/bootstrap-v3.3.6.css
  18. 81 0
      src/css/main.css
  19. BIN
      src/img/1.png
  20. BIN
      src/img/eq.gif
  21. 17 0
      src/img/none.svg
  22. BIN
      src/img/radio.gif
  23. 178 154
      src/index.html
  24. 3 3
      src/js/main.js
  25. 7 1
      src/js/radio.js
  26. 1 1
      src/js/templates/room.handlebars

+ 3 - 1
app.js
View File 

@@ -5,6 +5,8 @@ var conf = {
 
     debug: false,
 
     debug: false,
 
     dbPort: 6379,
 
     dbPort: 6379,
 
     dbHost: '127.0.0.1',
 
     dbHost: '127.0.0.1',
 
+    dbOptions: {},
 
+    mainroom: 'MainRoom'
 
 };
 
 };
 
 
 
 
 
@@ -58,7 +60,7 @@ var sanitizeMessage = function(req, res, next) {
 
 var sendBroadcast = function(text) {
 
 var sendBroadcast = function(text) {
 
     _.each(io.nsps['/'].adapter.rooms, function(room) {
 
     _.each(io.nsps['/'].adapter.rooms, function(room) {
 
         if (room) {
 
         if (room) {
 
-            var message = {'room':room, 'username':'ServerBot', 'msg':text, 'date':new Date()};
 
+            var message = {'room':room, 'username':'Radio-Robbot', 'msg':text, 'date':new Date()};
 
             io.to(room).emit('newMessage', message);
 
             io.to(room).emit('newMessage', message);
 
         }
 
         }
 
     });
 
     });

File diff suppressed because it is too large
+ 0 - 0
app/css/style.min.css


BIN
app/img/1.png
View File


BIN
app/img/eq.gif
View File


BIN
app/img/glyphicons-halflings-white.png
View File


BIN
app/img/glyphicons-halflings.png
View File


+ 17 - 0
app/img/none.svg
View File 

@@ -0,0 +1,17 @@
 
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1"

+	 id="svg2989" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"

+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"

+	 enable-background="new 0 0 48 48" xml:space="preserve">

+<g id="g2991" transform="matrix(1,0,0,-1,121.49153,1300.6102)">

+	<path id="path2993" fill="#A61C2A" d="M-83.8,1276.6c0,2.5-0.6,4.8-1.9,7l-18.8-18.8c2.2-1.3,4.5-1.9,7-1.9c1.9,0,3.6,0.4,5.3,1.1

+		c1.7,0.7,3.1,1.7,4.4,2.9c1.2,1.2,2.2,2.7,2.9,4.4S-83.8,1274.8-83.8,1276.6z M-109.3,1269.6l18.8,18.8c-2.2,1.3-4.5,1.9-7,1.9

+		c-1.9,0-3.6-0.4-5.3-1.1c-1.7-0.7-3.1-1.7-4.4-2.9c-1.2-1.2-2.2-2.7-2.9-4.4s-1.1-3.5-1.1-5.3

+		C-111.2,1274.1-110.6,1271.8-109.3,1269.6z M-76.9,1276.6c0-3.7-0.9-7.2-2.8-10.3c-1.8-3.2-4.3-5.6-7.5-7.5

+		c-3.2-1.8-6.6-2.8-10.3-2.8s-7.2,0.9-10.3,2.8c-3.2,1.8-5.6,4.3-7.5,7.5c-1.8,3.2-2.8,6.6-2.8,10.3s0.9,7.2,2.8,10.3

+		c1.8,3.2,4.3,5.6,7.5,7.5c3.2,1.8,6.6,2.8,10.3,2.8s7.2-0.9,10.3-2.8c3.2-1.8,5.6-4.3,7.5-7.5

+		C-77.8,1283.8-76.9,1280.3-76.9,1276.6z"/>

+</g>

+</svg>

BIN
app/img/radio.gif
View File


BIN
app/img/small-gray-pause.png
View File


BIN
app/img/small-gray-play.png
View File


+ 178 - 154
app/index.html
View File 

@@ -1,183 +1,207 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <head>
 
 <head>
 
    <meta charset="utf-8">
 
    <meta charset="utf-8">
 
-   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+   <meta http-equiv="x-ua-compatible" content="ie=edge">
 
+   <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Daveo Radio</title>
 
    <title>Daveo Radio</title>
 
    <meta name="description" content="">
 
    <meta name="description" content="">
 
-   <meta name="viewport" content="width=device-width">
 
    <link rel="stylesheet" href="css/style.min.css">
 
    <link rel="stylesheet" href="css/style.min.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
- <div class="row-fluid">
 
+<nav class="navbar navbar-default navbar-fixed-top">
 
-     <div class="span12">
 
+	<div class="container">
 
-         <div class="navbar navbar-inverse navbar-fixed-top">
 
+		<div class="navbar-header page-scroll">
 
-             <div class="navbar-inner">
 
+			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 
-                     <a class="brand" href="./index.html">&nbsp;&nbsp;&nbsp;<i class="icon-comment icon-white"></i>&nbsp;SimpleChat&nbsp;</a>
 
+					<span class="sr-only">Toggle navigation</span>
 
-                     <ul class="nav pull-right">
 
+					<span class="icon-bar"></span>
 
-                         <li class="divider-vertical"></li>
 
+					<span class="icon-bar"></span>
 
-                         <li class="">
 
+					<span class="icon-bar"></span>
 
-                             <i class="icon-star icon-white"></i>
 
+			</button>
 
-                         </li>
 
+			<a class="navbar-brand page-scroll" href="#page-top">Radio Daveo</a>
 
-                     </ul>
 
-             </div>
 
-         </div>
 
-     </div>
 
- </div>
 
-<div class="container">
 
-<div class="col-lg-6 text-center">
 
-<section id="audo" class="bg-light-gray">
 
-   <p>Audio Player</p>
 
-		<div class="panel panel-default">
 
-			<div class="panel-body">
 
-				<div id="player">
 
-					<div id="song-information">
 
-						<div class="row">
 
-							<div class="col-xs-8">
 
-								<img id="radio" src="" title="radio" width="25px" style="float:left;margin-right:15px;">
 
-								<span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
 
-								<span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
 
-							</div>
 
-							<div class="col-xs-4">
 
-								
-							</div>
 
-						</div>
 
-					</div>
 
-					<input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
 
-				<div id="controls">
 
-					<div id="amplitude-play-pause" class="amplitude-paused"></div><br>
 
-						<span id="amplitude-current-time">0:00</span>
 
-					</div>
 
-			
-				</div>
 
-			</div>
 
-			<div class="panel-footer">
 
-				<h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span></h6>
 
-			</div>
 
 		</div>
 
 		</div>
 
-</section>
 
+		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
-</div>
 
+			<ul class="nav navbar-nav navbar-right">
 
-</div>
 
+				<li class="hidden"><a href="#page-top"></a></li>
 
+				<li><a class="page-scroll" href="#about">About</a></li>
 
+				<li><a class="page-scroll" href="#contact">Contact</a></li>
 
+			</ul>
 
+		</div>
 
+	</div>
 
+</nav>
 
 
 
+<header>
 
+	<div class="container">
 
+		<div class="intro-text">
 
+			<div class="intro-lead-in">Leave some room for some stuff up here</div>
 
+			<div class="intro-heading">Like maybe a cool header banner with a couple meters</div>
 
+			<a href="#intro" class="page-scroll btn btn-xl">how to listen</a>
 
+		</div>
 
+	</div>
 
+</header>
 
 
 
-<div class="container">
 
+<section id="audio" class="bg-light-gray">
 
-<div class="col-lg-6 text-center">
 
+   <div class="container">
 
-<section id="request-line" class="bg-light-gray">
 
+      <div class="row">
 
-   
+         <div class="col-md-6">
 
-   <!-- Content -->
 
+            <!-- player -->
 
-   <div class="row-fluid">
 
+            <div class="panel panel-default">
 
-       <!-- Header -->
 
+               <div class="panel-body">
 
+                  <div id="player">
 
+                     <div id="song-information">
 
+                        <div class="row">
 
+                           <div class="col-xs-8">
 
+                              <img id="radio" src="" title="radio" width="25px" style="float:left;margin-right:15px;">
 
+                              <span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
 
+                              <span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
 
+                           </div>
 
+                           <div class="col-xs-4">
 
+                        </div>
 
+                     </div>
 
+                  </div>
 
+                  <input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
 
+                  <div id="controls">
 
+                     <div id="amplitude-play-pause" class="amplitude-paused"></div><br>
 
+                     <span id="amplitude-current-time">0:00</span>
 
+                  </div>
 
+               </div>
 
+            </div>
 
+            <div class="panel-footer">
 
+               <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span></h6>
 
+            </div>
 
+            </div>
 
+            <!-- player -->
 
 
 
-       <!-- End Header -->
 
+   			<h5 class="cm-type"><em>Last 100 Tracks:</em></h5>
 
+      		<div class="scrollable-list">
 
+               <ul class="list-group">
 
+      				<div class="recent"></div>
 
+      			</ul>
 
+            </div>
 
+      	</div>
 
 
 
-       <!-- Rooms -->
 
+      <div class="col-md-6">
 
-       <div class="row-fluid">
 
+   		<div class="panel panel-default">
 
-           <div class="span12 well" style="background-color:white; border:0px"> 
+            <section id="request-line" class="bg-light-gray">
 
-               <!-- Tabs -->
 
+                  <div class="row-fluid">
 
-               <div class="row-fluid">
 
+                      <div class="span12">
 
-                   <div class="span12">
 
+                          <ul id="rooms_tabs" class="nav nav-tabs">
 
-                       <ul id="rooms_tabs" class="nav nav-tabs">
 
+                              <li class="dropdown">
 
-                           <li class="dropdown">
 
+                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th"></i>&nbsp;Options&nbsp;<b class="caret"></b></a>
 
-                               <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th"></i>&nbsp;Options&nbsp;<b class="caret"></b></a>
 
+                                  <ul class="dropdown-menu">
 
-                               <ul class="dropdown-menu">
 
+                                      <li><a href="#modal_joinroom" data-toggle="modal"><i class="icon-plus"></i>&nbsp;Join room</a></li>
 
-                                   <li><a href="#modal_joinroom" data-toggle="modal"><i class="icon-plus"></i>&nbsp;Join room</a></li>
 
+                                      <li><a id="b_leave_room" href="#"><i class="icon-minus"></i>&nbsp;Leave current room</a></li>
 
-                                   <li><a id="b_leave_room" href="#"><i class="icon-minus"></i>&nbsp;Leave current room</a></li>
 
+                                      <li class="divider"></li>
 
-                                   <li class="divider"></li>
 
+                                      <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
 
-                                   <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
 
+                                  </ul>
 
-                               </ul>
 
+                              </li>
 
-                           </li>
 
+                              <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">Lobby</a></li>
 
-                           <!-- Room tab -->
 
+                          </ul>
 
-                           <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
 
+                      </div>
 
-                           <!-- End Room tab -->
 
+                  </div>
 
-                       </ul>
 
+                  <div id="rooms" class="tab-content">
 
-                   </div>
 
+                      <div class="tab-pane active" id="MainRoom">
 
-               </div>
 
+                          <div class="row-fluid">
 
-               <!-- End Tabs -->
 
+                              <div class="span12 well">
 
-               <!-- Rooms -->
 
+                                  <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
 
-               <div id="rooms" class="tab-content">
 
+                                      <span class="label label-danger">Radio-Robot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
 
-                   <!-- Room -->
 
+                                  </div>
 
-                   <div class="tab-pane active" id="MainRoom">
 
+                              </div>
 
-                       <div class="row-fluid">
 
+                          </div>
 
-                           <div class="span12 well">
 
+                          <div class="row-fluid">
 
-                               <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
 
+                              <div id="room_users" class="span12">
 
-                                   <!-- Message -->
 
+                                  <span class="badge badge-inverse">Radio-Robot</span>
 
-                                   <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
 
+                              </div>
 
-                                   <!-- End Message -->
 
+                          </div>
 
+                      </div>
 
+                  </div>
 
+
 
+                   <!-- New message input -->
 
+                   <div class="row-fluid">
 
+                       <div class="span12"> 
+                           <div class="navbar">
 
+                               <div class="navbar-inner">
 
+                                   <form class="navbar-form">
 
+                                       <input id="message_text" type="text" class="form-control">
 
+                                       <button id="b_send_message" class="btn btn-primary">Post</button>
 
+                                   </form>
 
                                </div>
 
                                </div>
 
                            </div>
 
                            </div>
 
                        </div>
 
                        </div>
 
-                       <div class="row-fluid">
 
-                           <div class="span12">
 
-                               <h3>Now chatting...</h3>
 
-                           </div>
 
-                       </div>
 
-                       <div class="row-fluid">
 
-                           <div id="room_users" class="span12">
 
-                               <span class="badge badge-inverse">ServerBot</span>
 
-                           </div>
 
-                       </div>
 
                    </div>
 
                    </div>
 
-                   <!-- End Room -->
 
+                   <!-- End New message -->
 
                </div>
 
                </div>
 
-               <!-- End Rooms -->
 
-           </div>
 
-       </div>
 
-       <!-- End Rooms -->
 
 
 
-       <!-- New message input -->
 
-       <div class="row-fluid">
 
-           <div class="span12"> 
-               <div class="navbar">
 
-                   <div class="navbar-inner">
 
-                       <form class="navbar-form">
 
-                           <input id="message_text" type="text" class="span9">
 
-                           <button id="b_send_message" class="btn btn-primary">Send</button>
 
-                       </form>
 
-                   </div>
 
-               </div>
 
-           </div>
 
-       </div>
 
-       <!-- End New message -->
 
 
 
+               <div id="modal_joinroom" class="modal fade">
 
+               <div class="vertical-alignment-helper">
 
+                  <div class="modal-dialog vertical-align-center">
 
+                      <div class="modal-content">
 
+                         <div class="modal-header">
 
+                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
+                             <h3>Join Room</h3>
 
+                         </div>
 
+                         <div class="modal-body">
 
+                             <input id="room_name" type="text" class="form-control"  placeholder="Room Name">
 
+                             <p><small>Room will be created if it doesn't exist</small></p>
 
+                         </div>
 
+                         <div class="modal-footer">
 
+                             <a id="b_join_room" href="#" class="btn btn-success">Create Room</a>
 
+                         </div>
 
+                     </div>
 
+                  </div>
 
+               </div>
 
+               </div>
 
+               <div id="modal_setnick" class="modal fade">
 
+               <div class="vertical-alignment-helper">
 
+                  <div class="modal-dialog vertical-align-center">
 
+                      <div class="modal-content">
 
+                         <div class="modal-header">
 
+                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
+                             <h3>Set nickname</h3>
 
+                         </div>
 
+                         <div class="modal-body">
 
+                             <input id="nickname" type="text" class="form-control" placeholder="Type your nickname here">
 
+                             <p><small>Pick up something more cool than anonymous :)</small></p>
 
+                         </div>
 
+                         <div class="modal-footer">
 
+                             <a id="b_set_nickname" href="#" class="btn btn-success">Set nickname</a>
 
+                         </div>
 
+                     </div>
 
+                  </div>
 
+               </div>
 
+               </div>
 
+   
+            </div>
 
+            </div>
 
+            </section>
 
+            
+   		</div>
 
+      </div>
 
    </div>
 
    </div>
 
-   <!-- End Content -->
 
+</section>
 
+
 
+
 
+
 
+
 
 
 
-   <!-- Join room modal -->
 
-   <div id="modal_joinroom" class="modal hide fade">
 
-       <div class="modal-header">
 
-           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-           <h3>Join room</h3>
 
-       </div>
 
-       <div class="modal-body">
 
-           <input id="room_name" type="text" class="input-xlarge" placeholder="Room name">
 
-           <p><small>Room will be created if it doesn't exist</small></p>
 
-       </div>
 
-       <div class="modal-footer">
 
-           <a id="b_join_room" href="#" class="btn btn-primary">Join now</a>
 
-       </div>
 
-   </div>
 
-   <!-- End Join room modal -->
 
 
 
-   <!-- Set nick modal -->
 
-   <div id="modal_setnick" class="modal hide fade">
 
-       <div class="modal-header">
 
-           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-           <h3>Set nickname</h3>
 
-       </div>
 
-       <div class="modal-body">
 
-           <input id="nickname" type="text" class="input-xlarge" placeholder="Type your nickname here">
 
-           <p><small>Pick up something more cool than anonymous :)</small></p>
 
-       </div>
 
-       <div class="modal-footer">
 
-           <a id="b_set_nickname" href="#" class="btn btn-primary">Set nickname</a>
 
-       </div>
 
-   </div>
 
-   
-</section>
 
-</div>
 
-</div>
 
 
 
    <script src="js/vendor.min.js"></script>
 
    <script src="js/vendor.min.js"></script>
 
    <script src="/socket.io/socket.io.js"></script>
 
    <script src="/socket.io/socket.io.js"></script>
 
    <script src="js/radio.min.js"></script>
 
    <script src="js/radio.min.js"></script>
 
+
 
+<script>
 
+  var _paq = _paq || [];
 
+  _paq.push(['trackPageView']);
 
+  _paq.push(['enableLinkTracking']);
 
+  (function() {
 
+    var u="//davidawindham.com/wik/";
 
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
 
+    _paq.push(['setSiteId', 1]);
 
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
 
+  })();
 
+</script>
 
+<noscript><p><img src="//davidawindham.com/wik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

File diff suppressed because it is too large
+ 10 - 4
app/js/radio.min.js


+ 1 - 1
app/js/templates/room.handlebars
View File 

@@ -9,7 +9,7 @@
 
     </div>
 
     </div>
 
     <div class="row-fluid">
 
     <div class="row-fluid">
 
         <div class="span12">
 
         <div class="span12">
 
-            <h3>Now chatting...</h3>
 
+            <p>online:</p>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <div class="row-fluid">
 
     <div class="row-fluid">

File diff suppressed because it is too large
+ 0 - 0
app/js/vendor.min.js


BIN
dump.rdb
View File


+ 3 - 3
gulpfile.js
View File 

@@ -9,8 +9,7 @@ var concat = require('gulp-concat');
 
 var copyTask = function() {
 
 var copyTask = function() {
 
   gulp.src('./src/index.html')
 
   gulp.src('./src/index.html')
 
     .pipe(gulp.dest('./app'));
 
     .pipe(gulp.dest('./app'));
 
-  gulp.src('./src/css/*.css')
 
+  gulp.src(['./src/css/bootstrap-v3.3.6.css', './src/css/main.css'])
 
-    .pipe(minifycss())
 
     .pipe(concat('style.min.css'))
 
     .pipe(concat('style.min.css'))
 
     .pipe(gulp.dest('./app/css'));
 
     .pipe(gulp.dest('./app/css'));
 
   gulp.src(['./src/js/main.js', './src/js/radio.js'])
 
   gulp.src(['./src/js/main.js', './src/js/radio.js'])
 
@@ -18,7 +17,8 @@ var copyTask = function() {
 
     .pipe(gulp.dest('./app/js'));
 
     .pipe(gulp.dest('./app/js'));
 
   gulp.src('./src/js/templates/*')
 
   gulp.src('./src/js/templates/*')
 
     .pipe(gulp.dest('./app/js/templates'));
 
     .pipe(gulp.dest('./app/js/templates'));
 
-  gulp.src(['./src/js/jquery.min.js', './src/js/bootstrap.js', './src/js/underscore.min.js', './src/js/handlebars.js'])
 
+  //gulp.src(['./src/js/jquery.min.js', './src/js/bootstrap.js', './src/js/underscore.min.js', './src/js/handlebars.js'])
 
+  gulp.src(['./src/js/jquery.min.js', './src/js/bootstrap-v3.3.6.js', './src/js/underscore.min.js', './src/js/handlebars.js'])
 
     .pipe(concat('vendor.min.js'))
 
     .pipe(concat('vendor.min.js'))
 
     .pipe(gulp.dest('./app/js'));
 
     .pipe(gulp.dest('./app/js'));

+ 0 - 0
src/css/bootstrap-v.3.3.6.css → src/css/bootstrap-v3.3.6.css
View File


+ 81 - 0
src/css/main.css
View File 

@@ -1,2 +1,83 @@
 
 /*! Main CSS file */
 
 /*! Main CSS file */
 
 
 
+header .intro-text {
 
+    padding-top: 100px;
 
+    padding-bottom: 50px;
 
+}
 
+.vertical-alignment-helper {
 
+    display:table;
 
+    height: 100%;
 
+    width: 100%;
 
+    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
 
+}
 
+.vertical-align-center {
 
+    /* To center vertically */
 
+    display: table-cell;
 
+    vertical-align: middle;
 
+    pointer-events:none;
 
+}
 
+.modal-content {
 
+    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
 
+    width:inherit;
 
+    height:inherit;
 
+    /* To center horizontally */
 
+    margin: 0 auto;
 
+    pointer-events: all;
 
+}
 
+
 
+
 
+
 
+/* ========== Audio ============ */
 
+
 
+.scrollable-list {
 
+  overflow: scroll;
 
+  height: 250px;
 
+}
 
+
 
+div#player{
 
+	width: 100%;
 
+	color: #555555;
 
+	font-family: 'PT Sans', sans-serif;
 
+	font-weight: 700;
 
+	font-size: 12px;
 
+}
 
+#song-information{
 
+	text-align: left;
 
+	margin: 0 0 10px;
 
+}
 
+#controls{
 
+	float: left;
 
+}
 
+#amplitude-volume-slider{
 
+	width: 90%;
 
+	float: right;
 
+}
 
+#amplitude-play-pause{
 
+	width: 15px;
 
+	height: 17px;
 
+	margin: 0 5px 0 0;
 
+	cursor: pointer;
 
+	float: right;
 
+}
 
+#amplitude-current-time{
 
+	font-family: 'PT Sans', sans-serif;
 
+	font-size: 14px;
 
+	font-weight: 400;
 
+}
 
+.amplitude-paused{
 
+	background-image: url('../img/small-gray-play.png');
 
+	background-repeat: no-repeat;
 
+}
 
+.amplitude-playing{
 
+	background-image: url('../img/small-gray-pause.png');
 
+	background-repeat: no-repeat;
 
+}
 
+#amplitude-now-playing-name{
 
+
 
+}
 
+#amplitude-now-playing-listeners{
 
+
 
+}
 
+#amplitude-now-playing-bitrate{
 
+
 
+}

BIN
src/img/1.png
View File


BIN
src/img/eq.gif
View File


+ 17 - 0
src/img/none.svg
View File 

@@ -0,0 +1,17 @@
 
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1"

+	 id="svg2989" xmlns:svg="http://www.w3.org/2000/svg" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"

+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"

+	 enable-background="new 0 0 48 48" xml:space="preserve">

+<g id="g2991" transform="matrix(1,0,0,-1,121.49153,1300.6102)">

+	<path id="path2993" fill="#A61C2A" d="M-83.8,1276.6c0,2.5-0.6,4.8-1.9,7l-18.8-18.8c2.2-1.3,4.5-1.9,7-1.9c1.9,0,3.6,0.4,5.3,1.1

+		c1.7,0.7,3.1,1.7,4.4,2.9c1.2,1.2,2.2,2.7,2.9,4.4S-83.8,1274.8-83.8,1276.6z M-109.3,1269.6l18.8,18.8c-2.2,1.3-4.5,1.9-7,1.9

+		c-1.9,0-3.6-0.4-5.3-1.1c-1.7-0.7-3.1-1.7-4.4-2.9c-1.2-1.2-2.2-2.7-2.9-4.4s-1.1-3.5-1.1-5.3

+		C-111.2,1274.1-110.6,1271.8-109.3,1269.6z M-76.9,1276.6c0-3.7-0.9-7.2-2.8-10.3c-1.8-3.2-4.3-5.6-7.5-7.5

+		c-3.2-1.8-6.6-2.8-10.3-2.8s-7.2,0.9-10.3,2.8c-3.2,1.8-5.6,4.3-7.5,7.5c-1.8,3.2-2.8,6.6-2.8,10.3s0.9,7.2,2.8,10.3

+		c1.8,3.2,4.3,5.6,7.5,7.5c3.2,1.8,6.6,2.8,10.3,2.8s7.2-0.9,10.3-2.8c3.2-1.8,5.6-4.3,7.5-7.5

+		C-77.8,1283.8-76.9,1280.3-76.9,1276.6z"/>

+</g>

+</svg>

BIN
src/img/radio.gif
View File


+ 178 - 154
src/index.html
View File 

@@ -1,183 +1,207 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <head>
 
 <head>
 
    <meta charset="utf-8">
 
    <meta charset="utf-8">
 
-   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
+   <meta http-equiv="x-ua-compatible" content="ie=edge">
 
+   <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Daveo Radio</title>
 
    <title>Daveo Radio</title>
 
    <meta name="description" content="">
 
    <meta name="description" content="">
 
-   <meta name="viewport" content="width=device-width">
 
    <link rel="stylesheet" href="css/style.min.css">
 
    <link rel="stylesheet" href="css/style.min.css">
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
- <div class="row-fluid">
 
+<nav class="navbar navbar-default navbar-fixed-top">
 
-     <div class="span12">
 
+	<div class="container">
 
-         <div class="navbar navbar-inverse navbar-fixed-top">
 
+		<div class="navbar-header page-scroll">
 
-             <div class="navbar-inner">
 
+			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 
-                     <a class="brand" href="./index.html">&nbsp;&nbsp;&nbsp;<i class="icon-comment icon-white"></i>&nbsp;SimpleChat&nbsp;</a>
 
+					<span class="sr-only">Toggle navigation</span>
 
-                     <ul class="nav pull-right">
 
+					<span class="icon-bar"></span>
 
-                         <li class="divider-vertical"></li>
 
+					<span class="icon-bar"></span>
 
-                         <li class="">
 
+					<span class="icon-bar"></span>
 
-                             <i class="icon-star icon-white"></i>
 
+			</button>
 
-                         </li>
 
+			<a class="navbar-brand page-scroll" href="#page-top">Radio Daveo</a>
 
-                     </ul>
 
-             </div>
 
-         </div>
 
-     </div>
 
- </div>
 
-<div class="container">
 
-<div class="col-lg-6 text-center">
 
-<section id="audo" class="bg-light-gray">
 
-   <p>Audio Player</p>
 
-		<div class="panel panel-default">
 
-			<div class="panel-body">
 
-				<div id="player">
 
-					<div id="song-information">
 
-						<div class="row">
 
-							<div class="col-xs-8">
 
-								<img id="radio" src="" title="radio" width="25px" style="float:left;margin-right:15px;">
 
-								<span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
 
-								<span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
 
-							</div>
 
-							<div class="col-xs-4">
 
-								
-							</div>
 
-						</div>
 
-					</div>
 
-					<input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
 
-				<div id="controls">
 
-					<div id="amplitude-play-pause" class="amplitude-paused"></div><br>
 
-						<span id="amplitude-current-time">0:00</span>
 
-					</div>
 
-			
-				</div>
 
-			</div>
 
-			<div class="panel-footer">
 
-				<h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span></h6>
 
-			</div>
 
 		</div>
 
 		</div>
 
-</section>
 
+		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 
-</div>
 
+			<ul class="nav navbar-nav navbar-right">
 
-</div>
 
+				<li class="hidden"><a href="#page-top"></a></li>
 
+				<li><a class="page-scroll" href="#about">About</a></li>
 
+				<li><a class="page-scroll" href="#contact">Contact</a></li>
 
+			</ul>
 
+		</div>
 
+	</div>
 
+</nav>
 
 
 
+<header>
 
+	<div class="container">
 
+		<div class="intro-text">
 
+			<div class="intro-lead-in">Leave some room for some stuff up here</div>
 
+			<div class="intro-heading">Like maybe a cool header banner with a couple meters</div>
 
+			<a href="#intro" class="page-scroll btn btn-xl">how to listen</a>
 
+		</div>
 
+	</div>
 
+</header>
 
 
 
-<div class="container">
 
+<section id="audio" class="bg-light-gray">
 
-<div class="col-lg-6 text-center">
 
+   <div class="container">
 
-<section id="request-line" class="bg-light-gray">
 
+      <div class="row">
 
-   
+         <div class="col-md-6">
 
-   <!-- Content -->
 
+            <!-- player -->
 
-   <div class="row-fluid">
 
+            <div class="panel panel-default">
 
-       <!-- Header -->
 
+               <div class="panel-body">
 
+                  <div id="player">
 
+                     <div id="song-information">
 
+                        <div class="row">
 
+                           <div class="col-xs-8">
 
+                              <img id="radio" src="" title="radio" width="25px" style="float:left;margin-right:15px;">
 
+                              <span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
 
+                              <span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
 
+                           </div>
 
+                           <div class="col-xs-4">
 
+                        </div>
 
+                     </div>
 
+                  </div>
 
+                  <input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
 
+                  <div id="controls">
 
+                     <div id="amplitude-play-pause" class="amplitude-paused"></div><br>
 
+                     <span id="amplitude-current-time">0:00</span>
 
+                  </div>
 
+               </div>
 
+            </div>
 
+            <div class="panel-footer">
 
+               <h6 style="margin:0;"><img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;"> <span id="amplitude-now-playing-name">Current track: <span id="track">* Off Air *</span></span></h6>
 
+            </div>
 
+            </div>
 
+            <!-- player -->
 
 
 
-       <!-- End Header -->
 
+   			<h5 class="cm-type"><em>Last 100 Tracks:</em></h5>
 
+      		<div class="scrollable-list">
 
+               <ul class="list-group">
 
+      				<div class="recent"></div>
 
+      			</ul>
 
+            </div>
 
+      	</div>
 
 
 
-       <!-- Rooms -->
 
+      <div class="col-md-6">
 
-       <div class="row-fluid">
 
+   		<div class="panel panel-default">
 
-           <div class="span12 well" style="background-color:white; border:0px"> 
+            <section id="request-line" class="bg-light-gray">
 
-               <!-- Tabs -->
 
+                  <div class="row-fluid">
 
-               <div class="row-fluid">
 
+                      <div class="span12">
 
-                   <div class="span12">
 
+                          <ul id="rooms_tabs" class="nav nav-tabs">
 
-                       <ul id="rooms_tabs" class="nav nav-tabs">
 
+                              <li class="dropdown">
 
-                           <li class="dropdown">
 
+                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th"></i>&nbsp;Options&nbsp;<b class="caret"></b></a>
 
-                               <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th"></i>&nbsp;Options&nbsp;<b class="caret"></b></a>
 
+                                  <ul class="dropdown-menu">
 
-                               <ul class="dropdown-menu">
 
+                                      <li><a href="#modal_joinroom" data-toggle="modal"><i class="icon-plus"></i>&nbsp;Join room</a></li>
 
-                                   <li><a href="#modal_joinroom" data-toggle="modal"><i class="icon-plus"></i>&nbsp;Join room</a></li>
 
+                                      <li><a id="b_leave_room" href="#"><i class="icon-minus"></i>&nbsp;Leave current room</a></li>
 
-                                   <li><a id="b_leave_room" href="#"><i class="icon-minus"></i>&nbsp;Leave current room</a></li>
 
+                                      <li class="divider"></li>
 
-                                   <li class="divider"></li>
 
+                                      <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
 
-                                   <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
 
+                                  </ul>
 
-                               </ul>
 
+                              </li>
 
-                           </li>
 
+                              <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">Lobby</a></li>
 
-                           <!-- Room tab -->
 
+                          </ul>
 
-                           <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
 
+                      </div>
 
-                           <!-- End Room tab -->
 
+                  </div>
 
-                       </ul>
 
+                  <div id="rooms" class="tab-content">
 
-                   </div>
 
+                      <div class="tab-pane active" id="MainRoom">
 
-               </div>
 
+                          <div class="row-fluid">
 
-               <!-- End Tabs -->
 
+                              <div class="span12 well">
 
-               <!-- Rooms -->
 
+                                  <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
 
-               <div id="rooms" class="tab-content">
 
+                                      <span class="label label-danger">Radio-Robot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
 
-                   <!-- Room -->
 
+                                  </div>
 
-                   <div class="tab-pane active" id="MainRoom">
 
+                              </div>
 
-                       <div class="row-fluid">
 
+                          </div>
 
-                           <div class="span12 well">
 
+                          <div class="row-fluid">
 
-                               <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
 
+                              <div id="room_users" class="span12">
 
-                                   <!-- Message -->
 
+                                  <span class="badge badge-inverse">Radio-Robot</span>
 
-                                   <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
 
+                              </div>
 
-                                   <!-- End Message -->
 
+                          </div>
 
+                      </div>
 
+                  </div>
 
+
 
+                   <!-- New message input -->
 
+                   <div class="row-fluid">
 
+                       <div class="span12"> 
+                           <div class="navbar">
 
+                               <div class="navbar-inner">
 
+                                   <form class="navbar-form">
 
+                                       <input id="message_text" type="text" class="form-control">
 
+                                       <button id="b_send_message" class="btn btn-primary">Post</button>
 
+                                   </form>
 
                                </div>
 
                                </div>
 
                            </div>
 
                            </div>
 
                        </div>
 
                        </div>
 
-                       <div class="row-fluid">
 
-                           <div class="span12">
 
-                               <h3>Now chatting...</h3>
 
-                           </div>
 
-                       </div>
 
-                       <div class="row-fluid">
 
-                           <div id="room_users" class="span12">
 
-                               <span class="badge badge-inverse">ServerBot</span>
 
-                           </div>
 
-                       </div>
 
                    </div>
 
                    </div>
 
-                   <!-- End Room -->
 
+                   <!-- End New message -->
 
                </div>
 
                </div>
 
-               <!-- End Rooms -->
 
-           </div>
 
-       </div>
 
-       <!-- End Rooms -->
 
 
 
-       <!-- New message input -->
 
-       <div class="row-fluid">
 
-           <div class="span12"> 
-               <div class="navbar">
 
-                   <div class="navbar-inner">
 
-                       <form class="navbar-form">
 
-                           <input id="message_text" type="text" class="span9">
 
-                           <button id="b_send_message" class="btn btn-primary">Send</button>
 
-                       </form>
 
-                   </div>
 
-               </div>
 
-           </div>
 
-       </div>
 
-       <!-- End New message -->
 
 
 
+               <div id="modal_joinroom" class="modal fade">
 
+               <div class="vertical-alignment-helper">
 
+                  <div class="modal-dialog vertical-align-center">
 
+                      <div class="modal-content">
 
+                         <div class="modal-header">
 
+                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
+                             <h3>Join Room</h3>
 
+                         </div>
 
+                         <div class="modal-body">
 
+                             <input id="room_name" type="text" class="form-control"  placeholder="Room Name">
 
+                             <p><small>Room will be created if it doesn't exist</small></p>
 
+                         </div>
 
+                         <div class="modal-footer">
 
+                             <a id="b_join_room" href="#" class="btn btn-success">Create Room</a>
 
+                         </div>
 
+                     </div>
 
+                  </div>
 
+               </div>
 
+               </div>
 
+               <div id="modal_setnick" class="modal fade">
 
+               <div class="vertical-alignment-helper">
 
+                  <div class="modal-dialog vertical-align-center">
 
+                      <div class="modal-content">
 
+                         <div class="modal-header">
 
+                             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
+                             <h3>Set nickname</h3>
 
+                         </div>
 
+                         <div class="modal-body">
 
+                             <input id="nickname" type="text" class="form-control" placeholder="Type your nickname here">
 
+                             <p><small>Pick up something more cool than anonymous :)</small></p>
 
+                         </div>
 
+                         <div class="modal-footer">
 
+                             <a id="b_set_nickname" href="#" class="btn btn-success">Set nickname</a>
 
+                         </div>
 
+                     </div>
 
+                  </div>
 
+               </div>
 
+               </div>
 
+   
+            </div>
 
+            </div>
 
+            </section>
 
+            
+   		</div>
 
+      </div>
 
    </div>
 
    </div>
 
-   <!-- End Content -->
 
+</section>
 
+
 
+
 
+
 
+
 
 
 
-   <!-- Join room modal -->
 
-   <div id="modal_joinroom" class="modal hide fade">
 
-       <div class="modal-header">
 
-           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-           <h3>Join room</h3>
 
-       </div>
 
-       <div class="modal-body">
 
-           <input id="room_name" type="text" class="input-xlarge" placeholder="Room name">
 
-           <p><small>Room will be created if it doesn't exist</small></p>
 
-       </div>
 
-       <div class="modal-footer">
 
-           <a id="b_join_room" href="#" class="btn btn-primary">Join now</a>
 
-       </div>
 
-   </div>
 
-   <!-- End Join room modal -->
 
 
 
-   <!-- Set nick modal -->
 
-   <div id="modal_setnick" class="modal hide fade">
 
-       <div class="modal-header">
 
-           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 
-           <h3>Set nickname</h3>
 
-       </div>
 
-       <div class="modal-body">
 
-           <input id="nickname" type="text" class="input-xlarge" placeholder="Type your nickname here">
 
-           <p><small>Pick up something more cool than anonymous :)</small></p>
 
-       </div>
 
-       <div class="modal-footer">
 
-           <a id="b_set_nickname" href="#" class="btn btn-primary">Set nickname</a>
 
-       </div>
 
-   </div>
 
-   
-</section>
 
-</div>
 
-</div>
 
 
 
    <script src="js/vendor.min.js"></script>
 
    <script src="js/vendor.min.js"></script>
 
    <script src="/socket.io/socket.io.js"></script>
 
    <script src="/socket.io/socket.io.js"></script>
 
    <script src="js/radio.min.js"></script>
 
    <script src="js/radio.min.js"></script>
 
+
 
+<script>
 
+  var _paq = _paq || [];
 
+  _paq.push(['trackPageView']);
 
+  _paq.push(['enableLinkTracking']);
 
+  (function() {
 
+    var u="//davidawindham.com/wik/";
 
+    _paq.push(['setTrackerUrl', u+'piwik.php']);
 
+    _paq.push(['setSiteId', 1]);
 
+    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
 
+    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
 
+  })();
 
+</script>
 
+<noscript><p><img src="//davidawindham.com/wik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 3 - 3
src/js/main.js
View File 

@@ -32,13 +32,13 @@
 
 
 
     // Disconnected from server
 
     // Disconnected from server
 
     socket.on('disconnect', function (data) {
 
     socket.on('disconnect', function (data) {
 
-        var info = {'room':'MainRoom', 'username':'ServerBot', 'msg':'----- Lost connection to server -----'};
 
+        var info = {'room':'MainRoom', 'username':'RadioRobot', 'msg':'- Lost connection -'};
 
         addMessage(info);
 
         addMessage(info);
 
     });
 
     });
 
     
     
     // Reconnected to server
 
     // Reconnected to server
 
     socket.on('reconnect', function (data) {
 
     socket.on('reconnect', function (data) {
 
-        var info = {'room':'MainRoom', 'username':'ServerBot', 'msg':'----- Reconnected to server -----'};
 
+        var info = {'room':'MainRoom', 'username':'RadioRobot', 'msg':'- Reconnected -'};
 
         addMessage(info);
 
         addMessage(info);
 
     });
 
     });
 
 
 
@@ -109,7 +109,7 @@
 
         updateNickname(data);
 
         updateNickname(data);
 
 
 
         msg = '----- ' + data.oldUsername + ' is now ' + data.newUsername + ' -----';
 
         msg = '----- ' + data.oldUsername + ' is now ' + data.newUsername + ' -----';
 
-        var info = {'room':data.room, 'username':'ServerBot', 'msg':msg};
 
+        var info = {'room':data.room, 'username':'RadioRobot', 'msg':msg};
 
         addMessage(info);
 
         addMessage(info);
 
     });
 
     });

File diff suppressed because it is too large
+ 7 - 1
src/js/radio.js


+ 1 - 1
src/js/templates/room.handlebars
View File 

@@ -9,7 +9,7 @@
 
     </div>
 
     </div>
 
     <div class="row-fluid">
 
     <div class="row-fluid">
 
         <div class="span12">
 
         <div class="span12">
 
-            <h3>Now chatting...</h3>
 
+            <p>online:</p>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 
     <div class="row-fluid">
 
     <div class="row-fluid">

Some files were not shown because too many files changed in this diff