mirror of https://github.com/FreeTubeApp/FreeTube
Add back button for searchView and playlistView (#223)
* Add back button for searchView and playlistView * Remove title
This commit is contained in:
parent
6b0c751258
commit
7b530b0dcb
|
@ -32,9 +32,10 @@
|
||||||
<span id='toastMessage'></span>
|
<span id='toastMessage'></span>
|
||||||
<i onclick='hideToast()' class="closeToast fas fa-times"></i>
|
<i onclick='hideToast()' class="closeToast fas fa-times"></i>
|
||||||
</div>
|
</div>
|
||||||
<div class="topNav">
|
<div id="topNav" class="topNav">
|
||||||
<i onclick='toggleSideNavigation()' class="fas fa-bars" id='menuButton'></i>
|
<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 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">
|
<div class="searchBar">
|
||||||
<input id='search' class="search" type="text" placeholder="Search / Go to URL">
|
<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>
|
<i onclick='parseSearchText()' class="fas fa-search searchButton" style='margin-right: -10px; cursor: pointer'></i>
|
||||||
|
|
|
@ -318,9 +318,13 @@ let playlistView = new Vue({
|
||||||
play: (videoId) => {
|
play: (videoId) => {
|
||||||
loadingView.seen = true;
|
loadingView.seen = true;
|
||||||
playVideo(videoId, playlistView.playlistId);
|
playVideo(videoId, playlistView.playlistId);
|
||||||
|
|
||||||
|
backButtonView.lastView = playlistView
|
||||||
},
|
},
|
||||||
channel: (channelId) => {
|
channel: (channelId) => {
|
||||||
goToChannel(channelId);
|
goToChannel(channelId);
|
||||||
|
|
||||||
|
backButtonView.lastView = playlistView
|
||||||
},
|
},
|
||||||
toggleSave: (videoId) => {
|
toggleSave: (videoId) => {
|
||||||
addSavedVideo(videoId);
|
addSavedVideo(videoId);
|
||||||
|
@ -373,9 +377,13 @@ let searchView = new Vue({
|
||||||
play: (videoId) => {
|
play: (videoId) => {
|
||||||
loadingView.seen = true;
|
loadingView.seen = true;
|
||||||
playVideo(videoId);
|
playVideo(videoId);
|
||||||
|
|
||||||
|
backButtonView.lastView = searchView
|
||||||
},
|
},
|
||||||
channel: (channelId) => {
|
channel: (channelId) => {
|
||||||
goToChannel(channelId);
|
goToChannel(channelId);
|
||||||
|
|
||||||
|
backButtonView.lastView = searchView
|
||||||
},
|
},
|
||||||
toggleSave: (videoId) => {
|
toggleSave: (videoId) => {
|
||||||
addSavedVideo(videoId);
|
addSavedVideo(videoId);
|
||||||
|
@ -391,6 +399,8 @@ let searchView = new Vue({
|
||||||
},
|
},
|
||||||
playlist: (playlistId) => {
|
playlist: (playlistId) => {
|
||||||
showPlaylist(playlistId);
|
showPlaylist(playlistId);
|
||||||
|
|
||||||
|
backButtonView.lastView = searchView
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
template: videoListTemplate
|
template: videoListTemplate
|
||||||
|
@ -573,6 +583,46 @@ let playerView = new Vue({
|
||||||
template: playerTemplate
|
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(){
|
function hideViews(){
|
||||||
subscriptionView.seen = false;
|
subscriptionView.seen = false;
|
||||||
noSubscriptions.seen = false;
|
noSubscriptions.seen = false;
|
||||||
|
@ -588,4 +638,6 @@ function hideViews(){
|
||||||
playerView.seen = false;
|
playerView.seen = false;
|
||||||
channelView.seen = false;
|
channelView.seen = false;
|
||||||
channelVideosView.seen = false;
|
channelVideosView.seen = false;
|
||||||
|
|
||||||
|
backButtonView.lastView = false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -91,6 +91,15 @@ a {
|
||||||
top: 3px;
|
top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#backButton {
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
top: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
#menuIcon {
|
#menuIcon {
|
||||||
width: 25px;
|
width: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
Loading…
Reference in New Issue