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

c2lc

Browse source
This commit is contained in:
booploops 2023-05-06 11:06:30 -07:00
parent 01bfc35f01
commit ac43eb54de
6 changed files with 420 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/main/base/browserwindow.ts
View file

@ -75,6 +75,7 @@ export class BrowserWindow {
"pages/plugin-renderer", "pages/plugin-renderer",
"pages/oobe", "pages/oobe",
"pages/cider-profile", "pages/cider-profile",
"components/c2-upgrade",
"components/app-content", "components/app-content",
"components/sidebar", "components/sidebar",
"components/mediaitem-artwork", "components/mediaitem-artwork",

BIN
src/renderer/assets/c1-c2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 52 KiB

14
src/renderer/main/vueapp.js
View file

@ -190,6 +190,7 @@ const app = new Vue({
windowControlPosition: "right", windowControlPosition: "right",
contentAreaScrolling: true, contentAreaScrolling: true,
showCursor: false, showCursor: false,
noC2Upgrade: localStorage.getItem("noC2Upgrade") == "true" ? true : false,
}, },
collectionList: { collectionList: {
response: {}, response: {},
@ -220,6 +221,7 @@ const app = new Vue({
moreInfo: false, moreInfo: false,
airplayPW: false, airplayPW: false,
settings: false, settings: false,
c2Upgrade: false,
}, },
socialBadges: { socialBadges: {
badgeMap: {}, badgeMap: {},
@ -1283,6 +1285,15 @@ const app = new Vue({
if (this.cfg.general.themeUpdateNotification && !this.isDev) { if (this.cfg.general.themeUpdateNotification && !this.isDev) {
this.checkForThemeUpdates(); this.checkForThemeUpdates();
} }
if (!localStorage.getItem("noC2Startup")) {
const c2UpgradeDate = 1688172351000;
if (Date.now() <= c2UpgradeDate) {
setTimeout(() => {
app.modals.c2Upgrade = true;
}, 2000);
}
}
}, },
setWindowScaleFactor() { setWindowScaleFactor() {
let scale = (((window.devicePixelRatio * window.innerWidth) / 1280) * window.innerHeight) / 720; let scale = (((window.devicePixelRatio * window.innerWidth) / 1280) * window.innerHeight) / 720;
@ -1295,6 +1306,9 @@ const app = new Vue({
} }
document.documentElement.style.setProperty("--windowRelativeScale", scale); document.documentElement.style.setProperty("--windowRelativeScale", scale);
}, },
c2offer() {
app.modals.c2Upgrade = true;
},
showFoo(querySelector, time) { showFoo(querySelector, time) {
clearTimeout(this.idleTimer); clearTimeout(this.idleTimer);
if (this.idleState == true) { if (this.idleState == true) {

225
src/renderer/views/app/app-navigation.ejs
View file

@ -1,28 +1,29 @@
<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 class="app-sidebar-button" style="width: 100%" @click="appRoute('apple-account-settings')"> <button
<img class="sidebar-user-icon" loading="lazy" class="app-sidebar-button"
style="width: 100%"
@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)" /> :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.attributes != null ? chrome.userinfo.attributes.name ?? "" : "" }}
chrome.userinfo != null &&
chrome.userinfo.attributes != null
? 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.attributes != null ? chrome.userinfo.attributes.handle ?? "" : "" }}
chrome.userinfo != null &&
chrome.userinfo.attributes != null
? chrome.userinfo.attributes.handle ?? ""
: ""
}}
</div> </div>
</template> </template>
<template v-else> <template v-else>
@ -31,88 +32,102 @@
</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 class="usermenu-item" v-if="cfg.general.privateEnabled" @click="cfg.general.privateEnabled = false"> <button
<span class="usermenu-item-icon"> class="usermenu-item"
<%- include("../svg/x.svg") %> v-if="cfg.general.privateEnabled"
</span> @click="cfg.general.privateEnabled = false">
<span class="usermenu-item-name">{{ <span class="usermenu-item-icon"> <%- include("../svg/x.svg") %> </span>
$root.getLz("term.disablePrivateSession") <span class="usermenu-item-name">{{ $root.getLz("term.disablePrivateSession") }}</span>
}}</span>
</button> </button>
<button class="usermenu-item" @click="appRoute('remote-pair')"> <button
<span class="usermenu-item-icon"> class="usermenu-item"
<%- include("../svg/smartphone.svg") %> @click="appRoute('remote-pair')">
</span> <span class="usermenu-item-icon"> <%- include("../svg/smartphone.svg") %> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{ $root.getLz("action.showWebRemoteQR") }}</span>
$root.getLz("action.showWebRemoteQR")
}}</span>
</button> </button>
<button class="usermenu-item" @click="modals.castMenu = true"> <button
<span class="usermenu-item-icon"> class="usermenu-item"
<%- include("../svg/cast.svg") %> @click="modals.castMenu = true">
</span> <span class="usermenu-item-icon"> <%- include("../svg/cast.svg") %> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{ $root.getLz("term.cast") }}</span>
$root.getLz("term.cast")
}}</span>
</button> </button>
<button class="usermenu-item" @click="modals.audioSettings = true"> <button
<span class="usermenu-item-icon"> class="usermenu-item"
<%- include("../svg/headphones.svg") %> @click="modals.audioSettings = true">
</span> <span class="usermenu-item-icon"> <%- include("../svg/headphones.svg") %> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{ $root.getLz("term.audioSettings") }}</span>
$root.getLz("term.audioSettings")
}}</span>
</button> </button>
<button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true"> <button
<span class="usermenu-item-icon"> class="usermenu-item"
v-if="pluginInstalled"
@click="modals.pluginMenu = true">
<span class="usermenu-item-icon"> <%- include("../svg/grid.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("term.plugin") }}</span>
</button>
<button
class="usermenu-item"
@click="appRoute('about')">
<span class="usermenu-item-icon"> <%- include("../svg/info.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("term.about") }}</span>
</button>
<button
class="usermenu-item"
@click="modals.settings = true">
<span class="usermenu-item-icon"> <%- include("../svg/settings.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("term.settings") }}</span>
</button>
<button
class="usermenu-item"
v-for="entry in $root.pluginMenuTopEntries"
@click="entry.onClick()">
<span
class="usermenu-item-icon"
style="right: 2.5px">
<%- include("../svg/grid.svg") %> <%- include("../svg/grid.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{ entry.name }}</span>
$root.getLz("term.plugin")
}}</span>
</button> </button>
<button class="usermenu-item" @click="appRoute('about')"> <button
<span class="usermenu-item-icon"> class="usermenu-item"
<%- include("../svg/info.svg") %> @click="unauthorize()">
</span> <span
<span class="usermenu-item-name">{{ class="usermenu-item-icon"
$root.getLz("term.about") style="right: 2.5px">
}}</span>
</button>
<button class="usermenu-item" @click="modals.settings = true">
<span class="usermenu-item-icon">
<%- include("../svg/settings.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.settings")
}}</span>
</button>
<button class="usermenu-item" v-for="entry in $root.pluginMenuTopEntries" @click="entry.onClick()">
<span class="usermenu-item-icon" style="right: 2.5px">
<%- include("../svg/grid.svg") %>
</span>
<span class="usermenu-item-name">{{entry.name}}</span>
</button>
<button class="usermenu-item" @click="unauthorize()">
<span class="usermenu-item-icon" style="right: 2.5px">
<%- include("../svg/log-out.svg") %> <%- include("../svg/log-out.svg") %>
</span> </span>
<span class="usermenu-item-name">{{ <span class="usermenu-item-name">{{ $root.getLz("term.logout") }}</span>
$root.getLz("term.logout")
}}</span>
</button> </button>
<button class="usermenu-item" @click="quit()"> <button
<span class="usermenu-item-icon" style="right: 2.5px"> class="usermenu-item"
@click="quit()">
<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") }}</span>
$root.getLz("term.quit") </button>
}}</span> <button
v-if="!chrome.noC2Upgrade"
class="usermenu-item"
@click="c2offer()">
<span
class="usermenu-item-icon"
style="right: 1.5px">
<img
class="sidebar-user-icon"
loading="lazy"
style="height: 16px; width: 16px"
src="./assets/logocut.png" />
</span>
<span class="usermenu-item-name">Cider 2 Upgrade</span>
</button> </button>
</div> </div>
</div> </div>
@ -122,30 +137,48 @@
</transition> </transition>
<app-content-area></app-content-area> <app-content-area></app-content-area>
<transition name="drawertransition"> <transition name="drawertransition">
<div class="app-drawer" <div
class="app-drawer"
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0"> v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">
<div class="bgArtworkMaterial"> <div class="bgArtworkMaterial">
<div class="bg-artwork-container"> <div class="bg-artwork-container">
<img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork a" <img
:src="$store.state.artwork.playerLCD"> v-if="(cfg.visual.bg_artwork_rotation && animateBackground)"
<img v-if="(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork b" class="bg-artwork a"
:src="$store.state.artwork.playerLCD"> :src="$store.state.artwork.playerLCD" />
<img v-if="!(cfg.visual.bg_artwork_rotation && animateBackground)" class="bg-artwork no-animation" <img
:src="$store.state.artwork.playerLCD"> 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>
</div> </div>
<lyrics-view v-if="drawer.panel == 'lyrics'" :time="mk.currentPlaybackTime - lyricOffset" :lyrics="lyrics" <lyrics-view
v-if="drawer.panel == 'lyrics'"
:time="mk.currentPlaybackTime - lyricOffset"
:lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view> :richlyrics="richlyrics"></lyrics-view>
<div v-if="drawer.panel == 'lyrics'" class="lyric-footer"> <div
<button class="md-btn" @click="modularUITest(!fullscreenLyrics)">{{fullscreenLyrics ? v-if="drawer.panel == 'lyrics'"
$root.getLz('term.defaultView'): $root.getLz('term.fullscreenView')}} class="lyric-footer">
<button
class="md-btn"
@click="modularUITest(!fullscreenLyrics)">
{{ fullscreenLyrics ? $root.getLz("term.defaultView") : $root.getLz("term.fullscreenView") }}
</button> </button>
</div> </div>
</div> </div>
</transition> </transition>
<transition name="drawertransition"> <transition name="drawertransition">
<div class="app-drawer" v-if="drawer.open && drawer.panel == 'queue'"> <div
<cider-queue ref="queue" v-if="drawer.panel == 'queue'"></cider-queue> class="app-drawer"
v-if="drawer.open && drawer.panel == 'queue'">
<cider-queue
ref="queue"
v-if="drawer.panel == 'queue'"></cider-queue>
</div> </div>
</transition> </transition>
</div> </div>

155
src/renderer/views/app/panels.ejs
View file

@ -1,17 +1,26 @@
<cider-menu-panel v-if="menuPanel.visible"> <cider-menu-panel v-if="menuPanel.visible"> </cider-menu-panel>
</cider-menu-panel>
<transition name="wpfade"> <transition name="wpfade">
<div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'" <div
class="bg-artwork-container"
v-if="cfg.visual.window_background_style == 'artwork'"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}"> :class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img @load="chrome.artworkReady = true" class="bg-artwork a "> <img
<img class="bg-artwork b"> @load="chrome.artworkReady = true"
class="bg-artwork a" />
<img class="bg-artwork b" />
</div> </div>
</transition> </transition>
<transition name="wpfade"> <transition name="wpfade">
<div class="bg-artwork--placeholder"></div> <div class="bg-artwork--placeholder"></div>
</transition> </transition>
<transition name="modal"> <transition name="modal">
<add-to-playlist :playlists="playlists.listing" v-if="modals.addToPlaylist"></add-to-playlist> <c2-upgrade
v-if="modals.c2Upgrade"></c2-upgrade>
</transition>
<transition name="modal">
<add-to-playlist
:playlists="playlists.listing"
v-if="modals.addToPlaylist"></add-to-playlist>
</transition> </transition>
<transition name="modal"> <transition name="modal">
<audio-controls v-if="modals.audioControls"></audio-controls> <audio-controls v-if="modals.audioControls"></audio-controls>
@ -41,89 +50,145 @@
<eq-view v-if="modals.equalizer"></eq-view> <eq-view v-if="modals.equalizer"></eq-view>
</transition> </transition>
<transition name="modal"> <transition name="modal">
<qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal> <qrcode-modal
v-if="modals.qrcode"
:src="webremoteqr"
:url="webremoteurl"></qrcode-modal>
</transition> </transition>
<transition name="modal"> <transition name="modal">
<moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-modal> <moreinfo-modal
v-if="modals.moreInfo"
:data="moreinfodata"></moreinfo-modal>
</transition> </transition>
<div id="apple-music-video-container" :class="{'mini': mvViewMode == 'mini'}"> <div
id="apple-music-video-container"
:class="{'mini': mvViewMode == 'mini'}">
<div id="apple-music-video-player-controls"> <div id="apple-music-video-player-controls">
<div id="player-exit" title="Close" @click="exitMV();fullscreen(false);"> <div
<svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" id="player-exit"
aria-role="presentation" focusable="false" @click="exitMV();fullscreen(false);"> title="Close"
@click="exitMV();fullscreen(false);">
<svg
fill="white"
xmlns="http://www.w3.org/2000/svg"
width="21"
height="21"
viewBox="0 0 21 21"
aria-role="presentation"
focusable="false"
@click="exitMV();fullscreen(false);">
<path <path
d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z" d="M10.5 21C4.724 21 0 16.275 0 10.5S4.724 0 10.5 0 21 4.725 21 10.5 16.276 21 10.5 21zm-3.543-5.967a.96.96 0 00.693-.295l2.837-2.842 2.85 2.842c.167.167.41.295.693.295.552 0 1.001-.461 1.001-1.012 0-.281-.115-.512-.295-.704L11.899 10.5l2.85-2.855a.875.875 0 00.295-.68c0-.55-.45-.998-1.001-.998a.871.871 0 00-.668.295l-2.888 2.855-2.862-2.843a.891.891 0 00-.668-.281.99.99 0 00-1.001.986c0 .269.116.512.295.678L9.088 10.5l-2.837 2.843a.926.926 0 00-.295.678c0 .551.45 1.012 1.001 1.012z"
fill-rule="nonzero" /> fill-rule="nonzero" />
</svg> </svg>
</div> </div>
<div id="captions" v-if="lyricon && mvViewMode == 'full'">{{((lyricon) ? ((lyrics.length > 0 && lyrics[currentLyricsLine] && <div
lyrics[currentLyricsLine].line ) ? id="captions"
lyrics[currentLyricsLine].line.replace('lrcInstrumental','') : "") : '') + ((lyricon) ? v-if="lyricon && mvViewMode == 'full'">
((lyrics.length {{ (lyricon ? (lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ? lyrics[currentLyricsLine].line.replace("lrcInstrumental", "") : "") : "") + (lyricon ? (lyrics.length > 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ? (lyrics[currentLyricsLine].translation ? "\n\r" + lyrics[currentLyricsLine].translation : "") : "") : "") }}
> 0 && lyrics[currentLyricsLine] && lyrics[currentLyricsLine].line ) ?
(lyrics[currentLyricsLine].translation ? ('\n\r' + lyrics[currentLyricsLine].translation) : ""): "")
:
'')}}
</div> </div>
<div class="playback-info music-player-info"> <div class="playback-info music-player-info">
<div class="song-artist-album-content" v-if="mvViewMode == 'full'" <div
style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap;"> class="song-artist-album-content"
<div class="song-artist" style="display: inline-block"> v-if="mvViewMode == 'full'"
{{ mk.nowPlayingItem?.attributes?.artistName ?? '' }} style="display: inline-block; -webkit-box-orient: horizontal; white-space: nowrap">
<div
class="song-artist"
style="display: inline-block">
{{ mk.nowPlayingItem?.attributes?.artistName ?? "" }}
</div> </div>
</div> </div>
<div class="song-name" v-if="mvViewMode == 'full'"> <div
{{ mk.nowPlayingItem?.attributes?.name ?? '' }} class="song-name"
<div class="explicit-icon" v-if="mvViewMode == 'full'">
{{ mk.nowPlayingItem?.attributes?.name ?? "" }}
<div
class="explicit-icon"
v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'" v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
style="display: inline-block"></div> style="display: inline-block"></div>
</div> </div>
<div class="song-progress" v-if="mvViewMode == 'full'"> <div
class="song-progress"
v-if="mvViewMode == 'full'">
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p> <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
<input type="range" step="0.01" min="0" :style="progressBarStyle()" style="width: 95%" <input
type="range"
step="0.01"
min="0"
:style="progressBarStyle()"
style="width: 95%"
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true" @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);" @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
@touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);" @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
:max="mk.currentPlaybackDuration" :value="getSongProgress()"> :max="mk.currentPlaybackDuration"
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }} :value="getSongProgress()" />
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}</p>
</div> </div>
<div class="app-chrome-item display--large"> <div class="app-chrome-item display--large">
<div class="app-chrome-item volume display--large" v-if="mvViewMode == 'full'"> <div
<button class="volume-button--small volume" @click="muteButtonPressed()" class="app-chrome-item volume display--large"
v-if="mvViewMode == 'full'">
<button
class="volume-button--small volume"
@click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}" :class="{'active': this.cfg.audio.volume == 0}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button> v-b-tooltip.hover></button>
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" <input
type="range"
@wheel="volumeWheel"
:step="cfg.audio.volumeStep"
min="0"
:max="cfg.audio.maxVolume" :max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()" v-model="mk.volume"
v-b-tooltip.hover :title="formatVolumeTooltip()"> v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()"
v-b-tooltip.hover
:title="formatVolumeTooltip()" />
</div> </div>
<template v-if="mvViewMode == 'full'"> <template v-if="mvViewMode == 'full'">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying" <button
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button> class="playback-button pause"
<button class="playback-button play" @click="mk.play()" v-else @click="mk.pause()"
:title="$root.getLz('term.play')" v-b-tooltip.hover></button> v-if="mk.isPlaying"
:title="$root.getLz('term.pause')"
v-b-tooltip.hover></button>
<button
class="playback-button play"
@click="mk.play()"
v-else
:title="$root.getLz('term.play')"
v-b-tooltip.hover></button>
</template> </template>
<div class="app-chrome-item generic" v-if="mvViewMode == 'full'"> <div
class="app-chrome-item generic"
v-if="mvViewMode == 'full'">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0"> <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics" <button
class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')" :title="$root.getLz('term.lyrics')"
v-b-tooltip.hover v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}" :class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button> @click="invokeDrawer('lyrics')"></button>
</template> </template>
<template v-else> <template v-else>
<button class="playback-button--small lyrics" <button
class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button> :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template> </template>
</div> </div>
<div id="player-pip" :class="{'mini': mvViewMode == 'mini'}" <div
id="player-pip"
:class="{'mini': mvViewMode == 'mini'}"
@click="pip()" @click="pip()"
title="Picture-in-Picture" title="Picture-in-Picture"
v-b-tooltip.hover> v-b-tooltip.hover>
<%- include("../svg/pip.svg") %> <%- include("../svg/pip.svg") %>
</div> </div>
<div id="player-fullscreen" v-if="mvViewMode == 'full'" <div
id="player-fullscreen"
v-if="mvViewMode == 'full'"
@click="fullscreen(!fullscreenState, true)" @click="fullscreen(!fullscreenState, true)"
title="Fullscreen" title="Fullscreen"
v-b-tooltip.hover> v-b-tooltip.hover>

105
src/renderer/views/components/c2-upgrade.ejs Normal file
View file

@ -0,0 +1,105 @@
<template
type="text/x-template"
id="c2-upgrade">
<div
class="modal-fullscreen addtoplaylist-panel"
@click.self="closePromo"
@contextmenu.self="closePromo">
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">Cider 2 Free Upgrade - Last Call!</div>
<button
class="close-btn"
@click="closePromo"
:aria-label="app.getLz('action.close')"></button>
</div>
<div
class="modal-content"
style="text-align: center">
<img
src="./assets/c1-c2.png"
style="margin: 12px 22px 0;pointer-events: none;" />
<p
class="p-3"
style="font-size: 14px">
Earlier this year, we released Cider 2, a complete rewrite of Cider. Cider 2 is a paid upgrade,
<br />
but we're offering it for free to all Cider users who purchased Cider 1 on or after November 30th, 2022.
<br />
<br />
If you are eligible for a free upgrade, you can download Cider 2 from the Microsoft Store.
<br />
<br />
<b> The cutoff date for this upgrade is: <br />June, 30th 2023. </b>
<br />
<br />
<label>
<input
type="checkbox"
style="accent-color: var(--keyColor)"
v-model="showOnStartup" />
Show this offer again on next startup
</label>
<template v-if="hasSeen">
<br />
<label>
<input
type="checkbox"
style="accent-color: var(--keyColor)"
v-model="removeItemFromMainMenu" />
Remove upgrade item from Main Menu
</label>
</template>
</p>
</div>
<div
class="modal-search"
style="padding: 12px">
<button
class="btn btn-primary"
@click="openStore"
style="width: 100%">
Open in Microsoft Store
</button>
<button
class="btn btn-secondary"
@click="closePromo"
style="width: 100%; margin-top: 1em">
Close
</button>
</div>
</div>
</div>
</template>
<script>
Vue.component("c2-upgrade", {
template: "#c2-upgrade",
data: function () {
return {
app: this.$root,
showOnStartup: true,
hasSeen: localStorage.getItem("seenC2Upgrade"),
removeItemFromMainMenu: false,
};
},
methods: {
closePromo() {
this.app.modals.c2Upgrade = false;
if (!this.showOnStartup) {
localStorage.setItem("noC2Startup", true);
}
if (this.removeItemFromMainMenu) {
localStorage.setItem("noC2Upgrade", true);
app.chrome.noC2Upgrade = true;
}
localStorage.setItem("seenC2Upgrade", true);
},
openStore() {
window.open("https://www.microsoft.com/store/productId/9PL8WPH0QK9M");
},
},
});
</script>