feat(UI): Latest tracks on landing page (#378)

Closes #182. ## Goal Show visitors what Openwhyd is really about: users posting tracks in a stream, instead of showing "hot tracks". ## Before <img width="1280" alt="Capture d’écran 2020-11-07 à 15 37 16" src="https://user-images.githubusercontent.com/531781/98443975-41f91100-210f-11eb-852e-8180ec5518bf.png"> ## After <img width="1280" alt="Capture d’écran 2020-11-07 à 16 29 10" src="https://user-images.githubusercontent.com/531781/98445147-660c2080-2116-11eb-82ef-2d600057990a.png">
openwhyd · Nov 7, 2020 · 5e1471d · 5e1471d
1 parent 7e512c6
commit 5e1471d
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 224 deletions.
diff --git a/app/controllers/LibAll.js b/app/controllers/LibAll.js
@@ -20,7 +20,8 @@ function renderAllLibrary(lib) {
   //options.displayAuthors = true;
   options.displayPlaylistName = true;
   options.follows = { people: makeUserList(), followers: [] };
-  options.bodyClass = 'pgStream pgFullStream pgWithSideBar';
+  options.bodyClass =
+    'pgStream pgFullStream pgWithSideBar ' + (options.bodyClass || '');
   options.globalFeed = true;
 
   function renderFeed(callback) {

diff --git a/app/controllers/hotTracks.js b/app/controllers/hotTracks.js
@@ -42,8 +42,6 @@ var template;
 exports.controller = function (request, reqParams, response) {
   reqParams = reqParams || {};
   var loggedInUser = request.getUser() || {};
-  //if (!loggedInUser.id)
-  //	return response.temporaryRedirect("/");
 
   function render(html) {
     response.legacyRender(html, null, { 'content-type': 'text/html' });

diff --git a/app/controllers/userLibrary.js b/app/controllers/userLibrary.js
@@ -176,12 +176,8 @@ exports.controller = function (request, reqParams, response) {
     else if (reqParams.format == 'json')
       return render({ errorCode: 'REQ_LOGIN' });
     else {
-      loggingTemplate.renderLandingPage(loggedInUser, reqParams, function (
-        html
-      ) {
-        response.renderHTML(html);
-      });
-      return;
+      lib.options.bodyClass = 'home';
+      return renderAllLibrary(lib);
     }
   } else if (path == '/me') {
     if (request.checkLogin(response, reqParams.format))

diff --git a/app/templates/feed.html b/app/templates/feed.html
@@ -96,21 +96,6 @@ <h2>Playlist contest</h2>
     </div>
     {{/playlistContest}}
 
-    <!--
-		<div class="sideBox">
-			<div class="head">
-				<h2>Invite your Friends</h2>
-				<a href="/invite">Invite more</a>
-			</div>
-			<form class="body inviteAd">
-				<div class="fld">
-					<input type="text" name="email" placeholder="e.g. {{inviteAdEmailPlaceholder}}">
-				</div>
-				<input type="submit" class="userSubscribe" value="Invite">
-			</form>
-		</div>
-		-->
-
     <script
       src="/js/feed-rightbar.js"
       type="text/javascript"
@@ -370,9 +355,7 @@ <h2>{{name}}</h2>
       <a href="/stream" style="float: right; margin-top: 22px"
         >Back to Stream</a
       >
-      {{/isUserLogged}}
-      <h2>Full Stream</h2>
-      {{/globalFeed}} {{#homeFeed}}
+      {{/isUserLogged}} {{/globalFeed}} {{#homeFeed}}
       <!--<a href="/all" style="float:right; margin-top: 22px;">Switch to Full Stream</a>-->
       <!-- <a href="/hot" class="lnkHotTracks"><img src="/images/icon-fire-small.png">Hot Tracks</a> -->
       <h2 class="head-name-tab">Stream</h2>

diff --git a/app/templates/logging.js b/app/templates/logging.js
@@ -19,29 +19,6 @@ exports.refreshTemplates = function (callback) {
 
 exports.refreshTemplates();
 
-exports.renderLandingPage = function (loggedUser, form, callback) {
-  var templateParams = {
-    urlPrefix: config.urlPrefix,
-    loggedUser: loggedUser,
-  };
-
-  var whydPageParams = {
-    loggedUser: loggedUser,
-    js: [],
-    css: [],
-    endOfBody: [].join('\n'),
-    bodyClass: 'home',
-  };
-
-  mainTemplate.renderAsyncWhydPageFromTemplateFile(
-    'public/html/landingOpen.html',
-    templateParams,
-    whydPageParams,
-    callback,
-    true
-  );
-};
-
 exports.renderLoginPage = function (form) {
   var params = {
     urlPrefix: config.urlPrefix,

diff --git a/app/templates/mainTemplate.js b/app/templates/mainTemplate.js
@@ -260,24 +260,24 @@ exports.renderHeader = function (user, content, params) {
       '   </a>',
       uid ? '<div id="notifIcon">0</div><div id="notifPanel"></div>' : '',
       '  </div>',
+      '  <div id="navbar">',
+      '   <a target="_top" id="tabStream" href="/">Stream</a>',
+      '   <a target="_top" id="tabHot" href="/hot">Hot Tracks</a>',
+      //		'   <a target="_top" id="tabProfile" href="/u/'+user.id+'">Profile</a>',
+      //	'   <a target="_top" id="tabDiscover" href="/discover/users">Discover</a>',
+      '  </div>',
+      '  <div id="searchBar">',
+      '   <div class="searchForm" id="searchForm">', //<form id="searchForm" method="get" action="'+render.urlPrefix+'/search">',
+      '    <input name="q" class="q search-input" id="q" type="text" value="' +
+        uiSnippets.htmlEntities(params.q) +
+        '" placeholder="Search for a song, artist, genre, etc" autocomplete="off" />',
+      //	'    <input type="button" id="searchClear" />',
+      '   </div>', //</form>',
+      '   <div class="searchResults" id="searchResults"></div>',
+      '  </div>',
     ].concat(
       uid
         ? [
-            '  <div id="navbar">',
-            '   <a target="_top" id="tabStream" href="/">Stream</a>',
-            '   <a target="_top" id="tabHot" href="/hot">Hot Tracks</a>',
-            //		'   <a target="_top" id="tabProfile" href="/u/'+user.id+'">Profile</a>',
-            //	'   <a target="_top" id="tabDiscover" href="/discover/users">Discover</a>',
-            '  </div>',
-            '  <div id="searchBar">',
-            '   <div class="searchForm" id="searchForm">', //<form id="searchForm" method="get" action="'+render.urlPrefix+'/search">',
-            '    <input name="q" class="q search-input" id="q" type="text" value="' +
-              uiSnippets.htmlEntities(params.q) +
-              '" placeholder="Search for a song, artist, genre, etc" autocomplete="off" />',
-            //	'    <input type="button" id="searchClear" />',
-            '   </div>', //</form>',
-            '   <div class="searchResults" id="searchResults"></div>',
-            '  </div>',
             '  <div id="navLinks">',
 
             '   <div id="loginDiv">',
@@ -309,19 +309,11 @@ exports.renderHeader = function (user, content, params) {
             '  </div>',
           ]
         : [
-            '  <div id="searchBar">',
-            '  <h1>Openwhyd: The community of music lovers</h1>',
-            '	 <p>Discover and collect music gems from Youtube, Soundcloud, Deezer and more</p>',
-            '   <div class="searchForm" id="searchForm">', //<form id="searchForm" method="get" action="'+render.urlPrefix+'/search">',
-            '    <input name="q" class="q search-input" id="q" type="text" value="' +
-              uiSnippets.htmlEntities(params.q) +
-              '" placeholder="Search for a song, artist, genre, etc" autocomplete="off" />',
-            //	'    <input type="button" id="searchClear" />',
-            '   </div>', //</form>',
-            '   <div class="searchResults" id="searchResults"></div>',
+            '  <div id="homeHeader">',
+            '   <h1>Openwhyd: The community of music lovers</h1>',
+            '	  <p>Discover and collect music gems from Youtube, Soundcloud, Deezer and more</p>',
             '  </div>',
             '  <div id="logBox">',
-            '   <a id="get-app" href="https://itunes.apple.com/fr/app/whyd-everyones-music-playlist/id874380201" target="_blank">Get App</a>',
             '   <a id="signin" href="/login">Login</a>',
             '   <a id="signup" onclick="login();">Sign up</a>',
             '  </div>',

diff --git a/app/templates/sideBox.html b/app/templates/sideBox.html
@@ -145,13 +145,6 @@ <h2>😓 Issues with YouTube API</h2>
 </div>
 -->
 <!--
-<div class="sideBox" id="speakerLandingBox">
-  <div class="body">
-    <h2>Experience music like never before.</h2>
-    <p>Get news about the launch of our new product before everyone else.</p>
-    <a href="http://home.whyd.com?src=whyd" target="_blank">Get notified</a>
-  </div>
-</div>
 <div class="sideBox" id="iphoneAppAd">
   <div class="head">
     <h2>Openwhyd also runs on your iPhone!</h2>

diff --git a/public/css/common.css b/public/css/common.css
@@ -699,17 +699,6 @@ body.home #searchResults {
   color: white;
 }
 
-#logBox #get-app {
-  background-image: url(/images/icon-navbar-applestore.png);
-  background-repeat: no-repeat;
-  background-position: 7px -1px;
-  padding-left: 27px;
-}
-
-#logBox #get-app:hover {
-  background-position: 7px -39px;
-}
-
 #logBox #signup {
   background-color: #3177af;
   border-color: #3177af;
@@ -723,37 +712,54 @@ body.home #searchResults {
 }
 
 /********************* LANDING ****************************/
-body.home #header {
+body.visitor.pgStream #header,
+body.visitor.pgHotTracks #header {
   background: #e5e5e5 url(/images/HomepageBackgroundPicture.jpg) no-repeat;
   background-size: cover;
   height: 550px;
   position: relative;
 }
 
-body.home #header .container {
+body.visitor.pgStream #header .container,
+body.visitor.pgHotTracks #header .container {
   border-bottom: 1px solid rgba(255, 255, 255, 0.16);
   height: 55px;
 }
 
-body.home #header #logo {
+body.visitor.pgStream #header #logo,
+body.visitor.pgHotTracks #header #logo {
   background-image: url(/images/logo-white.png);
 }
 
-body.home #header #searchBar {
+body.visitor.pgStream #header #navbar > a#tabStream,
+body.visitor.pgHotTracks #header #navbar > a#tabHot {
+  color: #fdfdfd;
+  border-color: #fdfdfd;
+}
+
+body.visitor.pgStream #header #navbar > a#tabHot,
+body.visitor.pgHotTracks #header #navbar > a#tabStream {
+  color: #fdfdfd;
+}
+
+body.visitor.pgStream #header #homeHeader,
+body.visitor.pgHotTracks #header #homeHeader {
   margin: 251px 200px;
   position: absolute;
   text-align: center;
   width: 580px;
 }
 
-body.home #header #searchBar h1 {
-  color: white;
+body.visitor.pgStream #header #homeHeader h1,
+body.visitor.pgHotTracks #header #homeHeader h1 {
+  color: #fdfdfd;
   font-size: 28px;
   margin: 10px 0;
   display: block;
 }
 
-body.home #header #searchBar p {
+body.visitor.pgStream #header #homeHeader p,
+body.visitor.pgHotTracks #header #homeHeader p {
   color: #cbced2;
   font-size: 16px;
   font-family: 'AvenirNext-Medium', Helvetica, Arial, Sans-serif;
@@ -762,51 +768,35 @@ body.home #header #searchBar p {
   display: block;
 }
 
-body.home input.search-input {
-  background-image: url(/images/HomepageIconSearch.png);
-  background-position: 10px 50%;
-  width: 530px !important;
-  height: 52px;
-  padding-left: 45px;
+body.visitor.pgStream input.search-input,
+body.visitor.pgHotTracks input.search-input {
+  background-color: rgba(239, 239, 239, 128);
 }
 
-body.home input.search-input:focus {
-  box-shadow: none;
-}
-
-body.home #logBox a {
-  border-color: white;
-  color: white;
+body.visitor.pgStream #logBox a,
+body.visitor.pgHotTracks #logBox a {
+  border-color: #fdfdfd;
+  color: #fdfdfd;
   float: none;
 }
 
-body.home #logBox #get-app {
-  background-position: 7px -39px;
-}
-
-body.home #contentPane {
+body.visitor.pgStream #contentPane,
+body.visitor.pgHotTracks #contentPane {
   margin-top: 30px;
 }
 
-body.home .post > .stats {
+body.visitor.pgStream .post > .stats,
+body.visitor.pgHotTracks .post > .stats {
   cursor: default;
   height: 18px;
   overflow: hidden;
 }
 
-body.home .post > .stats:hover {
+body.visitor.pgStream .post > .stats:hover,
+body.visitor.pgHotTracks .post > .stats:hover {
   background-color: transparent;
 }
 
-#header #inviteBanner > a {
-  padding: 8px 8px;
-  font-size: 12px;
-  font-family: 'AvenirNext-DemiBold', Helvetica, Arial, Sans-serif;
-  font-weight: bold;
-  border: 1px solid #3f3f3f;
-  background-clip: padding-box;
-}
-
 /* user dropdown menu */
 
 #navLinks {
@@ -2202,44 +2192,6 @@ body #contentPane {
   margin-top: 70px;
 }
 
-#speakerLandingBox .body {
-  background-color: black;
-  background-image: url('/images/box_speaker_landing2.png');
-  background-repeat: no-repeat;
-  background-position: center 10px;
-  height: 340px;
-  padding: 0;
-  text-align: center;
-}
-
-#speakerLandingBox h2 {
-  color: white;
-  margin-top: 160px;
-  font-size: 16px;
-  font-weight: normal;
-  font-family: 'AvenirNext-DemiBold', Helvetica, Arial, Sans-serif;
-}
-
-#speakerLandingBox p {
-  font-size: 14px;
-  margin: 0 40px;
-  line-height: 24px;
-  color: #b3b3b3;
-}
-
-#speakerLandingBox a {
-  font-family: 'AvenirNext-DemiBold', Helvetica, Arial, Sans-serif;
-  color: white;
-  border-radius: 2px;
-  margin-top: 25px;
-  font-size: 13px;
-  display: inline-block;
-  background-color: #323134;
-  padding: 12px 25px 10px 25px;
-}
-#speakerLandingBox a:hover {
-  background-color: #5c5a60;
-}
 .rightBar > .sideBox > .head {
   position: relative;
   background: white;

diff --git a/public/css/pgCity-common.css b/public/css/pgCity-common.css
@@ -56,7 +56,6 @@ body {
 
 #header .homeLink img,
 #header #baseline,
-#header #inviteBanner,
 #header #notifIcon,
 #header #navbar,
 #header #searchBar,