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

C2lc (#1706)

Browse source 
* c2lc

* fix typo

* text formatting

---------

Co-authored-by: booploops <49113086+booploops@users.noreply.github.com>
This commit is contained in:
yazninja 2023-05-12 20:55:44 +03:00 • committed by GitHub
parent 3e99848ab7
commit ba7999af34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 419 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/oobe",
"pages/cider-profile",
"components/c2-upgrade",
"components/app-content",
"components/sidebar",
"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",
contentAreaScrolling: true,
showCursor: false,
noC2Upgrade: localStorage.getItem("noC2Upgrade") == "true" ? true : false,
},
collectionList: {
response: {},
@ -220,6 +221,7 @@ const app = new Vue({
moreInfo: false,
airplayPW: false,
settings: false,
c2Upgrade: false,
},
socialBadges: {
badgeMap: {},
@ -1283,6 +1285,15 @@ const app = new Vue({
if (this.cfg.general.themeUpdateNotification && !this.isDev) {
this.checkForThemeUpdates();
}
if (!localStorage.getItem("noC2Startup")) {
const c2UpgradeDate = 1688172351000;
if (Date.now() <= c2UpgradeDate) {
setTimeout(() => {
app.modals.c2Upgrade = true;
}, 2000);
}
}
},
setWindowScaleFactor() {
let scale = (((window.devicePixelRatio * window.innerWidth) / 1280) * window.innerHeight) / 720;
@ -1295,6 +1306,9 @@ const app = new Vue({
}
document.documentElement.style.setProperty("--windowRelativeScale", scale);
},
c2offer() {
app.modals.c2Upgrade = true;
},
showFoo(querySelector, time) {
clearTimeout(this.idleTimer);
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">
<div class="usermenu-container" v-if="chrome.menuOpened">
<div
class="usermenu-container"
v-if="chrome.menuOpened">
<div class="usermenu-body">
<button class="app-sidebar-button" style="width: 100%" @click="appRoute('apple-account-settings')">
<img class="sidebar-user-icon" loading="lazy"
<button
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)" />
<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">
<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 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>
</template>
<template v-else>
@ -31,88 +32,102 @@
</div>
</template>
</div>
<div class="sidebar-user-text" v-else>
<div
class="sidebar-user-text"
v-else>
{{ $root.getLz("app.name") }}
</div>
</button>
<!-- Use 20px SVG for usermenu icon -->
<button class="usermenu-item" v-if="cfg.general.privateEnabled" @click="cfg.general.privateEnabled = false">
<span class="usermenu-item-icon">
<%- include("../svg/x.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.disablePrivateSession")
}}</span>
<button
class="usermenu-item"
v-if="cfg.general.privateEnabled"
@click="cfg.general.privateEnabled = false">
<span class="usermenu-item-icon"> <%- include("../svg/x.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("term.disablePrivateSession") }}</span>
</button>
<button class="usermenu-item" @click="appRoute('remote-pair')">
<span class="usermenu-item-icon">
<%- include("../svg/smartphone.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("action.showWebRemoteQR")
}}</span>
<button
class="usermenu-item"
@click="appRoute('remote-pair')">
<span class="usermenu-item-icon"> <%- include("../svg/smartphone.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("action.showWebRemoteQR") }}</span>
</button>
<button class="usermenu-item" @click="modals.castMenu = true">
<span class="usermenu-item-icon">
<%- include("../svg/cast.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.cast")
}}</span>
<button
class="usermenu-item"
@click="modals.castMenu = true">
<span class="usermenu-item-icon"> <%- include("../svg/cast.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("term.cast") }}</span>
</button>
<button class="usermenu-item" @click="modals.audioSettings = true">
<span class="usermenu-item-icon">
<%- include("../svg/headphones.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.audioSettings")
}}</span>
<button
class="usermenu-item"
@click="modals.audioSettings = true">
<span class="usermenu-item-icon"> <%- include("../svg/headphones.svg") %> </span>
<span class="usermenu-item-name">{{ $root.getLz("term.audioSettings") }}</span>
</button>
<button class="usermenu-item" v-if="pluginInstalled" @click="modals.pluginMenu = true">
<span class="usermenu-item-icon">
<button
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") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.plugin")
}}</span>
<span class="usermenu-item-name">{{ entry.name }}</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") %>
</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">
<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 class="usermenu-item-name">{{ $root.getLz("term.logout") }}</span>
</button>
<button class="usermenu-item" @click="quit()">
<span class="usermenu-item-icon" style="right: 2.5px">
<button
class="usermenu-item"
@click="quit()">
<span
class="usermenu-item-icon"
style="right: 2.5px">
<%- include("../svg/x.svg") %>
</span>
<span class="usermenu-item-name">{{
$root.getLz("term.quit")
}}</span>
<span class="usermenu-item-name">{{ $root.getLz("term.quit") }}</span>
</button>
<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>
</div>
</div>
@ -122,30 +137,48 @@
</transition>
<app-content-area></app-content-area>
<transition name="drawertransition">
<div class="app-drawer"
<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">
<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>
<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>
<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')}}
<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
class="app-drawer"
v-if="drawer.open && drawer.panel == 'queue'">
<cider-queue
ref="queue"
v-if="drawer.panel == 'queue'"></cider-queue>
</div>
</transition>
</div>

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

@ -1,136 +1,201 @@
<cider-menu-panel v-if="menuPanel.visible">
</cider-menu-panel>
<cider-menu-panel v-if="menuPanel.visible"> </cider-menu-panel>
<transition name="wpfade">
<div class="bg-artwork-container" v-if="cfg.visual.window_background_style == 'artwork'"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img @load="chrome.artworkReady = true" class="bg-artwork a ">
<img class="bg-artwork b">
</div>
<div
class="bg-artwork-container"
v-if="cfg.visual.window_background_style == 'artwork'"
:class="{noanimation: (!cfg.visual.bg_artwork_rotation || !animateBackground)}">
<img
@load="chrome.artworkReady = true"
class="bg-artwork a" />
<img class="bg-artwork b" />
</div>
</transition>
<transition name="wpfade">
<div class="bg-artwork--placeholder"></div>
<div class="bg-artwork--placeholder"></div>
</transition>
<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">
<audio-controls v-if="modals.audioControls"></audio-controls>
<add-to-playlist
:playlists="playlists.listing"
v-if="modals.addToPlaylist"></add-to-playlist>
</transition>
<transition name="modal">
<audio-playbackrate v-if="modals.audioPlaybackRate"></audio-playbackrate>
<audio-controls v-if="modals.audioControls"></audio-controls>
</transition>
<transition name="modal">
<audio-settings v-if="modals.audioSettings"></audio-settings>
<audio-playbackrate v-if="modals.audioPlaybackRate"></audio-playbackrate>
</transition>
<transition name="modal">
<castmenu v-if="modals.castMenu"></castmenu>
<audio-settings v-if="modals.audioSettings"></audio-settings>
</transition>
<transition name="modal">
<pathmenu v-if="modals.pathMenu"></pathmenu>
<castmenu v-if="modals.castMenu"></castmenu>
</transition>
<transition name="modal">
<airplay-modal v-if="modals.airplayPW"></airplay-modal>
<pathmenu v-if="modals.pathMenu"></pathmenu>
</transition>
<transition name="modal">
<plugin-menu v-if="modals.pluginMenu"></plugin-menu>
<airplay-modal v-if="modals.airplayPW"></airplay-modal>
</transition>
<transition name="modal">
<settings-window v-if="modals.settings"></settings-window>
<plugin-menu v-if="modals.pluginMenu"></plugin-menu>
</transition>
<transition name="modal">
<eq-view v-if="modals.equalizer"></eq-view>
<settings-window v-if="modals.settings"></settings-window>
</transition>
<transition name="modal">
<qrcode-modal v-if="modals.qrcode" :src="webremoteqr" :url="webremoteurl"></qrcode-modal>
<eq-view v-if="modals.equalizer"></eq-view>
</transition>
<transition name="modal">
<moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-modal>
<qrcode-modal
v-if="modals.qrcode"
:src="webremoteqr"
:url="webremoteurl"></qrcode-modal>
</transition>
<div id="apple-music-video-container" :class="{'mini': mvViewMode == 'mini'}">
<div id="apple-music-video-player-controls">
<div id="player-exit" 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
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" />
</svg>
</div>
<div id="captions" v-if="lyricon && mvViewMode == 'full'">{{((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) : ""): "")
:
'')}}
</div>
<div class="playback-info music-player-info">
<div class="song-artist-album-content" v-if="mvViewMode == 'full'"
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 class="song-name" v-if="mvViewMode == 'full'">
{{ mk.nowPlayingItem?.attributes?.name ?? '' }}
<div class="explicit-icon"
v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
style="display: inline-block"></div>
</div>
<div class="song-progress" v-if="mvViewMode == 'full'">
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
<input type="range" step="0.01" min="0" :style="progressBarStyle()" style="width: 95%"
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@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);"
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
</div>
<div class="app-chrome-item display--large">
<div 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}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0"
:max="cfg.audio.maxVolume"
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
v-b-tooltip.hover :title="formatVolumeTooltip()">
</div>
<template v-if="mvViewMode == 'full'">
<button class="playback-button pause" @click="mk.pause()" 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>
<div class="app-chrome-item generic" v-if="mvViewMode == 'full'">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>
</div>
<div id="player-pip" :class="{'mini': mvViewMode == 'mini'}"
@click="pip()"
title="Picture-in-Picture"
v-b-tooltip.hover>
<%- include("../svg/pip.svg") %>
</div>
<div id="player-fullscreen" v-if="mvViewMode == 'full'"
@click="fullscreen(!fullscreenState, true)"
title="Fullscreen"
v-b-tooltip.hover>
<%- include("../svg/fullscreen.svg") %>
</div>
</div>
</div>
<transition name="modal">
<moreinfo-modal
v-if="modals.moreInfo"
:data="moreinfodata"></moreinfo-modal>
</transition>
<div
id="apple-music-video-container"
:class="{'mini': mvViewMode == 'mini'}">
<div id="apple-music-video-player-controls">
<div
id="player-exit"
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
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" />
</svg>
</div>
<div id="apple-music-video-player"></div>
<div
id="captions"
v-if="lyricon && mvViewMode == 'full'">
{{ (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 : "") : "") : "") }}
</div>
<div class="playback-info music-player-info">
<div
class="song-artist-album-content"
v-if="mvViewMode == 'full'"
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
class="song-name"
v-if="mvViewMode == 'full'">
{{ mk.nowPlayingItem?.attributes?.name ?? "" }}
<div
class="explicit-icon"
v-if="mk.nowPlayingItem?.attributes?.contentRating == 'explicit'"
style="display: inline-block"></div>
</div>
<div
class="song-progress"
v-if="mvViewMode == 'full'">
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
<input
type="range"
step="0.01"
min="0"
:style="progressBarStyle()"
style="width: 95%"
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
@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);"
:max="mk.currentPlaybackDuration"
:value="getSongProgress()" />
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}</p>
</div>
<div class="app-chrome-item display--large">
<div
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}"
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
v-b-tooltip.hover></button>
<input
type="range"
@wheel="volumeWheel"
:step="cfg.audio.volumeStep"
min="0"
:max="cfg.audio.maxVolume"
v-model="mk.volume"
v-if="typeof mk.volume != 'undefined'"
@change="checkMuteChange()"
v-b-tooltip.hover
:title="formatVolumeTooltip()" />
</div>
<template v-if="mvViewMode == 'full'">
<button
class="playback-button pause"
@click="mk.pause()"
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>
<div
class="app-chrome-item generic"
v-if="mvViewMode == 'full'">
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
<button
class="playback-button--small lyrics"
:title="$root.getLz('term.lyrics')"
v-b-tooltip.hover
:class="{'active': drawer.panel == 'lyrics'}"
@click="invokeDrawer('lyrics')"></button>
</template>
<template v-else>
<button
class="playback-button--small lyrics"
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
</template>
</div>
<div
id="player-pip"
:class="{'mini': mvViewMode == 'mini'}"
@click="pip()"
title="Picture-in-Picture"
v-b-tooltip.hover>
<%- include("../svg/pip.svg") %>
</div>
<div
id="player-fullscreen"
v-if="mvViewMode == 'full'"
@click="fullscreen(!fullscreenState, true)"
title="Fullscreen"
v-b-tooltip.hover>
<%- include("../svg/fullscreen.svg") %>
</div>
</div>
</div>
</div>
<div id="apple-music-video-player"></div>
</div>

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

@ -0,0 +1,104 @@
<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.
<br />Cider 2 is a paid upgrade, but we're offering it for free to all Cider users who purchased Cider 1 <b>on or before November 30th, 2022.</b>
<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>