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

added immersive fullscreen experiment

Browse source
This commit is contained in:
booploops 2022-06-29 18:56:30 -07:00
parent c568bdd26a
commit b6a730e202
7 changed files with 232 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/i18n/en_US.json
View file

@ -205,6 +205,7 @@
"term.zoomout" : "Zoom Out",
"term.zoomreset" : "Reset Zoom",
"term.fullscreen" : "Fullscreen",
"term.nowPlaying": "Now Playing",
"home.syncFavorites": "Sync Favorites",
"home.syncFavorites.gettingArtists": "Getting Favorited Artists...",
"home.title": "Home",

172
src/renderer/less/fullscreen.less
View file

@ -19,6 +19,7 @@
display: flex;
justify-content: center;
align-items: center;
--chromeHeight1: 60px;
.app-content-container {
width:100%;
@ -26,11 +27,102 @@
#app-content {
width:100%;
height:100%;
.fs-search {
.search-input--icon {
width: 4em;
background-size: 40%;
background-position: center;
}
input {
padding-left: 2em;
font-size: 2em;
border-radius: var(--mediaItemRadius)
}
}
}
}
.fs-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--chromeHeight1);
background: var(--color1);
backdrop-filter: var(--glassFilter);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
.top-nav-group {
background : #1e1e1e99;
border : 1px solid lighten(@baseColor, 8);
border-radius: 12px;
display : flex;
height : 42px;
width: 90%;
.app-sidebar-item {
background-color: #1e1e1e00;
border-radius : 10px !important;
border : 0px;
min-width : 120px;
padding : 6px;
justify-content : center;
align-items : center;
margin : 0px;
height : 100%;
position : relative;
&:before {
--dist : 1px;
content : '';
position : absolute;
top : var(--dist);
left : var(--dist);
right : var(--dist);
bottom : var(--dist);
background-color: #fff;
opacity : 0;
border-radius : 10px;
transform : scale(0.5);
transition : transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
&:after {
display: none;
}
&:hover {
background-color: transparent;
&:before {
transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
opacity : .1;
transform : scale(1);
}
}
&.active {
background-color: transparent;
&:before {
opacity : .2;
transform: scale(1);
}
}
&.md-btn-primary {
box-shadow : 0px 0px 0px 1px lighten(@baseColor, @colorMixRate * 8);
background-color: lighten(@baseColor, @colorMixRate * 5);
z-index : 1;
}
}
}
}
.fs-row {
flex-grow: 0.5;
@ -389,4 +481,84 @@
}
}
.cd-mediaitem-square {
font-size: 17px;
font-weight: 500;
}
.cd-mediaitem-square .artwork-container .artwork {
box-shadow: var(--mediaItemShadow-Shadow);
}
.cd-mediaitem-list-item {
height: 80px;
}
.cd-mediaitem-list-item .title {
font-size: 1.2em;
font-weight: 450;
}
.cd-mediaitem-list-item .subtitle {
font-size: 1.1em;
font-weight: 380;
}
.cd-mediaitem-list-item .artwork {
width: 50px;
height: 50px;
}
.header-text {
font-size: 3em;
height: 3em;
padding-left: 0.2em;
}
.grouping-container .grouping-btn {
font-size: 1.3em;
color: var(--textColor);
background-color: var(--sidebarColor);
font-weight: 600;
padding: 32px;
//box-shadow: var(--ciderShadow-Generic);
}
.content-inner.playlist-page {
display: flex;
flex-direction: row;
}
.playlist-page .playlist-display {
width: 100%;
max-width: 500px;
flex:1;
text-align: center;
.playlistInfo {
>.row {
justify-content: center;
}
}
.playlist-controls {
div {
width:100%;
}
}
}
.playlist-page .mediaContainer {
width: 30vh;
height: 30vh;
aspect-ratio: 1;
}
.playlist-page .playlist-display .playlistInfo .playlist-info {
gap: 16px;
margin-top: 40px;
}
.playlist-page .playlist-body {
flex: 1;
}
}

5
src/renderer/style.css
View file

@ -12074,7 +12074,7 @@ input[type=checkbox][switch]:checked:active::before {
align-items: center;
color: white;
}
.playback-button.navigation > svg {
.playback-button.navigation > ._svg-icon {
height: 16px;
width: 16px;
pointer-events: none;
@ -14663,6 +14663,9 @@ input[type=checkbox][switch]:checked:active::before {
padding-top: 48px;
border-left: 1px solid var(--borderColor);
}
#hid___BV_tab_button__ {
display: none;
}
:root {
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgba(200, 200, 200, 0.16);

21
src/renderer/views/components/fullscreen.ejs
View file

@ -12,6 +12,24 @@
</div>
</div>
</div>
<div class="fs-header" v-if="immersiveEnabled">
<div class="top-nav-group">
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" svg-icon-name="home" page="home">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg" svg-icon-name="listenNow"
page="listen_now"></sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" svg-icon-name="browse" page="browse">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" svg-icon-name="radio" page="radio">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.library')" svg-icon="./assets/feather/radio.svg" svg-icon-name="library" page="library">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = ''" :name="$root.getLz('term.nowPlaying')" svg-icon="./assets/play.svg" svg-icon-name="nowPlaying" page="nowPlaying">
</sidebar-library-item>
<sidebar-library-item @click.native="tabMode = 'catalog'" :name="$root.getLz('term.search')" svg-icon="./assets/search.svg" svg-icon-name="search" page="search">
</sidebar-library-item>
</div>
</div>
<div class="row fs-row" v-if="tabMode != 'catalog'">
<div class="col artwork-col">
<div class="artwork" @click="app.fullscreen(false)">
@ -180,7 +198,8 @@
return {
app: this.$root,
tabMode: "lyrics",
video: null
video: null,
immersiveEnabled: app.cfg.advanced.experiments.includes("immersive-preview")
}
},
async mounted() {

15
src/renderer/views/components/settings-window.ejs
View file

@ -1220,6 +1220,21 @@
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Immersive Fullscreen Test
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox"
v-model="app.cfg.advanced.experiments.includes('immersive-preview')"
@click="app.cfg.advanced.experiments.includes('immersive-preview') ? removeExperiment('immersive-preview') : addExperiment('immersive-preview')"
switch />
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.experimental.unknownPlugin')}}

3
src/renderer/views/pages/cider-playlist.ejs
View file

@ -333,6 +333,9 @@
},
methods: {
minClass(val) {
if(app.appMode == 'fullscreen') {
return
}
if (val) {
this.classes = ["plmin"]
} else {

17
src/renderer/views/pages/search.ejs
View file

@ -1,5 +1,22 @@
<script type="text/x-template" id="cider-search">
<div class="content-inner search-page">
<div class="search-input-container fs-search" v-if="$root.appMode == 'fullscreen'" >
<div class="search-input--icon"></div>
<input type="search" spellcheck="false" @focus="$root.search.showHints = true"
@blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false" @input="$root.getSearchHints()"
:placeholder="$root.getLz('term.search') + '...'" v-model="$root.search.term"
class="search-input" />
<div class="search-hints-container" v-if="$root.search.showHints && $root.search.hints.length != 0">
<div class="search-hints">
<button class="search-hint text-overflow-elipsis" v-for="hint in $root.search.hints"
@click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)">
{{ hint }}
</button>
</div>
</div>
</div>
<div class="btn-group searchToggle">
<button
@click="searchType = 'catalog'"