Browse Source

kitch sink -post in main

windhamdavid 4 years ago
parent
commit
e5b3ded819

+ 3 - 1
app.js

@@ -5,6 +5,8 @@ var conf = {
     debug: false,
     dbPort: 6379,
     dbHost: '127.0.0.1',
+    dbOptions: {},
+    mainroom: 'MainRoom'
 };
 
 
@@ -58,7 +60,7 @@ var sanitizeMessage = function(req, res, next) {
 var sendBroadcast = function(text) {
     _.each(io.nsps['/'].adapter.rooms, function(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);
         }
     });

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


BIN
app/img/1.png


BIN
app/img/eq.gif


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


BIN
app/img/glyphicons-halflings.png


+ 17 - 0
app/img/none.svg

@@ -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


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


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


+ 178 - 154
app/index.html

@@ -1,183 +1,207 @@
 <!DOCTYPE html>
 <head>
    <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>
    <meta name="description" content="">
-   <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.min.css">
 </head>
 <body>
- <div class="row-fluid">
-     <div class="span12">
-         <div class="navbar navbar-inverse navbar-fixed-top">
-             <div class="navbar-inner">
-                     <a class="brand" href="./index.html">&nbsp;&nbsp;&nbsp;<i class="icon-comment icon-white"></i>&nbsp;SimpleChat&nbsp;</a>
-                     <ul class="nav pull-right">
-                         <li class="divider-vertical"></li>
-                         <li class="">
-                             <i class="icon-star icon-white"></i>
-                         </li>
-                     </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>
+<nav class="navbar navbar-default navbar-fixed-top">
+	<div class="container">
+		<div class="navbar-header page-scroll">
+			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+					<span class="sr-only">Toggle navigation</span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand page-scroll" href="#page-top">Radio Daveo</a>
 		</div>
-</section>
-</div>
-</div>
+		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+			<ul class="nav navbar-nav navbar-right">
+				<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">
-<div class="col-lg-6 text-center">
-<section id="request-line" class="bg-light-gray">
-   
-   <!-- Content -->
-   <div class="row-fluid">
-       <!-- Header -->
+<section id="audio" class="bg-light-gray">
+   <div class="container">
+      <div class="row">
+         <div class="col-md-6">
+            <!-- player -->
+            <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>
+            <!-- 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="row-fluid">
-           <div class="span12 well" style="background-color:white; border:0px"> 
-               <!-- Tabs -->
-               <div class="row-fluid">
-                   <div class="span12">
-                       <ul id="rooms_tabs" class="nav nav-tabs">
-                           <li class="dropdown">
-                               <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">
-                                   <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 class="divider"></li>
-                                   <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
-                               </ul>
-                           </li>
-                           <!-- Room tab -->
-                           <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
-                           <!-- End Room tab -->
-                       </ul>
-                   </div>
-               </div>
-               <!-- End Tabs -->
-               <!-- Rooms -->
-               <div id="rooms" class="tab-content">
-                   <!-- Room -->
-                   <div class="tab-pane active" id="MainRoom">
-                       <div class="row-fluid">
-                           <div class="span12 well">
-                               <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
-                                   <!-- Message -->
-                                   <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
-                                   <!-- End Message -->
+      <div class="col-md-6">
+   		<div class="panel panel-default">
+            <section id="request-line" class="bg-light-gray">
+                  <div class="row-fluid">
+                      <div class="span12">
+                          <ul id="rooms_tabs" class="nav nav-tabs">
+                              <li class="dropdown">
+                                  <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">
+                                      <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 class="divider"></li>
+                                      <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
+                                  </ul>
+                              </li>
+                              <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">Lobby</a></li>
+                          </ul>
+                      </div>
+                  </div>
+                  <div id="rooms" class="tab-content">
+                      <div class="tab-pane active" id="MainRoom">
+                          <div class="row-fluid">
+                              <div class="span12 well">
+                                  <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
+                                      <span class="label label-danger">Radio-Robot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
+                                  </div>
+                              </div>
+                          </div>
+                          <div class="row-fluid">
+                              <div id="room_users" class="span12">
+                                  <span class="badge badge-inverse">Radio-Robot</span>
+                              </div>
+                          </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 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>
-                   <!-- End Room -->
+                   <!-- End New message -->
                </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>
-   <!-- 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="/socket.io/socket.io.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>
 </html>

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


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

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

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


BIN
dump.rdb


+ 3 - 3
gulpfile.js

@@ -9,8 +9,7 @@ var concat = require('gulp-concat');
 var copyTask = function() {
   gulp.src('./src/index.html')
     .pipe(gulp.dest('./app'));
-  gulp.src('./src/css/*.css')
-    .pipe(minifycss())
+  gulp.src(['./src/css/bootstrap-v3.3.6.css', './src/css/main.css'])
     .pipe(concat('style.min.css'))
     .pipe(gulp.dest('./app/css'));
   gulp.src(['./src/js/main.js', './src/js/radio.js'])
@@ -18,7 +17,8 @@ var copyTask = function() {
     .pipe(gulp.dest('./app/js'));
   gulp.src('./src/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(gulp.dest('./app/js'));
 

src/css/bootstrap-v.3.3.6.css → src/css/bootstrap-v3.3.6.css


+ 81 - 0
src/css/main.css

@@ -1,2 +1,83 @@
 /*! 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


BIN
src/img/eq.gif


+ 17 - 0
src/img/none.svg

@@ -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


+ 178 - 154
src/index.html

@@ -1,183 +1,207 @@
 <!DOCTYPE html>
 <head>
    <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>
    <meta name="description" content="">
-   <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.min.css">
 </head>
 <body>
- <div class="row-fluid">
-     <div class="span12">
-         <div class="navbar navbar-inverse navbar-fixed-top">
-             <div class="navbar-inner">
-                     <a class="brand" href="./index.html">&nbsp;&nbsp;&nbsp;<i class="icon-comment icon-white"></i>&nbsp;SimpleChat&nbsp;</a>
-                     <ul class="nav pull-right">
-                         <li class="divider-vertical"></li>
-                         <li class="">
-                             <i class="icon-star icon-white"></i>
-                         </li>
-                     </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>
+<nav class="navbar navbar-default navbar-fixed-top">
+	<div class="container">
+		<div class="navbar-header page-scroll">
+			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+					<span class="sr-only">Toggle navigation</span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+					<span class="icon-bar"></span>
+			</button>
+			<a class="navbar-brand page-scroll" href="#page-top">Radio Daveo</a>
 		</div>
-</section>
-</div>
-</div>
+		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+			<ul class="nav navbar-nav navbar-right">
+				<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">
-<div class="col-lg-6 text-center">
-<section id="request-line" class="bg-light-gray">
-   
-   <!-- Content -->
-   <div class="row-fluid">
-       <!-- Header -->
+<section id="audio" class="bg-light-gray">
+   <div class="container">
+      <div class="row">
+         <div class="col-md-6">
+            <!-- player -->
+            <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>
+            <!-- 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="row-fluid">
-           <div class="span12 well" style="background-color:white; border:0px"> 
-               <!-- Tabs -->
-               <div class="row-fluid">
-                   <div class="span12">
-                       <ul id="rooms_tabs" class="nav nav-tabs">
-                           <li class="dropdown">
-                               <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">
-                                   <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 class="divider"></li>
-                                   <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
-                               </ul>
-                           </li>
-                           <!-- Room tab -->
-                           <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
-                           <!-- End Room tab -->
-                       </ul>
-                   </div>
-               </div>
-               <!-- End Tabs -->
-               <!-- Rooms -->
-               <div id="rooms" class="tab-content">
-                   <!-- Room -->
-                   <div class="tab-pane active" id="MainRoom">
-                       <div class="row-fluid">
-                           <div class="span12 well">
-                               <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
-                                   <!-- Message -->
-                                   <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
-                                   <!-- End Message -->
+      <div class="col-md-6">
+   		<div class="panel panel-default">
+            <section id="request-line" class="bg-light-gray">
+                  <div class="row-fluid">
+                      <div class="span12">
+                          <ul id="rooms_tabs" class="nav nav-tabs">
+                              <li class="dropdown">
+                                  <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">
+                                      <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 class="divider"></li>
+                                      <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
+                                  </ul>
+                              </li>
+                              <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">Lobby</a></li>
+                          </ul>
+                      </div>
+                  </div>
+                  <div id="rooms" class="tab-content">
+                      <div class="tab-pane active" id="MainRoom">
+                          <div class="row-fluid">
+                              <div class="span12 well">
+                                  <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
+                                      <span class="label label-danger">Radio-Robot</span>&nbsp;&nbsp;Welcome to the Daveo Radio!<br/>
+                                  </div>
+                              </div>
+                          </div>
+                          <div class="row-fluid">
+                              <div id="room_users" class="span12">
+                                  <span class="badge badge-inverse">Radio-Robot</span>
+                              </div>
+                          </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 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>
-                   <!-- End Room -->
+                   <!-- End New message -->
                </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>
-   <!-- 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="/socket.io/socket.io.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>
 </html>

+ 3 - 3
src/js/main.js

@@ -32,13 +32,13 @@
 
     // Disconnected from server
     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);
     });
     
     // Reconnected to server
     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);
     });
 
@@ -109,7 +109,7 @@
         updateNickname(data);
 
         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);
     });
 

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


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

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