my balls ̧itch (#1039)

* Update es_ES

* Localization updates

* Documentation

* Localization updates

* Documentation

* Xd

* Expose playback progress.

* Cider The Wekeend Update

Add more keybinds and make own page to change it ( No more Pop Up)

Redesing the "Menu Bar" to more efficient order.

* CleanUp

* Some Strings Update made By "Monochromish"

* Documentation

* Goodbye Analog Warmth

* typo

* I can't fuckin read

* Updated config.yml

* Auto Triage

* Remove Spatialization from Audio Settings modal

* Remove customizable Spatialization strings

* Remove some whitespaces in ja_JP

* Add i18n updates to README

* Change some things in i18n README

* Remove whitespace in ja_JP

* uhh

* Add hide_timestamp to store

* Add hideTimestamp to en_US and source

* Add hideTimestamp to hu_HU

* Add check to discordrpc.ts

* Add hideTimestamp to settings

* Add missing button labels (fix for screen readers) (#1016)

* added some attributes for themes

https://docs.cider.sh/themes/available-attributes

* Fix unlove

* Revert "Fix unlove"

* Update ja_JP.json

Drafted by あづき#8046
Finalized by Maikiwi

* ja_JP credit change

* Update en_OWO.json

* Add Relaunch Prompt to nativeTitleBar and hw_acc

* Update zh_TW.json

Update TW language.

* made some new playback icons

* german language changes

* CiderAudio cleanup

* and I forgor

* perf increase

* electron version bump

* feat: 🌐 Update French language (#1030)

* further cideraudio trimming

* i18n support for CAR/CTS

* fix broken code

* Update es_ES

* Update Some "Audio Settings" String and added to es_ES

* optimizations

added show loved tracks inline

set several less operations to async

changed default transition to fade in, moved slide in to sweetener

changed drawer transition to transform

optimizations for disabled gpu

* readded audio strings

* Don't code while ur sleepy

* don't fix code while ur drunk

* test your commits before pushing

* impulses can now be external

* feat: 🌐 Update French Language

* Create Themes and Plugins folder if it doesnt't exist

Fixes #742

* Make cast device list scrollable

* Removal of Natural (High)

* i18n changes

* I'm an idiot

* fix queue menu

* CAR mode selector ext

* I forgor

Co-authored-by: Mefsaal <mefsaal@gmail.com>
Co-authored-by: Gabriel Davila <56521591+mefsaal@users.noreply.github.com>
Co-authored-by: maikirakiwi <stella@mai.kiwi>
Co-authored-by: Core <64542347+coredev-uk@users.noreply.github.com>
Co-authored-by: Amaru8 <52407090+Amaru8@users.noreply.github.com>
Co-authored-by: Pedro Galhardo <pedromgalhardo@tecnico.ulisboa.pt>
Co-authored-by: booploops <49113086+booploops@users.noreply.github.com>
Co-authored-by: GamingLiamStudios <58615717+GamingLiamStudios@users.noreply.github.com>
Co-authored-by: 宥叡 <46503943+jay900604@users.noreply.github.com>
Co-authored-by: UnbreakCode <unbreakcode@gmail.com>
Co-authored-by: Erwan <24718500+ErwanGit@users.noreply.github.com>
Co-authored-by: Erwan <erwan977@gmail.com>
Co-authored-by: licia-tia <licia@s-cry.com>
Co-authored-by: vapormusic <vietanhfat@gmail.com>
This commit is contained in:
cryptofyre 2022-05-14 00:00:40 -05:00 committed by GitHub
parent 76320d435b
commit d376faafbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
91 changed files with 2178 additions and 2140 deletions

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(-0.13004,0,0,0.13004,130.354,-21.1046)">
<g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1181.95,-435.575)">
<path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
</g>
<g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1281.96,-435.575)">
<path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.13004,0,0,0.13004,-96.3538,-21.1046)">
<g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1181.95,-435.575)">
<path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
</g>
<g transform="matrix(7.11542e-17,1.16204,-1.00804,6.1725e-17,1281.96,-435.575)">
<path d="M620.408,312.185C621.766,309.468 624.28,307.794 627,307.794C629.72,307.794 632.234,309.468 633.592,312.185C643.701,332.402 662.969,370.939 673.563,392.126C675.098,395.195 675.096,398.975 673.558,402.043C672.021,405.111 669.181,407 666.107,407C645.499,407 608.501,407 587.893,407C584.819,407 581.979,405.111 580.442,402.043C578.904,398.975 578.902,395.195 580.437,392.126C591.031,370.939 610.299,332.402 620.408,312.185Z" style="fill:white;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.136376,0,0,0.136376,-36.3229,-24.4659)">
<path d="M381,245.272C381,239.496 376.31,234.806 370.534,234.806L349.603,234.806C343.826,234.806 339.137,239.496 339.137,245.272L339.137,362.84C339.137,368.616 343.826,373.306 349.603,373.306L370.534,373.306C376.31,373.306 381,368.616 381,362.84L381,245.272Z" style="fill:white;"/>
<g transform="matrix(1,0,0,1,61.8631,0)">
<path d="M381,245.272C381,239.496 376.31,234.806 370.534,234.806L349.603,234.806C343.826,234.806 339.137,239.496 339.137,245.272L339.137,362.84C339.137,368.616 343.826,373.306 349.603,373.306L370.534,373.306C376.31,373.306 381,368.616 381,362.84L381,245.272Z" style="fill:white;"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.19618e-17,0.195351,-0.169464,1.03767e-17,78.491,-105.485)">
<path d="M621.069,310.862C622.291,308.417 624.553,306.911 627,306.911C629.447,306.911 631.709,308.417 632.931,310.862C643.071,331.141 663.672,372.343 674.309,393.619C675.69,396.38 675.688,399.781 674.305,402.541C672.922,405.3 670.367,407 667.602,407C646.846,407 607.154,407 586.398,407C583.633,407 581.078,405.3 579.695,402.541C578.312,399.781 578.31,396.38 579.691,393.619C590.328,372.343 610.929,331.141 621.069,310.862Z" style="fill:white;"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1,000 B

File diff suppressed because it is too large Load diff

View file

@ -1579,19 +1579,27 @@ input[type=checkbox][switch]:checked:active::before {
}
.playback-button.pause {
background-image: url('./assets/pause.svg');
background-image: url('./assets/cider-icons/pause.svg');
background-size: 38px;
background-position: center;
}
.playback-button.play {
background-image: url('./assets/play.svg');
background-image: url('./assets/cider-icons/play.svg');
background-size: 38px;
background-position: center;
}
.playback-button.next {
background-image: url('./assets/forward.svg');
background-image: url('./assets/cider-icons/forward.svg');
background-size: 60%;
background-position: center;
}
.playback-button.previous {
background-image: url('./assets/backward.svg');
background-image: url('./assets/cider-icons/backward.svg');
background-size: 60%;
background-position: center;
}
.playback-button {

View file

@ -784,8 +784,8 @@ const app = new Vue({
MusicKit.getInstance().videoContainerElement = document.getElementById("apple-music-video-player")
ipcRenderer.on('theme-update', (event, arg) => {
less.refresh(true, true, true)
ipcRenderer.on('theme-update', async (event, arg) => {
await less.refresh(true, true, true)
self.setTheme(self.cfg.visual.theme, true)
if (app.cfg.visual.styles.length != 0) {
app.reloadStyles()
@ -828,8 +828,9 @@ const app = new Vue({
}
});
this.mk.addEventListener(MusicKit.Events.playbackStateDidChange, () => {
this.mk.addEventListener(MusicKit.Events.playbackStateDidChange, (event) => {
ipcRenderer.send('wsapi-updatePlaybackState', wsapi.getAttributes());
document.body.setAttribute("playback-state", event.state == 2 ? "playing" : "paused")
})
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
@ -887,8 +888,10 @@ const app = new Vue({
if (type.includes("musicVideo") || type.includes("uploadedVideo") || type.includes("music-movie")) {
document.getElementById("apple-music-video-container").style.display = "block";
document.body.setAttribute("video-playing", "true")
// app.chrome.topChromeVisible = false
} else {
document.body.removeAttribute("video-playing")
document.getElementById("apple-music-video-container").style.display = "none";
// app.chrome.topChromeVisible = true
}
@ -988,7 +991,7 @@ const app = new Vue({
document.querySelectorAll(`[id*='less']`).forEach(el => {
el.remove()
});
less.refresh()
await less.refresh()
}
},
async reloadStyles() {
@ -1016,7 +1019,7 @@ const app = new Vue({
}
})
less.registerStylesheetsImmediately()
less.refresh(true, true, true)
await less.refresh(true, true, true)
this.$forceUpdate()
return
},
@ -3869,12 +3872,14 @@ const app = new Vue({
el.play()
})
document.querySelector("body").classList.remove("stopanimation")
document.body.setAttribute("focus-state", "focused")
this.animateBackground = true
} else {
document.querySelectorAll(".animated-artwork-video").forEach(el => {
el.pause()
})
document.querySelector("body").classList.add("stopanimation")
document.body.setAttribute("focus-state", "blurred")
this.animateBackground = false
}
},

View file

@ -13192,3 +13192,18 @@ body[platform="linux"] #window-controls-container {
#app.twopanel .collection-page .top-fab {
bottom: 96px;
}
.keybinds-page .md-option-header {
padding: 0px 0px;
border-bottom: unset;
border-top: unset;
font-weight: 600;
background: rgba(255, 255, 255, 0);
font-size: 2em;
}
.content-inner.keybinds-page {
top: var(--navigationBarHeight);
padding: 15px;
}

View file

@ -417,7 +417,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
position: absolute;
right: 16px;
top: 3%;
background: #1c1c1c8f;
background: var(--color2);
border-radius: 12px;
z-index: 10;
height: 94%;
@ -875,17 +875,17 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
border-radius: 10px;
left: 0px;
background: var(--keyColor);
animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1);
// animation: expandIndicator .2s cubic-bezier(0.25, 1, 0.5, 1);
@keyframes expandIndicator {
0% {
transform: scaleY(0);
}
// @keyframes expandIndicator {
// 0% {
// transform: scaleY(0);
// }
100% {
transform: scaleY(1);
}
}
// 100% {
// transform: scaleY(1);
// }
// }
}
.app-chrome {
@ -2885,38 +2885,40 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.wpfade_transform-enter-active,
.wpfade_transform-leave-active {
--transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
will-change: opacity, transform;
--transitionTime: 0.2s;
transition : opacity var(--transitionTime) var(--appleEase);
will-change : opacity, transform;
}
.wpfade_transform-enter {
opacity: 0;
transform: translateX(50%) translate3d(0,0,0);
will-change: opacity, transform;
opacity : 0;
transform : unset;
will-change: opacity;
}
.wpfade_transform-leave-to {
opacity: 0;
transform: translateX(-50%) translate3d(0,0,0);
will-change: opacity, transform;
opacity : 0;
transform : unset;
will-change: opacity;
}
.wpfade_transform_backwards-enter-active,
.wpfade_transform_backwards-leave-active {
--transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
--transitionTime: 0.2s;
transition : opacity var(--transitionTime) var(--appleEase);
}
.wpfade_transform_backwards-enter {
opacity: 0;
transform: translateX(-50%) translate3d(0,0,0);
will-change: opacity, transform;
opacity : 0;
transform : unset;
will-change: opacity;
}
.wpfade_transform_backwards-leave-to {
opacity: 0;
transform: translateX(50%) translate3d(0,0,0);
will-change: opacity, transform;
opacity : 0;
transform : unset;
will-change: opacity;
}
.fabfade-enter-active,
@ -2944,12 +2946,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.drawertransition-enter-active,
.drawertransition-leave-active {
transition: right .25s var(--appleEase);
transition: transform .25s var(--appleEase);
}
.drawertransition-enter,
.drawertransition-leave-to {
right: -300px;
transform: translateX(400px);
}
@media (prefers-color-scheme: dark) {
@ -3111,6 +3113,27 @@ body.no-gpu {
}
}
.floating-header {
background: black;
backdrop-filter: unset;
}
.artworkContainer {
animation: unset!important;
opacity: 0.7;
}
.info-rect-card {
&:before {
display: none;
}
}
.menu-panel .menu-panel-body {
background: rgb(30 30 30);
backdrop-filter: unset;
}
#navigation-bar {
backdrop-filter: unset;
mix-blend-mode: unset;
@ -3342,6 +3365,20 @@ body[platform='darwin'] {
display: none;
}
.keybinds-page .md-option-header {
padding: 0px 0px;
border-bottom: unset;
border-top: unset;
font-weight: 600;
background: rgba(255, 255, 255, 0);
font-size: 2em;
}
.content-inner.keybinds-page {
top: var(--navigationBarHeight);
padding: 15px;
}
@import url("less/macos.less");
@import url("less/linux.less");
@import url("less/compact.less");

View file

@ -86,4 +86,40 @@
&:active {
}
}
.wpfade_transform-enter-active,
.wpfade_transform-leave-active {
--transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
will-change: opacity, transform;
}
.wpfade_transform-enter {
opacity: 0;
transform: translateX(50%) translate3d(0,0,0);
will-change: opacity, transform;
}
.wpfade_transform-leave-to {
opacity: 0;
transform: translateX(-50%) translate3d(0,0,0);
will-change: opacity, transform;
}
.wpfade_transform_backwards-enter-active,
.wpfade_transform_backwards-leave-active {
--transitionTime: 0.2s;
transition: opacity var(--transitionTime) var(--appleEase), transform var(--transitionTime) var(--appleEase);
}
.wpfade_transform_backwards-enter {
opacity: 0;
transform: translateX(-50%) translate3d(0,0,0);
will-change: opacity, transform;
}
.wpfade_transform_backwards-leave-to {
opacity: 0;
transform: translateX(50%) translate3d(0,0,0);
will-change: opacity, transform;
}

View file

@ -46,6 +46,11 @@
</template>
</transition>
<!-- Library - Artists-->
<!-- Keybinds -->
<transition name="wpfade">
<template v-if="page == 'keybinds-settings'">
<keybinds-settings></keybinds-settings>
</template>
</transition>
</div>

View file

@ -39,7 +39,8 @@
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
@ -55,27 +56,36 @@
<div class="app-chrome-playback-controls">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></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>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-playback-duration">
@ -98,7 +108,9 @@
<div class="app-chrome--right">
<div class="app-chrome-item volume">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
: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()">

View file

@ -14,17 +14,20 @@
<button class="app-mainmenu"
@blur="mainMenuVisibility(false)"
@click="mainMenuVisibility(true)"
:class="{active: chrome.menuOpened}"></button>
:class="{active: chrome.menuOpened}"
:aria-label="$root.getLz('term.quickNav')"></button>
</div>
<template v-if="getThemeDirective('appNavigation') != 'seperate'">
<div class="vdiv display--large" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateBack()">
<button class="playback-button navigation" @click="navigateBack()"
:title="$root.getLz('term.navigateBack')" v-b-tooltip.hover>
<%- include('../svg/chevron-left.svg') %>
</button>
</div>
<div class="app-chrome-item">
<button class="playback-button navigation" @click="navigateForward()">
<button class="playback-button navigation" @click="navigateForward()"
:title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
@ -33,27 +36,36 @@
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item display--large">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></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>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item display--large">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</template>
</div>
@ -113,7 +125,8 @@
</div>
<template v-if="mk.nowPlayingItem['attributes']['playParams']">
<div class="actions">
<button class="lcdMenu" @click="nowPlayingContextMenu">
<button class="lcdMenu" @click="nowPlayingContextMenu"
:title="$root.getLz('term.more')" v-b-tooltip.hover>
<div class="svg-icon"></div>
</button>
</div>
@ -131,7 +144,9 @@
<template v-if="getThemeDirective('windowLayout') != 'twopanel'">
<div class="app-chrome-item volume display--large">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
: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()">

View file

@ -43,7 +43,7 @@
</sidebar-library-item>
</template>
<div class="app-sidebar-header-text"
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.library = !cfg.general.sidebarCollapsed.library"
:class="{collapsed: cfg.general.sidebarCollapsed.library}">
{{$root.getLz('term.library')}}
@ -65,7 +65,7 @@
</template>
<template v-if="getPlaylistFolderChildren('p.applemusic').length != 0">
<div class="app-sidebar-header-text"
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.amplaylists = !cfg.general.sidebarCollapsed.amplaylists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.amplaylists}">
@ -76,7 +76,7 @@
</sidebar-playlist>
</template>
</template>
<div class="app-sidebar-header-text"
<div class="app-sidebar-header-text"
@click="cfg.general.sidebarCollapsed.playlists = !cfg.general.sidebarCollapsed.playlists"
@contextmenu="playlistHeaderContextMenu"
:class="{collapsed: cfg.general.sidebarCollapsed.playlists}">
@ -187,32 +187,44 @@
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
@click="mk.shuffleMode = 1"></button>
<button class="playback-button--small shuffle active" v-else @click="mk.shuffleMode = 0"></button>
@click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover.righttop></button>
<button class="playback-button--small shuffle active" v-else
@click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover.righttop></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="prevButton()"></button>
<button class="playback-button previous" @click="prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
<button class="playback-button play" @click="mk.play()" v-else></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>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="skipToNextItem()"></button>
<button class="playback-button next" @click="skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
@click="mk.repeatMode = 1"></button>
@click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
v-else-if="mk.repeatMode == 1"></button>
v-else-if="mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
v-else-if="mk.repeatMode == 2"></button>
v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-item volume">
<div class="input-container">
<button class="volume-button--small volume" @click="muteButtonPressed()"
:class="{'active': this.cfg.audio.volume == 0}"></button>
: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" class="" @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

View file

@ -3,7 +3,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@ -25,7 +25,7 @@
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</div>

View file

@ -3,7 +3,7 @@
<div class="modal-window airplay-modal">
<div class="modal-header">
<div class="modal-title">{{'Enter password'}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
<input type="text" v-model="passcode"/>

View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioControls')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<div class="md-option-line">

View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('settings.option.audio.changePlaybackRate')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<div class="md-option-line">

View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('term.audioSettings')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@ -12,11 +12,6 @@
<div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('term.equalizer')}}</div>
</button>
<button class="playlist-item"
@click="openSpatialAudio()" style="width:100%;">
<div class="icon"><%- include("../svg/speaker.svg") %></div>
<div class="name">{{app.getLz('settings.option.audio.enableAdvancedFunctionality.audioSpatialization')}}</div>
</button>
<button class="playlist-item"
@click="openAudioControls()" style="width:100%;">
<div class="icon"><%- include("../svg/speaker.svg") %></div>
@ -53,14 +48,6 @@
app.modals.equalizer = true
app.modals.audioSettings = false
},
openSpatialAudio() {
if (app.cfg.audio.spatial === true && app.cfg.audio.maikiwiAudio.spatial === false) {
app.modals.spatialProperties = true
app.modals.audioSettings = false
} else {
notyf.error(app.getLz('spatial.notTurnedOn'))
}
},
openAudioControls() {
app.modals.audioControls = true
app.modals.audioSettings = false

View file

@ -3,11 +3,11 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{$root.getLz('action.cast.todevices')}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content" style="overflow-y: overlay; padding: 3%">
<div class="md-labeltext">{{$root.getLz('action.cast.chromecast')}}</div>
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;">
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
<template v-if="!scanning">
<template v-for="(device) in devices.cast">
<div class="md-option-line" style="cursor: pointer" @click="setCast(device)">
@ -34,7 +34,7 @@
</template>
</div>
<div class="md-labeltext" >{{$root.getLz('action.cast.airplay')}}</div>
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;">
<div class="md-option-container" style="margin-top: 12px;margin-bottom: 12px;overflow-y: scroll;">
<div class="md-option-line">
<div class="md-option-segment">
{{'EXPERIMENTAL!!! Supports Homepods / Apple TVs / Shairport for now, AirPlay on Samsung/LG/Sony devices will be added later'}}
@ -111,11 +111,11 @@
},
setCast(device) {
CiderAudio.sendAudio();
this.activeCasts.push(device);
this.activeCasts.push(device);
ipcRenderer.send('performGCCast', device, "Cider", "Playing ...", "Test build", '');
},
setAirPlayCast(device) {
this.activeCasts.push(device);
this.activeCasts.push(device);
ipcRenderer.send("performAirplayPCM",device.host,device.port,null,"","","","",device.txt)
},
stopCasting() {

View file

@ -4,10 +4,10 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToLibrary')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
<button class="playlist-item"
:class="{ focused: playlist.id == focused }"
@click="addToPlaylist(playlist.id)" style="width:100%;" v-for="playlist in playlistSorted" v-if="playlist.attributes.canEdit && playlist.type != 'library-playlist-folders'">
<div class="icon"><%- include("../svg/playlist.svg") %></div>
@ -25,7 +25,7 @@
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</div>

View file

@ -3,7 +3,7 @@
<div class="modal-window" >
<div class="modal-header">
<div class="modal-title">{{$root.getLz('term.equalizer')}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:220px;text-align:center;margin-right:245px" v-model="$root.cfg.audio.equalizer.preset" v-on:change="changePreset($root.cfg.audio.equalizer.preset)">
<optgroup :label="$root.getLz('term.userPresets')">
@ -50,7 +50,7 @@
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
<input tabindex="0" type="range" class="eq-slider" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[2]" @change="changeGain(2)">
<input type="number" class="eq-freq" orient="vertical" min="88" max="177" step="8" v-model="$root.cfg.audio.equalizer.frequencies[2]" @change="changeFreq(2)">
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[2]" @change="changeQ(2)">
</div>
<div class="input-container">
<input tabindex="0" type="number" class="eq-freq" orient="vertical" min="-12" max="12" step="0.1" v-model="$root.cfg.audio.equalizer.gain[3]" @change="changeGain(3)">
@ -95,8 +95,8 @@
<input type="number" class="eq-q" orient="vertical" min="0" max="5" step="0.1" v-model="$root.cfg.audio.equalizer.Q[9]" @change="changeQ(9)">
</div>
</div>
</div>
</div>
<div class="modal-lowercontent">
<div class="row">
<div class="col">

View file

@ -51,39 +51,49 @@
:max="app.mk.currentPlaybackDuration" :value="app.getSongProgress()">
</div>
</div>
<div class="control-buttons">
<div class="control-buttons">
<div class="app-chrome-item">
<button class="playback-button--small shuffle" v-if="app.mk.shuffleMode == 0"
@click="app.mk.shuffleMode = 1"></button>
@click="app.mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')"
v-b-tooltip.hover></button>
<button class="playback-button--small shuffle active" v-else
@click="app.mk.shuffleMode = 0"></button>
@click="app.mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')"
v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button previous" @click="app.prevButton()"></button>
<button class="playback-button previous" @click="app.prevButton()"
:title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"></button>
<button class="playback-button play" @click="app.mk.play()" v-else></button>
<button class="playback-button pause" @click="app.mk.pause()" v-if="app.mk.isPlaying"
:title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
<button class="playback-button play" @click="app.mk.play()" v-else
:title="$root.getLz('term.play')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button next" @click="app.skipToNextItem()"></button>
<button class="playback-button next" @click="app.skipToNextItem()"
:title="$root.getLz('term.next')" v-b-tooltip.hover></button>
</div>
<div class="app-chrome-item">
<button class="playback-button--small repeat" v-if="app.mk.repeatMode == 0"
@click="app.mk.repeatMode = 1"></button>
@click="app.mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat repeatOne" @click="app.mk.repeatMode = 2"
v-else-if="app.mk.repeatMode == 1"></button>
v-else-if="app.mk.repeatMode == 1" :title="$root.getLz('term.disableRepeatOne')"
v-b-tooltip.hover></button>
<button class="playback-button--small repeat active" @click="app.mk.repeatMode = 0"
v-else-if="app.mk.repeatMode == 2"></button>
v-else-if="app.mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
v-b-tooltip.hover></button>
</div>
</div>
<div class="app-chrome-item volume display--large">
<div class="input-container">
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"></button>
<button class="volume-button--small volume" @click="app.muteButtonPressed()" :class="{'active': app.cfg.audio.volume == 0}"
:title="app.cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
<input type="range" class="slider" @wheel="app.volumeWheel" :step="app.cfg.audio.volumeStep" min="0" :max="app.cfg.audio.maxVolume" v-model="app.mk.volume"
v-if="typeof app.mk.volume != 'undefined'" @change="app.checkMuteChange()"
v-b-tooltip.hover :title="$root.formatVolumeTooltip()">
</div>
</div>
</div>
</div>
</template>
@ -99,17 +109,17 @@
<lyrics-view :yoffset="120" :time="time" :lyrics="lyrics"
:richlyrics="richlyrics"></lyrics-view>
</div>
<div class="queue-col" v-if="tabMode == 'queue'">
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
<div class="queue-col" v-if="tabMode == 'queue'">
<cider-queue v-if="tabMode == 'queue'" ref="queue" ></cider-queue>
</div>
</div>
</div>
<div class="tab-toggles">
<div class="lyrics" :class="{active: tabMode == 'lyrics'}" @click="tabMode = (tabMode == 'lyrics') ? '' : 'lyrics'"></div>
<div class="queue" :class="{active: tabMode == 'queue'}" @click="tabMode = (tabMode == 'queue') ? '' :'queue'"></div>
</div>
</div>
</div>
</script>

View file

@ -18,7 +18,7 @@
</button>
</div>
<transition name="fabfade">
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
<button class="top-fab" v-show="showFab" @click="scrollToTop()" :aria-label="app.getLz('action.scrollToTop')">
<%- include("../svg/arrow-up.svg") %>
</button>
</transition>

View file

@ -20,10 +20,10 @@
<div class="popular" v-if="!showInLibrary && item?.meta?.popularity != null && item?.meta?.popularity > 0.7"></div>
<div class="isLibrary" v-if="showLibraryStatus == true">
<div v-if="showInLibrary" :style="{display: (showInLibrary ? 'block' : 'none'), 'margin-left':'11px'}">
<button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))">
<button @click="addToLibrary()" v-if="!addedToLibrary && (showIndex == false ||(showIndex == true && showIndexPlaylist != false))" :aria-label="$root.getLz('action.addToLibrary')">
<div class="svg-icon addIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/plus.svg)'}"></div>
</button>
<button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()">
<button v-else-if='!(showArtwork == true && (showIndex == false ||(showIndex == true && showIndexPlaylist != false)))' @click="playTrack()" :aria-label="$root.getLz('term.play')">
<div class="svg-icon playIcon" :style="{'--color': 'var(--keyColor)', '--url': 'url(./assets/feather/play.svg)'}"></div>
</button>
</div>
@ -42,7 +42,9 @@
:size="48"
:bgcolor="getBgColor()"
:type="item.type"></mediaitem-artwork>
<button class="overlay-play" @click="playTrack()"><%- include("../svg/play.svg") %></button>
<button class="overlay-play" @click="playTrack()" :aria-label="$root.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
</div>
<div class="info-rect" :style="{'padding-left': (showArtwork ? '' : '16px')}"
@dblclick="route()">
@ -126,7 +128,7 @@
} else {
this.itemId = this.item.id;
}
if (this.item.attributes.playParams) {
if (this.item.attributes.playParams && this.$root.cfg.general.showLovedTracksInline) {
this.getHeartStatus();
}
let duration = this.item.attributes.durationInMillis ?? 0

View file

@ -8,7 +8,7 @@
<div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
<div style="{'--spcolor': getBgColor()}"
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
<template>
<template>
<div class="artwork-container">
<div class="unavailable-overlay" v-if="unavailable">
<div class="codicon codicon-circle-slash"></div>
@ -24,9 +24,13 @@
:type="item.type"></mediaitem-artwork>
</div>
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
@click="getContextMenu"><%- include("../svg/more.svg") %></button>
@click="getContextMenu" :aria-label="$root.getLz('term.more')">
<%- include("../svg/more.svg") %>
</button>
<button class="play-btn" v-if="!noplay.includes(item.type)"
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
@click="app.playMediaItem(item)" :aria-label="$root.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
<div class="badge-container" v-if="itemBadges.length != 0">
<div class="socialBadge" v-for="badge in itemBadges.limit(1)">
<mediaitem-artwork
@ -39,7 +43,7 @@
<div class="title" :title="item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? '')" v-if="item.attributes.artistNames == null || kind!= 'card'" @click='app.routeView(item)'>
<div class="item-navigate text-overflow-elipsis">{{ item.attributes?.name ?? (item.relationships?.contents?.data[0]?.attributes?.name ?? '') }}</div>
<div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'" style= "background-image: url(./assets/explicit.svg);height: 12px;width: 12px;filter: contrast(0);background-repeat: no-repeat;margin-top: 2.63px;margin-left: 4px;"></div>
</div>
</div>
<div :title="getSubtitle()" class="subtitle item-navigate text-overflow-elipsis" @click="getSubtitleNavigation()"
v-if="getSubtitle() != ''">
{{ getSubtitle() }}
@ -242,9 +246,9 @@
let type = []
try{
type = this.item.type
}catch(e) {console.log('sd',this.item)}
if (this.kind != "") {
type = this.kind
}
@ -252,7 +256,7 @@
default:
return []
break;
case "editorial-elements":
case "editorial-elements":
case "card":
return ["mediaitem-card"]
break;
@ -265,7 +269,7 @@
case "music-videos":
case "uploadedVideo":
case "uploaded-videos":
case "library-music-videos":
case "library-music-videos":
return "mediaitem-video";
break;
}

View file

@ -4,12 +4,12 @@
<div class="modal-header">
<div class="modal-title">{{data.title}}</div>
<div class="modal-subtitle modal-title">{{data.subtitle ?? ""}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<div class="content" v-html="data.content">
</div>
</div>
</div>
</div>
</div>
</script>
@ -31,7 +31,7 @@
self.timedelay = true
}, 1000);
})
},
methods: {
close() {

View file

@ -3,7 +3,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{$root.getLz('term.pluginMenu')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<span class="playlist-item" v-if="!app.pluginInstalled">

View file

@ -3,11 +3,11 @@
<div class="modal-window" >
<div class="modal-header">
<div class="modal-title">{{`Web Remote QR : ` + url }}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<img class="qrimg" :src="src"/>
</div>
<img class="qrimg" :src="src"/>
</div>
</div>
</div>
</script>
@ -18,12 +18,12 @@
data: function () {
return {
app: this.$root,
}
},
props: ["src","url"],
mounted() {
},
methods: {
close() {

View file

@ -5,7 +5,11 @@
<h3 class="queue-header-text">{{app.getLz('term.queue')}}</h3>
</div>
<div class="col-auto flex-center">
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}" @click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"> <img class="infinity"></button>
<button class="autoplay" :style="{'background': app.mk.autoplayEnabled ? 'var(--keyColor)' : ''}"
@click="app.mk.autoplayEnabled = !app.mk.autoplayEnabled"
:title="app.getLz('term.autoplay')" v-b-tooltip.hover>
<img class="infinity">
</button>
</div>
</div>
<div class="queue-body" v-if="page == 'history'">
@ -17,7 +21,7 @@
<div class="cd-queue-item"
:class="{selected: selectedItems.includes(position)}"
@click="select($event, position)"
@dblclick="playQueueItem(position)" :key="position"
@dblclick="playQueueItem(queueItem.item.id)" :key="position"
@contextmenu="selected = position;queueContext($event, queueItem.item, position)">
<div class="row">
<div class="col-auto flex-center">
@ -146,8 +150,8 @@
}
app.showMenuPanel(menus[useMenu], event);
},
playQueueItem(index) {
app.mk.changeToMediaAtIndex(index)
playQueueItem(id) {
app.mk.changeToMediaAtIndex(app.mk.queue._itemIDs.indexOf(id))
},
updateQueue() {
this.selected = -1

View file

@ -4,7 +4,7 @@
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
<button class="close-btn" @click="app.resetState()" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@ -26,7 +26,7 @@
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</div>

View file

@ -3,7 +3,7 @@
<div class="modal-window" v-if="ready">
<div class="modal-header">
<div class="modal-title">{{$root.getLz('spatial.spatialProperties')}}</div>
<button class="close-btn" @click="close()"></button>
<button class="close-btn" @click="close()" :aria-label="$root.getLz('action.close')"></button>
</div>
<div class="modal-content">
<template v-if="roomEditType == 'dimensions'">
@ -15,7 +15,7 @@
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-3 flex-center">
{{$root.getLz('spatial.width')}}
@ -29,7 +29,7 @@
v-model="room_dimensions.width" step="1"/>
</div>
</div>
<div class="row">
<div class="col-3 flex-center">
{{$root.getLz('spatial.height')}}
@ -43,7 +43,7 @@
v-model="room_dimensions.height" step="1"/>
</div>
</div>
<div class="row">
<div class="col-3 flex-center">
{{$root.getLz('spatial.depth')}}
@ -80,7 +80,7 @@
</div>
<div class="row">
<div class="col">
<div class="row">
<div class="col-3 flex-center">
X ({{$root.getLz('spatial.listener')}})

View file

@ -65,7 +65,7 @@
<div id="LOADER">
<%- include("../assets/cider-round.svg") %>
</div>
<div id="app" :class="getAppClasses()">
<div id="app" :class="getAppClasses()" :window-style="cfg.visual.directives.windowLayout">
<transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<%- include('app/chrome-top'); %>

View file

@ -16,7 +16,7 @@
size="190" type="artists"></mediaitem-artwork>
<button class="overlay-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})">
})" :aria-label="app.getLz('term.play')">
<%- include("../svg/play.svg") %>
</button>
</div>
@ -26,11 +26,11 @@
>
<button class="artist-play" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
<h1>{{ data.attributes.name }}</h1>
</div>
</div>
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;">
<button class="more-btn-round" @click="artistMenu" style="pointer-events: all;" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -43,13 +43,13 @@
<div class="col-auto flex-center">
<button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
app.mk.play()
})"><%- include("../svg/play.svg") %></button>
})" :aria-label="app.getLz('term.play')"><%- include("../svg/play.svg") %></button>
</div>
<div class="col">
<h3>{{ data.attributes.name }}</h3>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" @click="artistMenu">
<button class="more-btn-round" @click="artistMenu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -79,10 +79,10 @@
<div class="mediaitem-list-item__grid">
<listitem-horizontal :items="data.views['top-songs'].data.limit(20)">
</listitem-horizontal>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row well">
@ -112,7 +112,7 @@
</template>
<div class="row">
<div class="col" v-if="data.attributes.artistBio">
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3>
<h3>{{ $root.stringTemplateParser($root.getLz('term.aboutArtist'), {"artistName": data.attributes.name}) }}</h3>
<p v-html="data.attributes.artistBio"></p>
</div>
<div class="col">

View file

@ -45,62 +45,53 @@
</select>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
<div class="md-option-segment">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmth')}}
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer')}} [1]
<br>
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmth.description')}}</small>
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.analogWarmth"
<input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.atmosphereRealizer1"
v-on:change="CiderAudio.hierarchical_loading();" switch/>
</div>
</div>
<div class="md-option-line"
v-show="app.cfg.advanced.AudioContext === true && app.cfg.audio.maikiwiAudio.analogWarmth === true">
<div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true">
<div class="md-option-segment">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity')}}
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}} [1]
<br>
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.description')}}</small>
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;"
v-model="app.cfg.audio.maikiwiAudio.analogWarmth_value"
v-on:change="ChangeanalogWarmth()">
<option value="SMOOTH">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.smooth')}}
</option>
<option value="WARM">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.warm')}}
</option>
<select class="md-select" style="width:230px;"
v-model="$root.cfg.audio.maikiwiAudio.atmosphereRealizer1_value"
v-on:change="CiderAudio.hierarchical_loading();">
<option v-for="profile in arprofiles" :value="profile.id">{{ getProfileLz("CAR", profile.id) }}</option>
</select>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext === true">
<div class="md-option-segment">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer')}}
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer')}} [2]
<br>
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizer.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.atmosphereRealizer"
<input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.atmosphereRealizer2"
v-on:change="CiderAudio.hierarchical_loading();" switch/>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.atmosphereRealizer === true">
<div class="md-option-line" v-show="app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true">
<div class="md-option-segment">
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}}
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}} [2]
<br>
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<select class="md-select" style="width:180px;"
v-model="app.cfg.audio.maikiwiAudio.atmosphereRealizer_value"
v-on:change="CiderAudio.hierarchical_loading()">
<option value="NATURAL_STANDARD">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural1')}}</option>
<option value="NATURAL_HIGH">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural2')}}</option>
<option value="NATURAL_PLUS">{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.natural3')}}</option>
<option value="CRYPTO">Cryptofyre</option>
<select class="md-select" style="width:230px;"
v-model="$root.cfg.audio.maikiwiAudio.atmosphereRealizer2_value"
v-on:change="CiderAudio.hierarchical_loading();">
<option v-for="profile in arprofiles" :value="profile.id">{{ getProfileLz("CAR", profile.id) }}</option>
</select>
</div>
</div>
@ -126,7 +117,7 @@
<select class="md-select" style="width:180px;"
v-model="$root.cfg.audio.maikiwiAudio.spatialProfile"
v-on:change="toggleMaikiwiSpatial">
<option v-for="profile in spprofiles" :value="profile.id">{{ profile.name }}</option>
<option v-for="profile in spprofiles" :value="profile.id">{{ getProfileLz("CTS", profile.name) }}</option>
</select>
</div>
</div>
@ -187,6 +178,7 @@
data: function () {
return {
app: this.$root,
arprofiles: CiderAudio.atmosphereRealizerProfiles,
spprofiles: CiderAudio.spatialProfiles
}
},
@ -194,6 +186,27 @@
},
methods: {
getProfileLz(type, name) {
switch (name) {
case "CRYPTO":
return "Cryptofyre";
break;
case "Maikiwi":
return "Maikiwi";
break;
}
switch (type) {
case "CAR":
return this.$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode.' + name);
break;
case "CTS":
return this.$root.getLz('settings.option.audio.enableAdvancedFunctionality.tunedAudioSpatialization.profile.' + name.toLowerCase());
break;
default:
return name;
}
},
profileNext() {
var next = this.spprofiles.find(function (profile) {
return profile.id === this.$root.cfg.audio.maikiwiAudio.spatialProfile;
@ -249,32 +262,6 @@
CiderAudio.hierarchical_loading();
}
},
ChangeanalogWarmth: function () {
let WARMTH_GAIN = [-4.81, 0.74, 0.55, -0.84, -1.52, 0.84, 0.66, -0.29, 0.29, 0.94, 1.67, 1.62, -0.53, -0.81, -4.98, 1.43, 0.86, 1.13, -1.06, -0.95, -1.13, 1.78, -3.86];
switch (app.cfg.audio.maikiwiAudio.analogWarmth_value) {
case "SMOOTH":
for (let i = 0; i < 23; i++) {
CiderAudio.audioNodes.analogWarmth[i].gain.value = WARMTH_GAIN[i] * 1.25;
}
CiderAudio.intelliGainComp_h0_0();
break;
case "WARM":
for (let i = 0; i < 23; i++) {
CiderAudio.audioNodes.analogWarmth[i].gain.value = WARMTH_GAIN[i] * 1.75;
}
CiderAudio.intelliGainComp_h0_0();
break;
default:
app.cfg.audio.maikiwiAudio.analogWarmth_value = "SMOOTH";
for (let i = 0; i < 23; i++) {
CiderAudio.audioNodes.analogWarmth[i].gain.value = WARMTH_GAIN[i] * 1.25;
}
CiderAudio.intelliGainComp_h0_0();
break;
}
},
}
})
</script>

View file

@ -94,7 +94,7 @@
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -145,7 +145,7 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>

View file

@ -18,7 +18,7 @@
</button>
</div>
<transition name="fabfade">
<button class="top-fab" v-show="showFab" @click="scrollToTop()">
<button class="top-fab" v-show="showFab" @click="scrollToTop()" :aria-label="app.getLz('action.scrollToTop')">
<%- include("../svg/arrow-up.svg") %>
</button>
</transition>

View file

@ -0,0 +1,267 @@
<script type="text/x-template" id="keybinds-settings">
<div class="content-inner keybinds-page">
<div class="md-option-header">
<span>{{$root.getLz('settings.option.general.keybindings')}}</span>
</div>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.search')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('search')">
{{app.cfg.general.keybindings.search.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.listnow')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('listnow')">
{{app.cfg.general.keybindings.listnow.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.browse')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('browse')">
{{app.cfg.general.keybindings.browse.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.recentAdd')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('recentAdd')">
{{app.cfg.general.keybindings.recentAdd.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.songs')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('songs')">
{{app.cfg.general.keybindings.songs.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.albums')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('albums')">
{{app.cfg.general.keybindings.albums.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.artists')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('artists')">
{{app.cfg.general.keybindings.artists.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.private')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('togglePrivateSession')">
{{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.remote')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('webRemote')">
{{app.cfg.general.keybindings.webRemote.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.audio')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('audioSettings')">
{{app.cfg.general.keybindings.audioSettings.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.plugins')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('pluginMenu')">
{{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.cast')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('castToDevices')">
{{app.cfg.general.keybindings.castToDevices.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.settings')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('settings')">
{{app.cfg.general.keybindings.settings.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.developer')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('openDeveloperTools')">
{{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
</button>
</div>
</div>
<button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
{{$root.getLz('term.reset')}}
</button>
</div>
</div>
</script>
<script>
Vue.component('keybinds-settings', {
template: "#keybinds-settings",
props: [],
methods: {
keyBindUpdate: function (action) {
const blur = document.createElement('div');
blur.className = 'blur';
blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
blur.style.position = 'fixed';
blur.style.top = '0';
blur.style.left = '0';
blur.style.width = '100%';
blur.style.height = '100%';
blur.style.zIndex = '9999';
blur.style.display = 'flex';
blur.style.alignItems = 'center';
blur.style.justifyContent = 'center';
blur.style.fontSize = '2em';
blur.style.color = 'white';
blur.innerHTML = `<center>${app.getLz('settings.option.general.keybindings.pressCombination')}<br />${app.getLz('settings.option.general.keybindings.pressEscape')}</center>`
document.body.appendChild(blur);
let keyBind = [];
const keyBindTimeout = setTimeout(function () {
keyBind = [];
document.body.removeChild(blur);
}, 30000);
const keyBindUpdate = function (e) {
if (document.body.contains(blur)) {
if (e.key == 'Escape') {
document.body.removeChild(blur);
clearTimeout(keyBindTimeout);
return;
} else {
if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
keyBind.push(e.key.toUpperCase());
} else {
keyBind.push(e.key);
}
if (keyBind.length === 2) {
if (keyBind[0] !== keyBind[1]) {
app.cfg.general.keybindings[action] = keyBind
document.body.removeChild(blur);
clearTimeout(keyBindTimeout);
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
if (ok) ipcRenderer.invoke("relaunchApp")
})
} else {
keyBind = [];
}
}
}
}
};
document.addEventListener('keydown', keyBindUpdate);
},
keyBindReset: function () {
app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "F"];
app.cfg.general.keybindings.listnow = [app.platform == "darwin" ? "Command" : "Control", "L"];
app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
app.cfg.general.keybindings.recentAdd = [app.platform == "darwin" ? "Command" : "Control", "G"];
app.cfg.general.keybindings.songs = [app.platform == "darwin" ? "Command" : "Control", "J"];
app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "S"];
app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Alt", "A"];
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Alt", "P"];
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Alt", "C"];
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Alt", "S"];
app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
if (ok) ipcRenderer.invoke("relaunchApp")
})
},
getLanguages: function () {
let langs = this.$root.lzListing
let categories = {
"main": [],
"fun": [],
"unsorted": []
}
// sort by category if category is undefined or empty put it in "unsorted"
for (let i = 0; i < langs.length; i++) {
if (langs[i].category === undefined || langs[i].category === "") {
categories.unsorted.push(langs[i])
} else {
categories[langs[i].category].push(langs[i])
}
}
// return
return categories
},
}
})
</script>

View file

@ -5,7 +5,8 @@
<h1 class="header-text">{{$root.getLz('term.albums')}}</h1>
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)"
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
@ -49,11 +50,11 @@
</div>
</div>
<div class="well">
<div class="albums-square-container">
<div>
<div class="albums-square-container">
<div>
<mediaitem-square v-if="prefs.viewAs == 'covers'" :size="'300'" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-square>
</div>
</div>
</div>
<mediaitem-list-item v-if="prefs.viewAs == 'list'" :show-duration="false" :show-meta-data="true" :show-library-status="false" :item="item" v-for="item in library.albums.displayListing">
</mediaitem-list-item>
@ -72,9 +73,9 @@
}
},
mounted() {
this.$root.getLibraryAlbumsFull(null, 1);
this.$root.getAlbumSort();
this.$root.searchLibraryAlbums(1);
this.$root.getLibraryAlbumsFull(null, 1);
this.$root.getAlbumSort();
this.$root.searchLibraryAlbums(1);
this.$root.getLibrarySongsFull() ;
this.$root.searchLibraryAlbums(1);
},

View file

@ -6,7 +6,7 @@
</div>
<div class="col-auto">
<button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
class="reload-btn"><%- include('../svg/redo.svg') %></button>
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
</div>
</div>
<div class="row">
@ -44,7 +44,7 @@
</div>
</div>
<div class="well">
<div class="albums-square-container">
<div class="albums-square-container">
<mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item"
v-for="item in library.albums.displayListing">
</mediaitem-square>

View file

@ -15,7 +15,7 @@
v-model="library.songs.search" class="search-input">
</div>
</div>
<div class="col-auto flex-center">
<div class="col-auto flex-center">
<div class="row">
<button class="col md-btn md-btn-primary md-btn-icon" style="min-width: 100px;margin-right: 3px;"
@click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
@ -24,7 +24,7 @@
<button class="col md-btn md-btn-primary md-btn-icon" style="min-width: 100px;margin-right: 3px;"
@click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
{{app.getLz('term.shuffle')}}
</button>
</button>
<div class="col">
<select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
<optgroup :label="app.getLz('term.sortBy')">
@ -51,8 +51,9 @@
</div>
</div>
<div class="col-auto flex-center">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
<button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)"
class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
<button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none" :aria-label="app.getLz('menubar.options.reload')">
<div class="spinner"></div>
</button>
</div>

View file

@ -101,7 +101,7 @@
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="app.getLz('term.more')">
<div class="svg-icon"></div>
</button>
</div>
@ -145,7 +145,7 @@
</div>
</div>
<div class="col-auto flex-center">
<button class="more-btn-round" style="float:right;" @click="menu">
<button class="more-btn-round" style="float:right;" @click="menu" :aria-label="term.more">
<div class="svg-icon"></div>
</button>
</div>
@ -159,7 +159,7 @@
<div style="width:100%">
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
<template v-if="nestedPlaylist == [] || nestedPlaylist.length <= 1">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
@ -173,14 +173,14 @@
:showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
:context-ext="buildContextMenu()"
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</div>
</template>
v-for="(item,index) in disc.tracks"></mediaitem-list-item>
</div>
</template>
</draggable>
</div>
</div>
<div class="friends-info" v-if="itemBadges.length != 0">
<div class="well">
@ -228,7 +228,7 @@
</div>
</b-tab>
</template>
</b-tabs>
</div>
</template>
@ -361,7 +361,7 @@
if (this.data.type.includes('albums')) {
let date = this.data.attributes.releaseDate;
if (date == null || date === "") return "";
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}`
}
},
async isInLibrary() {

View file

@ -68,7 +68,7 @@
<transition name="wpfade">
<div class="podcasts-details" v-if="selected.id != -1">
<div class="podcasts-details-header">
<button class="close-btn" @click="selected.id = -1"></button>
<button class="close-btn" @click="selected.id = -1" :aria-label="app.getLz('action.close')"></button>
</div>
<div class="podcast-artwork">
<mediaitem-artwork shadow="large" :url="selected.attributes.artwork.url" size="300"></mediaitem-artwork>

View file

@ -185,146 +185,39 @@
</div>
</div>
</b-modal>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.general.keybindings')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn" v-b-modal.modal-2>
<button class="md-btn" @click="app.appRoute('keybinds-settings')" >
{{$root.getLz('settings.option.general.keybindings.open')}}
</button>
</div>
<b-modal id="modal-2" centered size="lg"
:title="$root.getLz('settings.option.general.keybindings')" ok-only>
<div class="settings-option-body">
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.search')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('search')">
{{app.cfg.general.keybindings.search.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.albums')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('albums')">
{{app.cfg.general.keybindings.albums.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.artists')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('artists')">
{{app.cfg.general.keybindings.artists.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.browse')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('browse')">
{{app.cfg.general.keybindings.browse.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.private')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('togglePrivateSession')">
{{app.cfg.general.keybindings.togglePrivateSession.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.remote')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('webRemote')">
{{app.cfg.general.keybindings.webRemote.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.audio')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('audioSettings')">
{{app.cfg.general.keybindings.audioSettings.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.plugins')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('pluginMenu')">
{{app.cfg.general.keybindings.pluginMenu.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.cast')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('castToDevices')">
{{app.cfg.general.keybindings.castToDevices.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.settings')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('settings')">
{{app.cfg.general.keybindings.settings.join(' + ')}}
</button>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.description.developer')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<button class="md-btn md-btn-small md-btn-block"
@click="keyBindUpdate('openDeveloperTools')">
{{app.cfg.general.keybindings.openDeveloperTools.join(' + ')}}
</button>
</div>
</div>
<button class="md-btn md-btn-large md-btn-block" @click="keyBindReset()">
{{$root.getLz('term.reset')}}
</button>
</div>
</b-modal>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.general.themeUpdateNotification')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.themeUpdateNotification"
switch/>
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.general.showLovedTracksInline')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.showLovedTracksInline"
switch/>
</label>
</div>
</div>
</div>
</div>
</b-tab>
@ -436,16 +329,16 @@
<label>
<input type="checkbox" v-model="app.cfg.audio.normalization"
v-on:change="toggleNormalization"
:disabled="app.cfg.audio.spatial === true || app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer === true"
:disabled="app.cfg.audio.spatial === true || app.cfg.audio.maikiwiAudio.spatial === true || app.cfg.audio.maikiwiAudio.ciderPPE === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer1 === true || app.cfg.audio.maikiwiAudio.atmosphereRealizer2 === true"
switch/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext && app.cfg.audio.normalization">
<div class="md-option-segment">
dB SPL Display
{{$root.getLz('settings.option.audio.dbspl.display')}}
<br>
<small>(Advanced users only) Display dB SPL instead of dBFS on the volume slider.</small>
<small>{{$root.getLz('settings.option.audio.dbspl.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
@ -455,9 +348,9 @@
</div>
<div class="md-option-line" v-show="app.cfg.audio.dBSPL">
<div class="md-option-segment">
0 dBFS Calibration
{{$root.getLz('settings.option.audio.dbfs.calibration')}}
<br>
<small>Enter the peak Z-weighted dB SPL when Cider is at 0 dBFS.</small>
<small>{{$root.getLz('settings.option.audio.dbfs.description')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
@ -597,7 +490,7 @@
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration">
<select class="md-select" style="width:180px;" v-model="app.cfg.visual.hw_acceleration" @change="promptForRelaunch()">
<option value="default">
{{$root.getLz('settings.header.visual.hardwareAcceleration.default')}}
</option>
@ -644,7 +537,8 @@
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch/>
<input type="checkbox" v-model="app.cfg.visual.nativeTitleBar" switch
@change="promptForRelaunch()"/>
</label>
</div>
</div>
@ -1067,6 +961,17 @@
</div>
</div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false">
<div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.hideTimestamp')}}
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.general.discordrpc.hide_timestamp" switch/>
</label>
</div>
</div>
<div class="md-option-line" v-show="app.cfg.general.discordrpc.enabled != false">
<div class="md-option-segment">
{{$root.getLz('settings.option.connectivity.discordRPC.detailsFormat')}}<br/>
@ -1462,76 +1367,6 @@
}
})
},
keyBindUpdate: function (action) {
const blur = document.createElement('div');
blur.className = 'blur';
blur.style.backgroundColor = 'rgba(0,0,0,0.25)';
blur.style.position = 'fixed';
blur.style.top = '0';
blur.style.left = '0';
blur.style.width = '100%';
blur.style.height = '100%';
blur.style.zIndex = '9999';
blur.style.display = 'flex';
blur.style.alignItems = 'center';
blur.style.justifyContent = 'center';
blur.style.fontSize = '2em';
blur.style.color = 'white';
blur.innerHTML = 'Press a combination of two keys to update keybinding. Press Escape key to go back.'
document.body.appendChild(blur);
let keyBind = [];
const keyBindTimeout = setTimeout(function () {
keyBind = [];
document.body.removeChild(blur);
}, 30000);
const keyBindUpdate = function (e) {
if (document.body.contains(blur)) {
if (e.key == 'Escape') {
document.body.removeChild(blur);
clearTimeout(keyBindTimeout);
return;
} else {
if (e.keyCode >= 65 && e.keyCode <= 90 && e.keyCode <= 97 && e.keyCode <= 122) {
keyBind.push(e.key.toUpperCase());
} else {
keyBind.push(e.key);
}
if (keyBind.length === 2) {
if (keyBind[0] !== keyBind[1]) {
app.cfg.general.keybindings[action] = keyBind
document.body.removeChild(blur);
clearTimeout(keyBindTimeout);
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
if (ok) ipcRenderer.invoke("relaunchApp")
})
} else {
keyBind = [];
}
}
}
}
};
document.addEventListener('keydown', keyBindUpdate);
},
keyBindReset: function () {
app.cfg.general.keybindings.search = [app.platform == "darwin" ? "Command" : "Control", "S"];
app.cfg.general.keybindings.albums = [app.platform == "darwin" ? "Command" : "Control", "F"];
app.cfg.general.keybindings.artists = [app.platform == "darwin" ? "Command" : "Control", "D"];
app.cfg.general.keybindings.browse = [app.platform == "darwin" ? "Command" : "Control", "B"];
app.cfg.general.keybindings.togglePrivateSession = [app.platform == "darwin" ? "Command" : "Control", "P"];
app.cfg.general.keybindings.webRemote = [app.platform == "darwin" ? "Command" : "Control", "W"];
app.cfg.general.keybindings.audioSettings = [app.platform == "darwin" ? "Option" : "Alt", "A"];
app.cfg.general.keybindings.pluginMenu = [app.platform == "darwin" ? "Option" : "Alt", "P"];
app.cfg.general.keybindings.castToDevices = [app.platform == "darwin" ? "Option" : "Alt", "C"];
app.cfg.general.keybindings.settings = [app.platform == "darwin" ? "Option" : "Alt", "S"];
app.cfg.general.keybindings.openDeveloperTools = [app.platform == "darwin" ? "Command" : "Control", app.platform == "darwin" ? "Option" : "Shift", "I"];
notyf.success(app.getLz('settings.notyf.general.keybindings.update.success'));
bootbox.confirm(app.getLz("settings.prompt.general.keybindings.update.success"), (ok) => {
if (ok) ipcRenderer.invoke("relaunchApp")
})
},
gitHubExplore() {
app.appRoute("themes-github")
},