Merge branch 'main' into enhancement/radio
This commit is contained in:
Core
GitHub
commit
eaae9ba457
103 changed files with 18529 additions and 23706 deletions
File diff suppressed because it is too large
Load diff
12
src/renderer/assets/cider-icons/backward.svg
Normal file
12
src/renderer/assets/cider-icons/backward.svg
Normal 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 |
12
src/renderer/assets/cider-icons/forward.svg
Normal file
12
src/renderer/assets/cider-icons/forward.svg
Normal 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 |
10
src/renderer/assets/cider-icons/pause.svg
Normal file
10
src/renderer/assets/cider-icons/pause.svg
Normal 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 |
7
src/renderer/assets/cider-icons/play.svg
Normal file
7
src/renderer/assets/cider-icons/play.svg
Normal 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
Binary file not shown.
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -114,6 +114,25 @@
|
|||
margin: 2em;
|
||||
}
|
||||
}
|
||||
// Search Page
|
||||
&.search-page {
|
||||
.cd-mediaitem-square.mediaitem-brick {
|
||||
width: 530px !important;
|
||||
.artwork-container .artwork{
|
||||
height:168px !important;
|
||||
width:507px !important;
|
||||
z-index: 1;
|
||||
}
|
||||
.title{
|
||||
font-weight: bold;
|
||||
justify-content: left;
|
||||
font-size: 18px;
|
||||
margin-top: -40px;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Podcast Page
|
||||
.content-inner.podcasts-page {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ const app = new Vue({
|
|||
limit: 10
|
||||
},
|
||||
fullscreenLyrics: false,
|
||||
fullscreenState: ipcRenderer.sendSync("getFullScreen"),
|
||||
playerLCD: {
|
||||
playbackDuration: 0,
|
||||
desiredDuration: 0,
|
||||
|
|
@ -237,7 +238,9 @@ const app = new Vue({
|
|||
pages: [],
|
||||
},
|
||||
moreinfodata: [],
|
||||
notyf: notyf
|
||||
notyf: notyf,
|
||||
idleTimer : null,
|
||||
idleState : false,
|
||||
},
|
||||
watch: {
|
||||
cfg: {
|
||||
|
|
@ -787,8 +790,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()
|
||||
|
|
@ -810,7 +813,7 @@ const app = new Vue({
|
|||
}
|
||||
numbers.shift()
|
||||
let peak = Math.max(numbers[6], numbers[7]) / 32768.0
|
||||
let gain = Math.pow(10, ((-1 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
|
||||
let gain = Math.pow(10, ((-1.3 - (Math.log10(peak) * 20)) / 20))// EBU R 128 Compliant
|
||||
console.debug(`[Cider][MaikiwiSoundCheck] Peak Gain: '${(Math.log10(peak) * 20).toFixed(2)}' dB | Adjusting '${(Math.log10(gain) * 20).toFixed(2)}' dB`)
|
||||
try {
|
||||
//CiderAudio.audioNodes.gainNode.gain.value = (Math.min(Math.pow(10, (replaygain.gain / 20)), (1 / replaygain.peak)))
|
||||
|
|
@ -831,8 +834,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) => {
|
||||
|
|
@ -856,8 +860,29 @@ const app = new Vue({
|
|||
self.$refs.queue.updateQueue();
|
||||
}
|
||||
this.currentSongInfo = a
|
||||
|
||||
|
||||
|
||||
try {
|
||||
if (app.mk.nowPlayingItem.flavor.includes("64")) {
|
||||
if (localStorage.getItem("playingBitrate") !== "64") {
|
||||
localStorage.setItem("playingBitrate", "64")
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
}
|
||||
else if (app.mk.nowPlayingItem.flavor.includes("256")) {
|
||||
if (localStorage.getItem("playingBitrate") !== "256") {
|
||||
localStorage.setItem("playingBitrate", "256")
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
}
|
||||
else {
|
||||
localStorage.setItem("playingBitrate", "256")
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
} catch(e) {
|
||||
localStorage.setItem("playingBitrate", "256")
|
||||
CiderAudio.hierarchical_loading();
|
||||
}
|
||||
|
||||
if (app.cfg.audio.normalization) {
|
||||
// get unencrypted audio previews to get SoundCheck's normalization tag
|
||||
try {
|
||||
|
|
@ -890,8 +915,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
|
||||
}
|
||||
|
|
@ -936,12 +963,26 @@ const app = new Vue({
|
|||
this.getBrowsePage();
|
||||
this.$forceUpdate()
|
||||
}, 500)
|
||||
document.querySelector('#apple-music-video-player-controls').addEventListener('mousemove', () => {
|
||||
this.showFoo('.music-player-info',2000);
|
||||
})
|
||||
ipcRenderer.invoke("renderer-ready", true)
|
||||
document.querySelector("#LOADER").remove()
|
||||
if (this.cfg.general.themeUpdateNotification && !this.isDev) {
|
||||
this.checkForThemeUpdates()
|
||||
}
|
||||
},
|
||||
showFoo(querySelector,time) {
|
||||
clearTimeout(this.idleTimer);
|
||||
if (this.idleState == true) {
|
||||
document.querySelector(querySelector).classList.remove("inactive");
|
||||
}
|
||||
this.idleState = false;
|
||||
this.idleTimer = setTimeout(() => {
|
||||
document.querySelector(querySelector).classList.add("inactive");
|
||||
this.idleState = true;
|
||||
}, time);
|
||||
},
|
||||
setContentScrollPos(scroll) {
|
||||
this.chrome.contentScrollPosY = scroll.target.scrollTop
|
||||
},
|
||||
|
|
@ -991,7 +1032,7 @@ const app = new Vue({
|
|||
document.querySelectorAll(`[id*='less']`).forEach(el => {
|
||||
el.remove()
|
||||
});
|
||||
less.refresh()
|
||||
await less.refresh()
|
||||
}
|
||||
},
|
||||
async reloadStyles() {
|
||||
|
|
@ -1019,7 +1060,7 @@ const app = new Vue({
|
|||
}
|
||||
})
|
||||
less.registerStylesheetsImmediately()
|
||||
less.refresh(true, true, true)
|
||||
await less.refresh(true, true, true)
|
||||
this.$forceUpdate()
|
||||
return
|
||||
},
|
||||
|
|
@ -1137,28 +1178,31 @@ const app = new Vue({
|
|||
}
|
||||
})
|
||||
},
|
||||
async refreshPlaylists(localOnly = false) {
|
||||
async refreshPlaylists(localOnly = false, useCachedPlaylists = true) {
|
||||
let self = this
|
||||
let trackMap = this.cfg.advanced.playlistTrackMapping
|
||||
let newListing = []
|
||||
let trackMapping = {}
|
||||
const cachedPlaylist = await CiderCache.getCache("library-playlists")
|
||||
const cachedTrackMapping = await CiderCache.getCache("library-playlists-tracks")
|
||||
|
||||
if (useCachedPlaylists) {
|
||||
const cachedPlaylist = await CiderCache.getCache("library-playlists")
|
||||
const cachedTrackMapping = await CiderCache.getCache("library-playlists-tracks")
|
||||
|
||||
if (cachedPlaylist) {
|
||||
console.debug("using cached playlists")
|
||||
this.playlists.listing = cachedPlaylist
|
||||
self.sortPlaylists()
|
||||
} else {
|
||||
console.debug("playlist has no cache")
|
||||
}
|
||||
if (cachedPlaylist) {
|
||||
console.debug("using cached playlists")
|
||||
this.playlists.listing = cachedPlaylist
|
||||
self.sortPlaylists()
|
||||
} else {
|
||||
console.debug("playlist has no cache")
|
||||
}
|
||||
|
||||
if (cachedTrackMapping) {
|
||||
console.debug("using cached track mapping")
|
||||
this.playlists.trackMapping = cachedTrackMapping
|
||||
}
|
||||
if (localOnly) {
|
||||
return
|
||||
if (cachedTrackMapping) {
|
||||
console.debug("using cached track mapping")
|
||||
this.playlists.trackMapping = cachedTrackMapping
|
||||
}
|
||||
if (localOnly) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.library.backgroundNotification.message = "Building playlist cache..."
|
||||
|
|
@ -1263,7 +1307,7 @@ const app = new Vue({
|
|||
}
|
||||
}
|
||||
).then(res => {
|
||||
self.refreshPlaylists()
|
||||
self.refreshPlaylists(false, false)
|
||||
})
|
||||
},
|
||||
async editPlaylist(id, name = app.getLz('term.newPlaylist')) {
|
||||
|
|
@ -1278,7 +1322,7 @@ const app = new Vue({
|
|||
}
|
||||
}
|
||||
).then(res => {
|
||||
self.refreshPlaylists()
|
||||
self.refreshPlaylists(false, false)
|
||||
})
|
||||
},
|
||||
copyToClipboard(str) {
|
||||
|
|
@ -1322,7 +1366,7 @@ const app = new Vue({
|
|||
})
|
||||
self.sortPlaylists()
|
||||
setTimeout(() => {
|
||||
app.refreshPlaylists()
|
||||
app.refreshPlaylists(false, false)
|
||||
}, 8000)
|
||||
})
|
||||
},
|
||||
|
|
@ -1339,6 +1383,9 @@ const app = new Vue({
|
|||
if (found) {
|
||||
self.playlists.listing.splice(self.playlists.listing.indexOf(found), 1)
|
||||
}
|
||||
setTimeout(() => {
|
||||
app.refreshPlaylists(false, false);
|
||||
}, 8000);
|
||||
})
|
||||
}
|
||||
},
|
||||
|
|
@ -2569,7 +2616,7 @@ const app = new Vue({
|
|||
})
|
||||
self.sortPlaylists()
|
||||
setTimeout(() => {
|
||||
app.refreshPlaylists()
|
||||
app.refreshPlaylists(false, false)
|
||||
}, 13000)
|
||||
})
|
||||
},
|
||||
|
|
@ -3851,12 +3898,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
|
||||
}
|
||||
},
|
||||
|
|
@ -4091,10 +4140,11 @@ const app = new Vue({
|
|||
});
|
||||
},
|
||||
fullscreen(flag) {
|
||||
this.fullscreenState = flag;
|
||||
if (flag) {
|
||||
ipcRenderer.send('setFullScreen', true);
|
||||
if (app.mk.nowPlayingItem.type && app.mk.nowPlayingItem.type.toLowerCase().includes("video")) {
|
||||
document.querySelector('video#apple-music-video-player').requestFullscreen()
|
||||
// document.querySelector('video#apple-music-video-player').requestFullscreen()
|
||||
} else {
|
||||
app.appMode = 'fullscreen';
|
||||
}
|
||||
|
|
@ -4105,9 +4155,21 @@ const app = new Vue({
|
|||
});
|
||||
} else {
|
||||
ipcRenderer.send('setFullScreen', false);
|
||||
app.appMode = 'player';
|
||||
if (app.mk.nowPlayingItem.type && app.mk.nowPlayingItem.type.toLowerCase().includes("video")) {
|
||||
|
||||
} else {
|
||||
app.appMode = 'player';
|
||||
}
|
||||
}
|
||||
},
|
||||
pip(){
|
||||
document.querySelector('video#apple-music-video-player').requestPictureInPicture()
|
||||
// .then(pictureInPictureWindow => {
|
||||
// pictureInPictureWindow.addEventListener("resize", () => {
|
||||
// console.log("[PIP] Resized")
|
||||
// }, false);
|
||||
// })
|
||||
},
|
||||
miniPlayer(flag) {
|
||||
if (flag) {
|
||||
this.tmpWidth = window.innerWidth;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
@ -2969,12 +2971,81 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
float: left;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: calc(100% - var(--chromeHeight));
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
z-index: 100000;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
#apple-music-video-container {
|
||||
|
||||
// AM Web Style Fullscreen Button
|
||||
#player-fullscreen {
|
||||
background-size : 50%;
|
||||
background-position: center;
|
||||
background-repeat : no-repeat;
|
||||
filter : opacity(0.6);
|
||||
// filter: drop-shadow(0px 0px 4px rgb(0 0 0 / 80%));
|
||||
background-color : transparent;
|
||||
border-radius : 10px;
|
||||
transition : 0.2s ease-in-out filter;
|
||||
bottom : 0;
|
||||
|
||||
&:hover {
|
||||
filter : opacity(1);
|
||||
transition: 0.2s ease-in-out filter;
|
||||
}
|
||||
}
|
||||
|
||||
// AM Web Style PiP Button
|
||||
#player-pip {
|
||||
background-color: transparent;
|
||||
border-radius : 10px;
|
||||
bottom : 0;
|
||||
filter : opacity(0.6);
|
||||
transition : 0.2s ease-in-out filter;
|
||||
|
||||
&:hover {
|
||||
filter : opacity(1);
|
||||
transition: 0.2s ease-in-out filter;
|
||||
}
|
||||
}
|
||||
.playback-info{
|
||||
position: absolute;
|
||||
width:100%;
|
||||
bottom: 0;
|
||||
padding: 20px 40px;
|
||||
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%);
|
||||
.song-artist{
|
||||
font-size: 1.7rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.song-name{
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color:rgb(255,255,255,0.8);
|
||||
}
|
||||
}
|
||||
input[type="range"]{
|
||||
align-self: center;
|
||||
height: 4px;
|
||||
border-radius: .5rem;
|
||||
margin-inline: 10px;
|
||||
}
|
||||
|
||||
.song-progress input[type="range"]{
|
||||
appearance: initial;
|
||||
&::-webkit-slider-thumb {
|
||||
box-shadow: 0px 0px 0px #000000;
|
||||
border: 1px solid #39404D;
|
||||
background: #fff;
|
||||
height:0.7rem;
|
||||
width:0.7rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#apple-music-video-player {
|
||||
position: absolute;
|
||||
|
|
@ -2988,13 +3059,66 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
top: var(--chromeHeight1);
|
||||
bottom: unset;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
opacity: 0;
|
||||
}
|
||||
#apple-music-video-player-controls {
|
||||
position: absolute;
|
||||
z-index: 100001;
|
||||
float: left;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.playback-info{
|
||||
.song-progress {
|
||||
display: flex;
|
||||
}
|
||||
.app-chrome-item.display--large{
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
.playback-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
.song-artist-album {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
/*height: 1.2em;
|
||||
line-height: 1.2em;*/
|
||||
z-index: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80%;
|
||||
max-width: 340px;
|
||||
overflow: hidden;
|
||||
|
||||
.song-artist-album-content {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&.song-artist-normal {
|
||||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.song-artist-marquee {
|
||||
> marquee {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#apple-music-video-player-controls #player-exit {
|
||||
|
|
@ -3014,7 +3138,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin: 10px;
|
||||
right: 50px;
|
||||
border-radius: 100%;
|
||||
background: rgb(255 255 255 / 50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -3033,7 +3156,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
margin: 10px;
|
||||
right: 0px;
|
||||
border-radius: 100%;
|
||||
background: rgb(255 255 255 / 50%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -3111,6 +3233,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 +3485,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");
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -37,6 +37,11 @@
|
|||
</template>
|
||||
</transition>
|
||||
<!-- Library - Artists-->
|
||||
|
||||
<!-- Keybinds -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'keybinds-settings'">
|
||||
<keybinds-settings></keybinds-settings>
|
||||
</template>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
|
@ -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()">
|
||||
|
|
|
|||
|
|
@ -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()">
|
||||
|
|
|
|||
|
|
@ -62,15 +62,68 @@
|
|||
:
|
||||
'')}}
|
||||
</div>
|
||||
<div id="player-pip"
|
||||
@click="document.querySelector('video#apple-music-video-player').requestPictureInPicture()"
|
||||
title="Picture-in-Picture">
|
||||
<%- include("../svg/pip.svg") %>
|
||||
</div>
|
||||
<div id="player-fullscreen"
|
||||
@click="document.querySelector('video#apple-music-video-player').requestFullscreen()"
|
||||
title="Fullscreen">
|
||||
<%- include("../svg/fullscreen.svg") %>
|
||||
<div class="playback-info music-player-info">
|
||||
<div class="song-artist-album-content"
|
||||
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">
|
||||
{{ 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">
|
||||
<p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
|
||||
<input type="range" step="0.01" min="0" :style="progressBarStyle()" style="width: 95%"
|
||||
@input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
|
||||
@mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
|
||||
@touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
|
||||
:max="mk.currentPlaybackDuration" :value="getSongProgress()">
|
||||
<p style="width: auto">{{ convertTime(mk.currentPlaybackDuration) }}
|
||||
</div>
|
||||
<div class="app-chrome-item display--large">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<button class="volume-button--small volume" @click="muteButtonPressed()"
|
||||
:class="{'active': this.cfg.audio.volume == 0}"
|
||||
:title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
|
||||
v-b-tooltip.hover></button>
|
||||
<input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
|
||||
v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()"
|
||||
v-b-tooltip.hover :title="formatVolumeTooltip()">
|
||||
</div>
|
||||
<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 class="app-chrome-item generic">
|
||||
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
||||
<button class="playback-button--small lyrics"
|
||||
:title="$root.getLz('term.lyrics')"
|
||||
v-b-tooltip.hover
|
||||
:class="{'active': drawer.panel == 'lyrics'}"
|
||||
@click="invokeDrawer('lyrics')"></button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="playback-button--small lyrics"
|
||||
:style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
|
||||
</template>
|
||||
</div>
|
||||
<div id="player-pip"
|
||||
@click="pip()"
|
||||
title="Picture-in-Picture"
|
||||
v-b-tooltip.hover>
|
||||
<%- include("../svg/pip.svg") %>
|
||||
</div>
|
||||
<div id="player-fullscreen"
|
||||
@click="fullscreen(!fullscreenState)"
|
||||
title="Fullscreen"
|
||||
v-b-tooltip.hover>
|
||||
<%- include("../svg/fullscreen.svg") %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="apple-music-video-player"></div>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
page="radio"></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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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="$root.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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script type="text/x-template" id="lyrics-view">
|
||||
<div ref="lyricsview" class="md-body lyric-body">
|
||||
<template v-if="lyrics && lyrics != [] && lyrics.length > 0">
|
||||
<template v-if="lyrics && lyrics != [] && lyrics.length > 0 && !qqInstrumental(lyrics)">
|
||||
<template v-for="(lyric, index) in lyrics" v-if="lyric && lyric.line && lyric.line != 'lrcInstrumental'">
|
||||
<h3 class="lyric-line" @click="seekTo(lyric.startTime)" :class="{unsynced : lyric.startTime == 9999999}"
|
||||
v-bind:line-index="index.toString()">
|
||||
|
|
@ -183,6 +183,14 @@
|
|||
}
|
||||
else return []
|
||||
},
|
||||
qqInstrumental(lyrics) {
|
||||
for(lyric of lyrics){
|
||||
if (lyric.line.includes("纯音乐") && lyric.line.includes("欣赏")){
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
checkIfScrollIsStatic : setInterval(() => {
|
||||
try {
|
||||
if (position === this.$refs.lyricsview.scrollTop) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,15 @@
|
|||
<div class="mini-view" tabindex="0">
|
||||
<div class="background">
|
||||
</div>
|
||||
<div class="player-pin" title="Pin to Top" @click="app.pinMiniPlayer()">
|
||||
<span id="mini-pin">📌</span>
|
||||
<div class="player-pin" title="Pin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === false" @click="app.pinMiniPlayer()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="feather feather-pin">
|
||||
<path d="M7.05664 16.3613C7.05664 17.1523 7.59277 17.6797 8.42773 17.6797H13.1299V21.8369C13.1299 23.0762 13.7539 24.3242 14 24.3242C14.2373 24.3242 14.8613 23.0762 14.8613 21.8369V17.6797H19.5635C20.3984 17.6797 20.9346 17.1523 20.9346 16.3613C20.9346 14.4717 19.4316 12.5293 16.9531 11.6152L16.6631 7.52832C17.9727 6.78125 19.0098 5.96387 19.4668 5.38379C19.7041 5.06738 19.8271 4.75098 19.8271 4.46973C19.8271 3.88965 19.3789 3.45898 18.7197 3.45898H9.27148C8.6123 3.45898 8.16406 3.88965 8.16406 4.46973C8.16406 4.75098 8.28711 5.06738 8.52441 5.38379C8.98145 5.96387 10.0186 6.78125 11.3281 7.52832L11.0469 11.6152C8.55957 12.5293 7.05664 14.4717 7.05664 16.3613Z" fill="#ff2654"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="player-pin" title="Unpin to Top" v-if="app.cfg.visual.miniplayer_top_toggle === true" @click="app.pinMiniPlayer(false)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="none" class="feather feather-pin-slashed">
|
||||
<path d="M9.271 3.459c-.659 0-1.107.43-1.107 1.01 0 .282.114.59.352.897.448.59 1.494 1.415 2.777 2.162l-.07 1.02 8.99 8.991c.458-.202.722-.615.722-1.178 0-1.89-1.503-3.832-3.947-4.746l-.29-4.087c1.275-.747 2.312-1.555 2.76-2.144.246-.308.37-.633.37-.914 0-.58-.45-1.011-1.108-1.011H9.27ZM5.15 6.061l16.076 16.057c.272.281.73.273.993 0a.703.703 0 0 0 0-.984L6.15 5.076a.716.716 0 0 0-1.002 0 .711.711 0 0 0 0 .985Zm1.908 10.3c0 .791.536 1.319 1.37 1.319h4.703v4.157c0 1.24.624 2.487.861 2.487.246 0 .87-1.248.87-2.487V17.81h.413l-5.537-5.545c-1.678 1.002-2.68 2.557-2.68 4.095Z" fill="#ff2654"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="player-exit" title="Close" @click="app.miniPlayer(false)">
|
||||
<svg fill="#323232e3" width="21" height="21" viewBox="0 0 21 21" aria-role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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')}})
|
||||
|
|
|
|||
|
|
@ -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'); %>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -39,68 +39,56 @@
|
|||
<option value="NATURAL">
|
||||
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.standard')}}
|
||||
</option>
|
||||
<option value="AGGRESSIVE">
|
||||
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.ciderPPEStrength.aggressive')}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md-option-line" v-show="app.cfg.advanced.AudioContext">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmth')}}
|
||||
<br>
|
||||
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmth.description')}}</small>
|
||||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<input type="checkbox" v-model="app.cfg.audio.maikiwiAudio.analogWarmth"
|
||||
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-segment">
|
||||
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity')}}
|
||||
<br>
|
||||
<small>{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.analogWarmthIntensity.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>
|
||||
</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')}} [1]
|
||||
<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.atmosphereRealizer1"
|
||||
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.atmosphereRealizer1 === true">
|
||||
<div class="md-option-segment">
|
||||
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}}
|
||||
{{$root.getLz('settings.option.audio.enableAdvancedFunctionality.atmosphereRealizerMode')}} [1]
|
||||
<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.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')}} [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.atmosphereRealizer2"
|
||||
v-on:change="CiderAudio.hierarchical_loading();" switch/>
|
||||
</div>
|
||||
</div>
|
||||
<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')}} [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: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 +114,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 +175,7 @@
|
|||
data: function () {
|
||||
return {
|
||||
app: this.$root,
|
||||
arprofiles: CiderAudio.atmosphereRealizerProfiles,
|
||||
spprofiles: CiderAudio.spatialProfiles
|
||||
}
|
||||
},
|
||||
|
|
@ -194,6 +183,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 +259,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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<div class="gh-content">
|
||||
<div class="repos-list">
|
||||
<div class="repo-header">
|
||||
<h4>Available</h4>
|
||||
<h4>{{$root.getLz('settings.option.visual.theme.github.available')}}</h4>
|
||||
</div>
|
||||
<ul class="list-group list-group-flush">
|
||||
<template v-for="theme in themes">
|
||||
|
|
@ -85,7 +85,7 @@
|
|||
|
||||
<div class="style-editor-container">
|
||||
<div class="repo-header">
|
||||
<h4>Applied</h4>
|
||||
<h4>{{ $root.getLz("settings.option.visual.theme.github.applied") }} </h4>
|
||||
</div>
|
||||
<stylestack-editor ref="stackEditor" v-if="themes.length != 0" :themes="themes"/>
|
||||
</div>
|
||||
|
|
|
|||
267
src/renderer/views/pages/keybinds.ejs
Normal file
267
src/renderer/views/pages/keybinds.ejs
Normal 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>
|
||||
|
|
@ -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);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script type="text/x-template" id="cider-search">
|
||||
<div class="content-inner">
|
||||
<div class="content-inner search-page">
|
||||
<div v-if="search != null && search != [] && search.term != ''">
|
||||
<h3>{{app.getLz('term.topResult')}}</h3>
|
||||
<mediaitem-scroller-horizontal
|
||||
|
|
|
|||
|
|
@ -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/>
|
||||
|
|
@ -1370,7 +1275,7 @@
|
|||
</div>
|
||||
<div class="md-option-segment md-option-segment_auto">
|
||||
<label>
|
||||
<input type="checkbox" disabled a-v-model="app.cfg.connectUser.sync.settings"
|
||||
<input type="checkbox" a-v-model="app.cfg.connectUser.sync.settings"
|
||||
@click="app.cfg.connectUser.sync.settings = !app.cfg.connectUser.sync.settings"
|
||||
switch/>
|
||||
</label>
|
||||
|
|
@ -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")
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
</div>
|
||||
<div class="col-auto flex-center">
|
||||
<button class="md-btn md-btn-small md-btn-block" @click="$root.checkForThemeUpdates()">
|
||||
Check for updates
|
||||
{{ $root.getLz('settings.option.visual.theme.checkForUpdates') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto nopadding flex-center">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue