Skip to content

Playlist page improvements #2281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PrestonN merged 10 commits into from
Jun 4, 2022
Merged

Playlist page improvements #2281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
008d882
Add hover visual on thumbnails
vallode May 31, 2022
73e63df
Fix white-space issues on playlist description
vallode May 31, 2022
b7c11c3
Fix playlist issues with scrolling
vallode May 31, 2022
e28d9fd
Fix end of file new lines
vallode Jun 1, 2022
b0c5d13
Merge branch 'development' of https://github.com/FreeTubeApp/FreeTube…
vallode Jun 1, 2022
eec0425
Fix dropdown not visible issue
vallode Jun 1, 2022
c184193
Fix mobile styling
vallode Jun 1, 2022
e125166
Merge remote-tracking branch 'upstream/development' into feature/play…
vallode Jun 3, 2022
a3c65ed
Clean up using flex
vallode Jun 3, 2022
6ef4901
Fix lint issue
vallode Jun 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/renderer/components/ft-list-video/ft-list-video.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,4 @@
@use "../../sass-partials/_ft-list-item"

.thumbnailLink:hover
outline: 3px solid var(--side-nav-hover-color)
28 changes: 20 additions & 8 deletions src/renderer/components/playlist-info/playlist-info.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,44 @@

.playlistThumbnail img
width: 100%

cursor: pointer

@media only screen and (max-width: 800px)
display: none

.playlistStats
font-size: 15px

.playlistStats p
color: var(--secondary-text-color)
margin: 0

.playlistTitle
margin-bottom: 0.1em

.playlistDescription
max-height: 20vh
overflow-y: auto
white-space: break-spaces

@media only screen and (max-width: 500px)
max-height: 10vh

.playlistChannel
height: 70px
display: flex
align-items: center
gap: 8px
height: 40px

/* Indicates the box can be clicked to navigate */
cursor: pointer

.channelThumbnail
width: 70px
width: 40px
float: left
border-radius: 200px 200px 200px 200px
-webkit-border-radius: 200px 200px 200px 200px

.channelName
float: left
position: relative
width: 200px
margin-left: 10px
top: 5px
margin: 0
font-size: 15px
33 changes: 20 additions & 13 deletions src/renderer/components/playlist-info/playlist-info.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,27 @@
@click="playFirstVideo"
>
</div>
<h2>
{{ title }}
</h2>
<p>
{{ videoCount }} {{ $t("Playlist.Videos") }} - <span v-if="!hideViews">{{ viewCount }} {{ $t("Playlist.Views") }} -</span>
<span v-if="infoSource !== 'local'">
{{ $t("Playlist.Last Updated On") }}
</span>
{{ lastUpdated }}
</p>

<div class="playlistStats">
<h2 class="playlistTitle">
{{ title }}
</h2>
<p>
{{ videoCount }} {{ $t("Playlist.Videos") }} - <span v-if="!hideViews">{{ viewCount }} {{ $t("Playlist.Views") }} -</span>
<span v-if="infoSource !== 'local'">
{{ $t("Playlist.Last Updated On") }}
</span>
{{ lastUpdated }}
</p>
</div>

<p
class="playlistDescription"
>
{{ description }}
</p>
v-text="description"
/>

<hr>

<div
class="playlistChannel"
@click="goToChannel"
Expand All @@ -38,7 +43,9 @@
{{ channelName }}
</h3>
</div>

<br>

<ft-list-dropdown
:title="$t('Playlist.Share Playlist.Share Playlist')"
:label-names="shareHeaders"
Expand Down
40 changes: 32 additions & 8 deletions src/renderer/views/Playlist/Playlist.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,42 @@
.routerView {
display: flex;
}

.playlistInfo {
background-color: var(--card-bg-color);
box-sizing: border-box;
height: calc(100vh - 96px);
margin-right: 1em;
overflow-y: auto;
padding: 10px;
float: left;
position: fixed;
top: 60px;
position: sticky;
top: 78px;
width: 30%;
height: 100%;
overflow-y: auto;
}

.playlistItems {
float: right;
width: 60%;
padding: 10px;
display: grid;
grid-gap: 10px;
margin: 0;
padding: 10px;
width: 60%;
}

@media only screen and (max-width: 800px) {
.routerView {
flex-direction: column;
}

.playlistInfo {
box-sizing: border-box;
position: relative;
top: 0;
height: auto;
width: 100%;
}

.playlistItems {
box-sizing: border-box;
width: 100%;
}
}
2 changes: 2 additions & 0 deletions src/renderer/views/Playlist/Playlist.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,13 @@
v-if="isLoading"
:fullscreen="true"
/>

<playlist-info
v-if="!isLoading"
:data="infoData"
class="playlistInfo"
/>

<ft-card
v-if="!isLoading"
class="playlistItems"
Expand Down