C2lc (#1706)
* c2lc * fix typo * text formatting --------- Co-authored-by: booploops <49113086+booploops@users.noreply.github.com>
This commit is contained in:
parent
3e99848ab7
commit
ba7999af34
6 changed files with 419 additions and 202 deletions
|
@ -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
BIN
src/renderer/assets/c1-c2.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 52 KiB |
|
@ -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) {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,17 +1,26 @@
|
|||
<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'"
|
||||
<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">
|
||||
<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>
|
||||
</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">
|
||||
<add-to-playlist
|
||||
:playlists="playlists.listing"
|
||||
v-if="modals.addToPlaylist"></add-to-playlist>
|
||||
</transition>
|
||||
<transition name="modal">
|
||||
<audio-controls v-if="modals.audioControls"></audio-controls>
|
||||
|
@ -41,89 +50,145 @@
|
|||
<eq-view v-if="modals.equalizer"></eq-view>
|
||||
</transition>
|
||||
<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 name="modal">
|
||||
<moreinfo-modal v-if="modals.moreInfo" :data="moreinfodata"></moreinfo-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-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);">
|
||||
<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
|
||||
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
|
||||
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"
|
||||
<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'">
|
||||
<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
|
||||
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) }}
|
||||
: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()"
|
||||
<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"
|
||||
<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()">
|
||||
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>
|
||||
<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'">
|
||||
<div
|
||||
class="app-chrome-item generic"
|
||||
v-if="mvViewMode == 'full'">
|
||||
<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')"
|
||||
v-b-tooltip.hover
|
||||
:class="{'active': drawer.panel == 'lyrics'}"
|
||||
@click="invokeDrawer('lyrics')"></button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="playback-button--small lyrics"
|
||||
<button
|
||||
class="playback-button--small lyrics"
|
||||
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
|
||||
</template>
|
||||
</div>
|
||||
<div id="player-pip" :class="{'mini': mvViewMode == 'mini'}"
|
||||
<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'"
|
||||
<div
|
||||
id="player-fullscreen"
|
||||
v-if="mvViewMode == 'full'"
|
||||
@click="fullscreen(!fullscreenState, true)"
|
||||
title="Fullscreen"
|
||||
v-b-tooltip.hover>
|
||||
|
|
104
src/renderer/views/components/c2-upgrade.ejs
Normal file
104
src/renderer/views/components/c2-upgrade.ejs
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue