First Release

paulotruta · Jun 29, 2016 · e7e55df · e7e55df
1 parent 0293947
commit e7e55df
Show file tree

Hide file tree

Showing 32 changed files with 867 additions and 0 deletions.
diff --git a/client/footer.html b/client/footer.html
@@ -0,0 +1,36 @@
+<template name="footer">
+  <footer class="page-footer">
+    <div class="container white-text">
+        {{#unless hidePlayer}}
+
+            {{#if music_isPlaying}}
+                <i class="small material-icons cursor-pointer applink-pauseMusic">pause</i>
+            {{else}}
+                <i class="small material-icons cursor-pointer applink-playMusic">play_arrow</i>
+            {{/if}}
+
+            <i class="small material-icons cursor-pointer applink-stopMusic">stop</i>
+            <i class="small material-icons cursor-pointer applink-skipMusic" style="margin-right: 15px;">skip_next</i>
+
+            {{#if music_thumbnail}}
+                <img src="{{music_thumbnail}}" width="25px" height="25px" style="margin-right: 15px; margin-bottom: 3px;">
+            {{/if}}
+
+            <span class="truncate" style="position: absolute; margin-top: 5px; display: inline;">
+
+                {{music_title}}
+
+            </span>
+
+            <div id="musicPlayerWrapper">
+                <audio autoplay="autoplay" class="musicPlayer">   
+                    <source src="{{music_url}}" />  
+                </audio> 
+            </div>
+
+        {{else}}
+            <p style="margin-top: 0px;">An awesome music player for friends :-)</p>
+        {{/unless}}
+    </div>
+  </footer>
+</template>
diff --git a/client/footer.js b/client/footer.js
@@ -0,0 +1,54 @@
+Template.footer.helpers({
+	'hidePlayer': function(){
+		return Session.get('hidePlayer');
+	},
+	'music_isPlaying': function(){
+		return Session.get('isPlaying');
+	},
+	'music_title': function(){
+		return Session.get('playerTitle');
+	},
+	'music_thumbnail': function(){
+		return Session.get('playerThumbnail');
+	},
+	'music_url': function(){
+		return Session.get('musicUrl');
+	}
+});
+
+Template.footer.events({
+	'click .applink-playMusic': function(){
+		Session.set('isPlaying', true);
+		var player = document.getElementsByTagName("audio")[0];
+		player.play();
+	},
+	'click .applink-pauseMusic': function(){
+
+		Session.set('isPlaying', false);
+		var player = document.getElementsByTagName("audio")[0];
+		player.pause();
+
+	},
+	'click .applink-stopMusic': function(){
+
+		Session.set('isPlaying', false);
+		Session.set('musicUrl', '');
+		Session.set('playerThumbnail', null);
+		Session.set('playerTitle', '');
+		var player = document.getElementsByTagName("audio")[0];
+		player.removeAttribute("src");
+		player.load();
+		Sessio.set('hidePlayer', true);
+
+	},
+	'click .applink-skipMusic': function(){
+
+		Session.set('isPlaying', true);
+
+	}
+});
+
+Template.footer.rendered = function () {
+
+};
+
diff --git a/client/globalhelpers.js b/client/globalhelpers.js
@@ -0,0 +1,3 @@
+Template.registerHelper('getBaseUrl', function(){
+    return Meteor.absoluteUrl('');
+});
diff --git a/client/loading.html b/client/loading.html
@@ -0,0 +1,13 @@
+<template name="loading">
+   <div class="preloader-wrapper big active">
+    <div class="spinner-layer spinner-blue-only">
+      <div class="circle-clipper left">
+        <div class="circle"></div>
+      </div><div class="gap-patch">
+        <div class="circle"></div>
+      </div><div class="circle-clipper right">
+        <div class="circle"></div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/main.html b/client/main.html
@@ -0,0 +1,11 @@
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <title>y2bt</title>
+
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+</head>
+
+<body>
+</body>
diff --git a/client/main.js b/client/main.js
@@ -0,0 +1,2 @@
+Session.set('isPlaying', false);
+Session.set('hidePlayer', true);
diff --git a/client/master_layout.html b/client/master_layout.html
@@ -0,0 +1,7 @@
+<template name="masterLayout">
+  <div id="content">
+    {{> yield region='nav'}}
+    {{> yield}}
+  </div>
+  {{> yield region='footer'}}
+</template>
diff --git a/client/nav.html b/client/nav.html
@@ -0,0 +1,18 @@
+<template name="nav">
+  <nav>
+    <div class="container">
+      <div class="nav-wrapper">
+        <a href="#" class="brand-logo">
+          <img alt="UserAccounts" width="25" height="25" src="/imgs/ua-logo.png">
+        </a>
+        <ul id="nav-mobile" class="right side-nav fixed">
+          <li class="{{isActiveRoute regex='home'}}"><a href="{{pathFor 'home'}}">y2bt</a></li>
+          <li class="{{isActiveRoute regex='private'}}"><a href="{{pathFor 'private'}}">Master List</a></li>
+          <li class="{{isActiveRoute regex='add'}}"><a href="{{pathFor 'add'}}">Add Song</a></li>
+          <li>{{> atNavButton }}</li>
+        </ul>
+        <a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
+      </div>
+    </div>
+  </nav>
+</template>
diff --git a/client/nav.js b/client/nav.js
@@ -0,0 +1,3 @@
+Template.nav.rendered = function () {
+  $(".button-collapse").sideNav();
+};
diff --git a/client/page_not_found.html b/client/page_not_found.html
@@ -0,0 +1,10 @@
+<template name="pageNotFound">
+  <div class="not-found">
+    <div class="container">
+      <div class="center">
+        <h3>404 - Houston, we have a problem!!!</h3>
+        <h5>The page you're looking for was not found.</h5>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/client/stylesheets/style.css b/client/stylesheets/style.css
@@ -0,0 +1,102 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif /*rtl:prepend:"Droid Arabic Kufi","Droid Sans", */;
+  background: #fcfcfc url(/imgs/bg.jpg) repeat repeat;
+  margin: 0px;
+  /* Margin bottom by footer height */
+  margin-bottom: 70px;
+  padding: 0px;
+  color: #555555;
+  min-width: 320px;
+}
+
+@media only screen and (min-width: 993px) {
+  #content {
+    margin-left: 240px;
+  }
+}
+
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 70px;
+}
+
+footer > .content {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+header,
+main,
+footer {
+  padding-left: 240px;
+}
+
+@media only screen and (max-width: 992px) {
+  header,
+  main,
+  footer {
+    padding-left: 0;
+  }
+}
+
+.container {
+  padding: 0 1.5rem;
+  margin: 0 auto;
+  max-width: 1280px;
+  width: 100%;
+}
+
+@media only screen and (min-width: 601px) {
+  .container {
+    width: 99%;
+  }
+}
+
+@media only screen and (min-width: 993px) {
+  .container {
+    width: 98%;
+  }
+}
+
+nav {
+  background-color: #31354e;
+}
+
+footer.page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  left: 0;
+  height: 55px;
+  background-color: #31354e;
+  z-index: 1;
+}
+
+table {
+  margin-left:10px;
+  margin-right:10px;
+}
+
+#at-nav-button {
+  color: white;
+  background-color: #31354e;
+  margin-top: 10px;
+}
+
+.promo-caption {
+  font-size: 1.7rem;
+  font-weight: 500;
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+
+.cursor-pointer{
+  cursor: pointer;
+}
diff --git a/client/views/add.html b/client/views/add.html
@@ -0,0 +1,63 @@
+<template name="add">
+
+  <div class="center">
+    {{#unless loadingMusic}}
+
+      {{#unless addingMusic}}
+        <h4>Add Song</h4>
+        <div class="row hide-on-small-only" style="margin-top: 25px; margin-right: 20px; margin-left: 20px; margin-bottom: 25px;">
+          <div class="col s12 m4">
+            <div class="center promo">
+              <i class="large material-icons">youtube_searched_for</i>
+              <p class="promo-caption">Paste youtube link</p>
+              <p class="light center">Soon will soon be able to search directly from here, or upload your music!</p>
+            </div>
+          </div>
+
+          <div class="col s12 m4">
+            <div class="center promo">
+              <i class="large material-icons">get_app</i>
+              <p class="promo-caption">The magic happens</p>
+              <p class="light center">The music will be analised, downloaded, converted and played immediatelly.</p>
+            </div>
+          </div>
+
+          <div class="col s12 m4">
+            <div class="center promo">
+              <i class="large material-icons">group</i>
+              <p class="promo-caption">M'a Niggas ;)</p>
+              <p class="light center">The master playlist feature will allow us to share the same library, in realtime.</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="row hide-on-med-and-up" style="margin-top: 25px; margin-right: 20px; margin-left: 20px; margin-bottom: 15px;">
+          <div class="col s12">
+            <div class="center promo">
+              <i class="large material-icons">youtube_searched_for</i>
+              <p class="promo-caption">Paste the youtube link and enjoy!</p>
+              <p class="light center">Soon will soon be able to search directly from here, or upload your music!</p>
+            </div>
+          </div>
+        </div>
+
+        <input type="text" id="youtubeurl" name="youtubeurl" style="width: 50%;">
+        <div class="btn applink-getMusic" id="applink-getMusic">
+          <i class="medium material-icons">play_arrow</i>Play
+        </div>
+        {{else}}
+        <h5>{{musicTitle}}</h5>
+        <p>This song will be added to the collection. Do you confirm?</p>
+        <div class="btn applink-addMusic" id="applink-addMusic">
+          <i class="medium material-icons">playlist_add</i>Yes
+        </div>
+        <div class="btn applink-cancelAdd" id="applink-cancelAdd">
+          <i class="medium material-icons">cancel</i>Cancel
+        </div>
+      {{/unless}}
+    {{else}}
+      <h4>Please wait...</h4>
+      {{>wait}}
+    {{/unless}}
+  </div>
+</template>