okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improvements to inline playlists

Browse source
This commit is contained in:
booploops 2022-02-04 01:05:17 -08:00
parent 852ab56253
commit d31bf6db9c
4 changed files with 32 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/renderer/index.js
View file

@ -279,7 +279,8 @@ const app = new Vue({
drawerState: "queue", drawerState: "queue",
topChromeVisible: true, topChromeVisible: true,
progresshover: false, progresshover: false,
windowControlPosition: "right" windowControlPosition: "right",
contentAreaScrolling: true
}, },
collectionList: { collectionList: {
response: {}, response: {},
@ -332,8 +333,10 @@ const app = new Vue({
app.resetState() app.resetState()
}, },
showingPlaylist: () => { showingPlaylist: () => {
document.getElementById("app-content").scrollTo(0, 0); if (!app.modals.showPlaylist) {
// app.resetState() document.getElementById("app-content").scrollTo(0, 0);
app.resetState()
}
}, },
artistPage: () => { artistPage: () => {
document.getElementById("app-content").scrollTo(0, 0); document.getElementById("app-content").scrollTo(0, 0);
@ -487,6 +490,7 @@ const app = new Vue({
resetState() { resetState() {
this.menuPanel.visible = false; this.menuPanel.visible = false;
app.selectedMediaItems = []; app.selectedMediaItems = [];
this.chrome.contentAreaScrolling = true
for (let key in app.modals) { for (let key in app.modals) {
app.modals[key] = false; app.modals[key] = false;
} }
@ -1330,8 +1334,13 @@ const app = new Vue({
} }
if (this.cfg.advanced.experiments.includes('inline-playlists')) { if (this.cfg.advanced.experiments.includes('inline-playlists')) {
if (kind.toString().includes("album") || kind.toString().includes("playlist")) { let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
if (app.page.includes("playlist") || app.page.includes("album")) {
showModal = false
}
if (showModal) {
app.modals.showPlaylist = true app.modals.showPlaylist = true
app.chrome.contentAreaScrolling = false
} else { } else {
app.page = (kind) + "_" + (id); app.page = (kind) + "_" + (id);
window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}` window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
@ -1343,7 +1352,7 @@ const app = new Vue({
app.getTypeFromID((kind), (id), (isLibrary), params); app.getTypeFromID((kind), (id), (isLibrary), params);
document.querySelector("#app-content").scrollTop = 0 // document.querySelector("#app-content").scrollTop = 0
} else { } else {
app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '') app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
} }

19
src/renderer/style.less
View file

@ -3161,12 +3161,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgb(0 0 0 / 50%); background: rgba(0, 0, 0, 0.5);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: calc(var(--navigationBarHeight) + 32px) 0px 0px 0px; z-index: 6;
z-index:2; position: sticky;
margin-top: calc(var(--navigationBarHeight) * -1);
.floating-header {
opacity: 1;
top: 0px;
z-index: 6;
padding: 1em;
h3 {
display: none;
}
}
.playlist-inner { .playlist-inner {
background: black; background: black;
width: 80%; width: 80%;
@ -3180,7 +3191,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
top: 16px; top: 16px;
left: 16px; left: 16px;
margin-left: 16px; margin-left: 16px;
z-index: 3; z-index: 7;
} }
} }
} }

2
src/renderer/views/app/app-content.ejs
View file

@ -1,4 +1,4 @@
<div id="app-content"> <div id="app-content" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
<div id="navigation-bar"> <div id="navigation-bar">
<button class="nav-item" @click="navigateBack()"> <button class="nav-item" @click="navigateBack()">
<%- include('../svg/chevron-left.svg') %> <%- include('../svg/chevron-left.svg') %>

4
src/renderer/views/pages/playlist-inline.ejs
View file

@ -1,7 +1,7 @@
<script type="text/x-template" id="playlist-inline"> <script type="text/x-template" id="playlist-inline">
<div class="content-inner playlist-page inline-playlist" @click.self="$root.modals.showPlaylist = false"> <div class="content-inner playlist-page inline-playlist" @click.self="$root.resetState()">
<div class="playlist-inner" v-if="data != [] && data.attributes != null"> <div class="playlist-inner" v-if="data != [] && data.attributes != null">
<div class="close-btn" title="Close" @click="$root.modals.showPlaylist = false"> <div class="close-btn" title="Close" @click="$root.resetState()">
<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
aria-role="presentation" focusable="false"> aria-role="presentation" focusable="false">
<path <path