added immersive fullscreen experiment

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

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() {

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')}}

View file

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

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'"