(WIP) changes to playlist/album pages, added <artwork-material>
This commit is contained in:
booploops
parent
fcaa891648
commit
cd48e25acc
7 changed files with 269 additions and 158 deletions
|
|
@ -85,6 +85,8 @@ export class Win {
|
|||
this.options.height = windowState.height;
|
||||
|
||||
// Start the webserver for the browser window to load
|
||||
const ws = new wsapi()
|
||||
ws.InitWebSockets()
|
||||
this.startWebServer();
|
||||
|
||||
this.win = new electron.BrowserWindow(this.options);
|
||||
|
|
@ -191,8 +193,6 @@ export class Win {
|
|||
* TODO: Broadcast the remote so that /web-remote/ can connect
|
||||
* https://github.com/ciderapp/Apple-Music-Electron/blob/818ed18940ff600d76eb59d22016723a75885cd5/resources/functions/handler.js#L1173
|
||||
*/
|
||||
const ws = new wsapi()
|
||||
ws.InitWebSockets()
|
||||
const remote = express();
|
||||
remote.use(express.static(path.join(this.paths.srcPath, "./web-remote/")))
|
||||
remote.listen(this.remotePort, () => {
|
||||
|
|
|
|||
|
|
@ -18,13 +18,6 @@ private class standardResponse {
|
|||
}
|
||||
|
||||
export class wsapi {
|
||||
private standa2rdResponse (status, data, message, type: string = "generic") {
|
||||
this.status = status;
|
||||
this.message = message;
|
||||
this.data = data;
|
||||
this.type = type;
|
||||
}
|
||||
|
||||
port: any = 26369
|
||||
wss: any = null
|
||||
clients: []
|
||||
|
|
|
|||
|
|
@ -254,6 +254,32 @@ input[type="text"], input[type="number"] {
|
|||
}
|
||||
}
|
||||
|
||||
.artworkMaterial {
|
||||
position: relative;
|
||||
height:100%;
|
||||
width:100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
>img {
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
opacity: 0.5;
|
||||
filter: brightness(200%) blur(180px) saturate(280%) contrast(2);
|
||||
}
|
||||
|
||||
>img:first-child {
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
>img:last-child {
|
||||
bottom:0;
|
||||
right: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[artwork-hidden] {
|
||||
transition: opacity .25s var(--appleEase);
|
||||
|
|
@ -2345,7 +2371,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
.playlist-page {
|
||||
--bgColor: transparent;
|
||||
padding: 0px;
|
||||
background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 59px, transparent 60px, transparent 100%);
|
||||
//background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%);
|
||||
top: 0;
|
||||
padding-top: var(--navigationBarHeight);
|
||||
|
||||
|
|
@ -2356,6 +2382,48 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
.playlist-display {
|
||||
padding: var(--contentInnerPadding);
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
|
||||
.artworkContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-mask-image: radial-gradient(at top left, black, transparent 70%), radial-gradient(at top right, black, transparent 70%), linear-gradient(180deg, rgb(200 200 200), transparent 98%);
|
||||
opacity: .7;
|
||||
|
||||
.artworkMaterial>img {
|
||||
filter: brightness(100%) blur(80px) saturate(100%) contrast(1);
|
||||
object-position: center;
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: unset;
|
||||
}
|
||||
.artworkMaterial>img:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.playlistInfo {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
>.row {
|
||||
width: calc(100% - 32px);
|
||||
}
|
||||
|
||||
.playlist-info {
|
||||
flex-shrink: unset;
|
||||
|
|
@ -2456,6 +2524,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.friends-info {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
|
|
|||
33
src/renderer/views/components/artwork-material.ejs
Normal file
33
src/renderer/views/components/artwork-material.ejs
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<script type="text/x-template" id="artwork-material">
|
||||
<div class="artworkMaterial">
|
||||
<img :src="src"/>
|
||||
<img :src="src"/>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
Vue.component('artwork-material', {
|
||||
template: '#artwork-material',
|
||||
data: function () {
|
||||
return {
|
||||
src: ""
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.src = app.getMediaItemArtwork(this.url, this.size)
|
||||
},
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
size: {
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
default: '32'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -659,6 +659,8 @@
|
|||
</button>
|
||||
</script>
|
||||
|
||||
<!-- Artwork Material -->
|
||||
<%- include('components/artwork-material') %>
|
||||
<!-- Menu Panel -->
|
||||
<%- include('components/menu-panel') %>
|
||||
<!-- Playlist Listing -->
|
||||
|
|
|
|||
|
|
@ -7,14 +7,17 @@
|
|||
</div>
|
||||
</template>
|
||||
<template v-if="app.playlists.loadingState == 1">
|
||||
<div class="playlist-display row"
|
||||
<div class="playlist-display"
|
||||
:style="{
|
||||
background: (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
|
||||
color: (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
|
||||
'--bgColor': (data.attributes.artwork != null && data.attributes.artwork['bgColor'] != null) ? ('#' + data.attributes.artwork.bgColor) : '',
|
||||
'--textColor': (data.attributes.artwork != null && data.attributes.artwork['textColor1'] != null) ? ('#' + data.attributes.artwork.textColor1) : ''
|
||||
}">
|
||||
<div class="playlistInfo">
|
||||
<div class="row">
|
||||
<div class="col-auto flex-center">
|
||||
<div style="width: 260px;height:260px;">
|
||||
<mediaitem-artwork
|
||||
shadow="large"
|
||||
:video-priority="true"
|
||||
:url="(data.attributes != null && data.attributes.artwork != null) ? data.attributes.artwork.url : ((data.relationships != null && data.relationships.tracks.data.length > 0 && data.relationships.tracks.data[0].attributes != null) ? ((data.relationships.tracks.data[0].attributes.artwork != null)? data.relationships.tracks.data[0].attributes.artwork.url : ''):'')"
|
||||
:video="(data.attributes != null && data.attributes.editorialVideo != null) ? (data.attributes.editorialVideo.motionDetailSquare ? data.attributes.editorialVideo.motionDetailSquare.video : (data.attributes.editorialVideo.motionSquareVideo1x1 ? data.attributes.editorialVideo.motionSquareVideo1x1.video : '')) : '' "
|
||||
|
|
@ -86,6 +89,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artworkContainer" v-if="data.attributes.artwork != null">
|
||||
<artwork-material :url="data.attributes.artwork.url" size="260"></artwork-material>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="playlist-body">
|
||||
<div class="well">
|
||||
<div style="width:100%">
|
||||
|
|
|
|||
|
|
@ -5,5 +5,8 @@
|
|||
{{ $store.state.test }}
|
||||
<div class="spinner"></div>
|
||||
<button class="md-btn">Cider Button</button>
|
||||
<div style="position: relative;width: 300px;height: 300px;">
|
||||
<artwork-material url="https://is3-ssl.mzstatic.com/image/thumb/Music126/v4/13/41/13/1341133b-560f-1aee-461f-c4b32ec049b4/cover.jpg/{w}x{h}bb.jpg"></artwork-material>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue