plugins adjustment

This commit is contained in:
booploops 2022-09-23 00:43:08 -07:00
parent 50ed8a357e
commit 5383581f8f
3 changed files with 146 additions and 155 deletions

View file

@ -3,11 +3,16 @@ const CiderFrontAPI = {
MenuEntry: function () { MenuEntry: function () {
this.id = ""; this.id = "";
this.name = ""; this.name = "";
this.onClick = () => {}; this.onClick = () => { };
this.top = false
}, },
}, },
AddMenuEntry(entry) { AddMenuEntry(entry) {
app.pluginMenuEntries.push(entry); if (entry?.top) {
app.pluginMenuTopEntries.push(entry);
} else {
app.pluginMenuEntries.push(entry);
}
app.pluginInstalled = true; app.pluginInstalled = true;
}, },
StyleSheets: { StyleSheets: {

View file

@ -18,6 +18,7 @@ const app = new Vue({
mk: {}, mk: {},
pluginInstalled: false, pluginInstalled: false,
pluginMenuEntries: [], pluginMenuEntries: [],
pluginMenuTopEntries: [],
lz: ipcRenderer.sendSync("get-i18n", "en_US"), lz: ipcRenderer.sendSync("get-i18n", "en_US"),
lzListing: ipcRenderer.sendSync("get-i18n-listing"), lzListing: ipcRenderer.sendSync("get-i18n-listing"),
radiohls: null, radiohls: null,

View file

@ -1,166 +1,151 @@
<div class="app-navigation" v-cloak> <div class="app-navigation" v-cloak>
<transition name="wpfade"> <transition name="wpfade">
<div class="usermenu-container" v-if="chrome.menuOpened"> <div class="usermenu-container" v-if="chrome.menuOpened">
<div class="usermenu-body"> <div class="usermenu-body">
<button <button class="app-sidebar-button" style="width: 100%" @click="appRoute('apple-account-settings')">
class="app-sidebar-button" <img class="sidebar-user-icon" loading="lazy"
style="width: 100%" :src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)" />
@click="appRoute('apple-account-settings')"
>
<img
class="sidebar-user-icon"
loading="lazy"
:src="getMediaItemArtwork(chrome.hideUserInfo ? './assets/logocut.png' : (chrome.userinfo.attributes['artwork'] ? chrome.userinfo.attributes['artwork']['url'] : ''), 26)"
/>
<div class="sidebar-user-text" v-if="!chrome.hideUserInfo"> <div class="sidebar-user-text" v-if="!chrome.hideUserInfo">
<template v-if="chrome.userinfo.id || mk.isAuthorized"> <template v-if="chrome.userinfo.id || mk.isAuthorized">
<div class="fullname text-overflow-elipsis"> <div class="fullname text-overflow-elipsis">
{{ {{
chrome.userinfo != null && chrome.userinfo != null &&
chrome.userinfo.attributes != null chrome.userinfo.attributes != null
? chrome.userinfo.attributes.name ?? "" ? chrome.userinfo.attributes.name ?? ""
: "" : ""
}} }}
</div> </div>
<div class="handle-text text-overflow-elipsis"> <div class="handle-text text-overflow-elipsis">
{{ {{
chrome.userinfo != null && chrome.userinfo != null &&
chrome.userinfo.attributes != null chrome.userinfo.attributes != null
? chrome.userinfo.attributes.handle ?? "" ? chrome.userinfo.attributes.handle ?? ""
: "" : ""
}} }}
</div> </div>
</template> </template>
<template v-else> <template v-else>
<div @click="mk.authorize()"> <div @click="mk.authorize()">
{{ $root.getLz("term.login") }} {{ $root.getLz("term.login") }}
</div> </div>
</template> </template>
</div> </div>
<div class="sidebar-user-text" v-else> <div class="sidebar-user-text" v-else>
{{ $root.getLz("app.name") }} {{ $root.getLz("app.name") }}
</div> </div>
</button> </button>
<!-- Use 20px SVG for usermenu icon --> <!-- Use 20px SVG for usermenu icon -->
<button <button class="usermenu-item" v-if="cfg.general.privateEnabled" @click="cfg.general.privateEnabled = false">
class="usermenu-item" <span class="usermenu-item-icon">
v-if="cfg.general.privateEnabled" <%- include("../svg/x.svg") %>
@click="cfg.general.privateEnabled = false" </span>
> <span class="usermenu-item-name">{{
<span class="usermenu-item-icon"> $root.getLz("term.disablePrivateSession")
<%- include("../svg/x.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.disablePrivateSession")
}}</span> }}</span>
</button> </button>
<button class="usermenu-item" @click="appRoute('remote-pair')"> <button class="usermenu-item" @click="appRoute('remote-pair')">
<span class="usermenu-item-icon"> <span class="usermenu-item-icon">
<%- include("../svg/smartphone.svg") %> <%- include("../svg/smartphone.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{
$root.getLz("action.showWebRemoteQR") $root.getLz("action.showWebRemoteQR")
}}</span> }}</span>
</button> </button>
<button <button class="usermenu-item" @click="modals.castMenu = true">
class="usermenu-item" <span class="usermenu-item-icon">
@click="modals.castMenu = true" <%- include("../svg/cast.svg") %>
> </span>
<span class="usermenu-item-icon"> <span class="usermenu-item-name">{{
<%- include("../svg/cast.svg") %> $root.getLz("term.cast")
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.cast")
}}</span> }}</span>
</button> </button>
<button <button class="usermenu-item" @click="modals.audioSettings = true">
class="usermenu-item" <span class="usermenu-item-icon">
@click="modals.audioSettings = true" <%- include("../svg/headphones.svg") %>
> </span>
<span class="usermenu-item-icon"> <span class="usermenu-item-name">{{
<%- include("../svg/headphones.svg") %> $root.getLz("term.audioSettings")
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.audioSettings")
}}</span> }}</span>
</button> </button>
<button <button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
class="usermenu-item" <span class="usermenu-item-icon">
v-if="pluginInstalled" <%- include("../svg/grid.svg") %>
@click="modals.pluginMenu = true" </span>
> <span class="usermenu-item-name">{{
<span class="usermenu-item-icon"> $root.getLz("term.plugin")
<%- include("../svg/grid.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.plugin")
}}</span> }}</span>
</button> </button>
<button class="usermenu-item" @click="appRoute('about')"> <button class="usermenu-item" @click="appRoute('about')">
<span class="usermenu-item-icon"> <span class="usermenu-item-icon">
<%- include("../svg/info.svg") %> <%- include("../svg/info.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{
$root.getLz("term.about") $root.getLz("term.about")
}}</span> }}</span>
</button> </button>
<button class="usermenu-item" @click="modals.settings = true"> <button class="usermenu-item" @click="modals.settings = true">
<span class="usermenu-item-icon"> <span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %> <%- include("../svg/settings.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{
$root.getLz("term.settings") $root.getLz("term.settings")
}}</span> }}</span>
</button> </button>
<button class="usermenu-item" @click="unauthorize()"> <button class="usermenu-item" v-for="entry in $root.pluginMenuTopEntries" @click="entry.onClick()">
<span class="usermenu-item-icon" style="right: 2.5px"> <span class="usermenu-item-icon" style="right: 2.5px">
<%- include("../svg/log-out.svg") %> <%- include("../svg/grid.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{entry.name}}</span>
$root.getLz("term.logout") </button>
<button class="usermenu-item" @click="unauthorize()">
<span class="usermenu-item-icon" style="right: 2.5px">
<%- include("../svg/log-out.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.logout")
}}</span> }}</span>
</button> </button>
<button class="usermenu-item" @click="quit()"> <button class="usermenu-item" @click="quit()">
<span class="usermenu-item-icon" style="right: 2.5px"> <span class="usermenu-item-icon" style="right: 2.5px">
<%- include("../svg/x.svg") %> <%- include("../svg/x.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{
$root.getLz("term.quit") $root.getLz("term.quit")
}}</span> }}</span>
</button> </button>
</div> </div>
</div>
</transition>
<transition name="sidebartransition">
<cider-app-sidebar v-if="!chrome.sidebarCollapsed"></cider-app-sidebar>
</transition>
<app-content-area></app-content-area>
<transition name="drawertransition">
<div class="app-drawer"
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
<div class="bgArtworkMaterial">
<div class="bg-artwork-container">
<img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork a"
:src="$store.state.artwork.playerLCD">
<img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork b"
:src="$store.state.artwork.playerLCD">
<img v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork no-animation"
:src="$store.state.artwork.playerLCD">
</div> </div>
</transition> </div>
<transition name="sidebartransition"> <lyrics-view v-if="drawer.panel == 'lyrics'" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
<cider-app-sidebar v-if="!chrome.sidebarCollapsed"></cider-app-sidebar> :richlyrics="richlyrics"></lyrics-view>
</transition> <div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
<app-content-area></app-content-area> <button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
<transition name="drawertransition"> $root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
<div class="app-drawer" </button>
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0"> </div>
<div class="bgArtworkMaterial"> </div>
<div class="bg-artwork-container"> </transition>
<img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork a" <transition name="drawertransition">
:src="$store.state.artwork.playerLCD"> <div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
<img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork b" <cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
:src="$store.state.artwork.playerLCD"> </div>
<img v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork no-animation" </transition>
:src="$store.state.artwork.playerLCD">
</div>
</div>
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
<div v-if="drawer.panel == 'lyrics'" class="lyric-footer">
<button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ?
$root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}}
</button>
</div>
</div>
</transition>
<transition name="drawertransition">
<div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'">
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue>
</div>
</transition>
</div> </div>