Add back button for searchView and playlistView (#223)

* Add back button for searchView and playlistView

* Remove title

src/index.html

@@ -32,9 +32,10 @@
     <span id='toastMessage'></span>
     <i onclick='hideToast()' class="closeToast fas fa-times"></i>
   </div>
-  <div class="topNav">
+  <div id="topNav" class="topNav">
     <i onclick='toggleSideNavigation()' class="fas fa-bars" id='menuButton'></i>
     <i onclick='forceSubscriptions()' class="fas fa-sync" id='reloadButton' title='Force Subscription Reload'></i>
+    <i v-on:click='back' v-if="canShowBackButton" class="fas fa-arrow-left" id="backButton"></i>
     <div class="searchBar">
       <input id='search' class="search" type="text" placeholder="Search / Go to URL">
       <i onclick='parseSearchText()' class="fas fa-search searchButton" style='margin-right: -10px; cursor: pointer'></i>

src/js/templates.js

@@ -318,9 +318,13 @@ let playlistView = new Vue({
     play: (videoId) => {
       loadingView.seen = true;
       playVideo(videoId, playlistView.playlistId);
+
+      backButtonView.lastView = playlistView
     },
     channel: (channelId) => {
       goToChannel(channelId);
+
+      backButtonView.lastView = playlistView
     },
     toggleSave: (videoId) => {
       addSavedVideo(videoId);
@@ -373,9 +377,13 @@ let searchView = new Vue({
     play: (videoId) => {
       loadingView.seen = true;
       playVideo(videoId);
+      
+      backButtonView.lastView = searchView
     },
     channel: (channelId) => {
       goToChannel(channelId);
+
+      backButtonView.lastView = searchView
     },
     toggleSave: (videoId) => {
       addSavedVideo(videoId);
@@ -391,6 +399,8 @@ let searchView = new Vue({
     },
     playlist: (playlistId) => {
       showPlaylist(playlistId);
+
+      backButtonView.lastView = searchView
     },
   },
   template: videoListTemplate
@@ -573,6 +583,46 @@ let playerView = new Vue({
   template: playerTemplate
 });
 
+let backButtonView = new Vue({
+  el: '#backButton',
+  data: {
+    lastView: false
+  },
+  methods: {
+    back: function() {
+      // variable here because this.lastView gets reset in hideViews()
+      const isSearch = this.lastView.$options.el === "#searchView";
+
+      hideViews();
+
+      // Check if lastView was search
+      if(isSearch) {
+        // Change back to searchView
+        headerView.seen = true;
+        headerView.title = 'Search Results';
+        searchView.seen = true;
+
+        // reset this.lastView
+        this.lastView = false;
+      } else {
+        // if not search then this.lastView has to be playlistView
+
+        // Change back to playlistView
+        playlistView.seen = true;
+
+        // Check if searchView has videos if it does set this.lastView as searchView
+        this.lastView = searchView.videoList.length > 0 ? searchView : false;
+      }
+    }
+  },
+  computed: {
+    canShowBackButton: function() {
+      // this.lastView can be either searchView or playlistView
+      return !!this.lastView && !this.lastView.seen && this.lastView.videoList.length > 0;
+    }
+  },
+});
+
 function hideViews(){
   subscriptionView.seen = false;
   noSubscriptions.seen = false;
@@ -588,4 +638,6 @@ function hideViews(){
   playerView.seen = false;
   channelView.seen = false;
   channelVideosView.seen = false;
+
+  backButtonView.lastView = false;
 }

src/style/main.css

@@ -91,6 +91,15 @@ a {
     top: 3px;
 }
 
+#backButton {
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 20px;
+    margin-left: 20px;
+    position: relative;
+    top: 3px;
+}
+
 #menuIcon {
     width: 25px;
     position: relative;