its not like its our development token ¯\_(ツ)_/¯
This commit is contained in:
cryptofyre
parent
c24dcced5f
commit
24155c97a5
5 changed files with 1044 additions and 269 deletions
|
|
@ -218,9 +218,9 @@ input[type=range].md-slider::-webkit-slider-runnable-track {
|
|||
--bs-gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(-1 * var(--bs-gutter-y));
|
||||
margin-right: calc(-0.5 * var(--bs-gutter-x));
|
||||
margin-left: calc(-0.5 * var(--bs-gutter-x));
|
||||
/*margin-top: calc(-1 * var(--bs-gutter-y));*/
|
||||
/*margin-right: calc(-0.5 * var(--bs-gutter-x));*/
|
||||
/*margin-left: calc(-0.5 * var(--bs-gutter-x));*/
|
||||
}
|
||||
|
||||
.row > * {
|
||||
|
|
|
|||
|
|
@ -2,15 +2,15 @@
|
|||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin />
|
||||
<link rel="preconnect" href="https://amp-api.music.apple.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://api.music.apple.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://is1-ssl.mzstatic.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://is2-ssl.mzstatic.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://is3-ssl.mzstatic.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://is4-ssl.mzstatic.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://is5-ssl.mzstatic.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://play.itunes.apple.com/" crossorigin/>
|
||||
<link rel="preconnect" href="https://aod-ssl.itunes.apple.com/" crossorigin/>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
|
|
@ -22,178 +22,421 @@
|
|||
<link rel="manifest" href="./manifest.json?v=2">
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
<div id="app">
|
||||
<div id="app-main">
|
||||
<div class="app-chrome">
|
||||
<div class="app-chrome--left">
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="app-title"></div>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small shuffle"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button previous"></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>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button next"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small repeat"></button>
|
||||
</div>
|
||||
<body oncontextmenu="return false;" loading="1">
|
||||
<div id="app">
|
||||
<div id="app-main">
|
||||
<div class="app-chrome">
|
||||
<div class="app-chrome--left">
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="app-title"></div>
|
||||
</div>
|
||||
<div class="app-chrome--center">
|
||||
<div class="app-chrome-item playback-controls">
|
||||
<template v-if="mkReady()">
|
||||
<div class="app-playback-controls">
|
||||
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist">
|
||||
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
|
||||
</div>
|
||||
<div class="song-progress">
|
||||
<input type="range" step="0.01" min="0"
|
||||
@change="mk.seekToTime($event.target.value)"
|
||||
:max="mk.currentPlaybackDuration"
|
||||
:value="mk.currentPlaybackProgress * 100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">❤️</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="app-chrome--right">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume" v-if="typeof mk.volume != 'undefined'">
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 22" version="1.1" fill="#fff"
|
||||
style="width: 100%; height: 100%; fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421">
|
||||
<path
|
||||
d="M16.811,12.75c0.245,-0.355 0.389,-0.786 0.389,-1.25c0,-1.215 -0.985,-2.2 -2.2,-2.2c-1.215,0 -2.2,0.985 -2.2,2.2c0,0.466 0.145,0.898 0.392,1.254l-0.83,1.047c-0.537,-0.616 -0.862,-1.42 -0.862,-2.301c0,-1.933 1.567,-3.5 3.5,-3.5c1.933,0 3.5,1.567 3.5,3.5c0,0.879 -0.324,1.683 -0.859,2.297l-0.83,-1.047Zm1.271,1.604c0.694,-0.749 1.118,-1.752 1.118,-2.854c0,-2.32 -1.88,-4.2 -4.2,-4.2c-2.32,0 -4.2,1.88 -4.2,4.2c0,1.103 0.425,2.107 1.121,2.857l-0.814,1.028c-0.993,-0.995 -1.607,-2.368 -1.607,-3.885c0,-3.038 2.462,-5.5 5.5,-5.5c3.038,0 5.5,2.462 5.5,5.5c0,1.515 -0.613,2.887 -1.604,3.882l-0.814,-1.028Zm1.252,1.58c1.151,-1.126 1.866,-2.697 1.866,-4.434c0,-3.424 -2.776,-6.2 -6.2,-6.2c-3.424,0 -6.2,2.776 -6.2,6.2c0,1.739 0.716,3.311 1.869,4.437l-0.811,1.023c-1.452,-1.368 -2.358,-3.308 -2.358,-5.46c0,-4.142 3.358,-7.5 7.5,-7.5c4.142,0 7.5,3.358 7.5,7.5c0,2.15 -0.905,4.089 -2.355,5.457l-0.811,-1.023Zm-0.227,2.066l-8.219,0c-0.355,0 -0.515,-0.434 -0.27,-0.717l4.058,-5.12c0.178,-0.217 0.474,-0.217 0.652,0l4.058,5.12c0.237,0.283 0.085,0.717 -0.279,0.717Z"
|
||||
style="fill-rule:nonzero"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small queue"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small lyrics"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="window-controls">
|
||||
<div class="minimize"></div>
|
||||
<div class="minmax"></div>
|
||||
<div class="close"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button previous" @click="mk.skipToPreviousItem()"></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>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button next" @click="mk.skipToNextItem()"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item">
|
||||
<button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
|
||||
@click="mk.repeatMode = 1"></button>
|
||||
<button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
|
||||
v-else-if="mk.repeatMode == 1"></button>
|
||||
<button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
|
||||
v-else-if="mk.repeatMode == 2"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-navigation">
|
||||
<div id="app-sidebar">
|
||||
<div class="app-sidebar-header">
|
||||
<div class="search-input-container">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search" placeholder="Search..." class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-sidebar-content">
|
||||
<!-- Think the special category could be a iframe, so we wouldn't need to update the entire site everytime-->
|
||||
<div class="app-sidebar-header-text">
|
||||
🎉Special
|
||||
</div>
|
||||
<button class="app-sidebar-item" href="https://music.apple.com/replay" target="_blank">
|
||||
<div></div>
|
||||
<div>Replay</div>
|
||||
</button>
|
||||
<div class="app-sidebar-header-text">
|
||||
Apple Music
|
||||
</div>
|
||||
<button class="app-sidebar-item">
|
||||
<div></div>
|
||||
<div>Listen Now</div>
|
||||
</button>
|
||||
<button class="app-sidebar-item active">Browse</button>
|
||||
<button class="app-sidebar-item">Radio</button>
|
||||
<div class="app-sidebar-header-text">
|
||||
Library
|
||||
</div>
|
||||
<button class="app-sidebar-item">Songs</button>
|
||||
<button class="app-sidebar-item">Albums</button>
|
||||
<button class="app-sidebar-item">Artists</button>
|
||||
<button class="app-sidebar-item">Made For You</button>
|
||||
<div class="app-sidebar-header-text">
|
||||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="i in 32">Playist</button>
|
||||
</div>
|
||||
<div class="app-sidebar-footer">
|
||||
<input type="range" class="display--small">
|
||||
<button class="app-sidebar-button" style="width:100%">
|
||||
<div class="sidebar-user-icon">
|
||||
|
||||
<div class="app-chrome--center">
|
||||
<div class="app-chrome-item playback-controls">
|
||||
<template v-if="mkReady()">
|
||||
<div class="app-playback-controls">
|
||||
<div class="artwork" :style="{'--artwork': getNowPlayingArtwork(42)}"></div>
|
||||
<div class="playback-info">
|
||||
<div class="song-name">
|
||||
{{ mk.nowPlayingItem["attributes"]["name"] }}
|
||||
</div>
|
||||
<div class="song-artist">
|
||||
{{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{
|
||||
mk.nowPlayingItem["attributes"]["albumName"] }}
|
||||
</div>
|
||||
<div class="song-progress">
|
||||
<input type="range" step="0.01" min="0"
|
||||
@change="mk.seekToTime($event.target.value)"
|
||||
:max="mk.currentPlaybackDuration"
|
||||
:value="playerLCD.playbackDuration">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-user-text">Cider User</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<button class="md-btn md-btn-primary" @click="init()">Start MusicKit</button>
|
||||
<br>
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<br>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
<div class="actions">❤️</div>
|
||||
</div>
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button></div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
||||
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
|
||||
</p>
|
||||
<div class="media-item--small">
|
||||
<div class="artwork">
|
||||
|
||||
</div>
|
||||
<div class="text">
|
||||
Text
|
||||
</div>
|
||||
<div class="subtext">
|
||||
Subtext
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
|
||||
<button class="md-btn">Button</button>
|
||||
<button class="md-btn md-btn-primary">Button</button>
|
||||
Now Playing:
|
||||
<p data-apple-music-now-playing></p>
|
||||
<button data-apple-music-add-to-library="1558534271">add "never gonna give you up" to library</button>
|
||||
|
||||
</div>
|
||||
<div class="app-drawer" v-if="drawertest">
|
||||
|
||||
</div>
|
||||
<div class="app-chrome--right">
|
||||
<div class="app-chrome-item volume display--large">
|
||||
<input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
|
||||
v-if="typeof mk.volume != 'undefined'">
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 22" version="1.1" fill="#fff"
|
||||
style="width: 100%; height: 100%; fill-rule: evenodd; clip-rule: evenodd; stroke-linejoin: round; stroke-miterlimit: 1.41421">
|
||||
<path
|
||||
d="M16.811,12.75c0.245,-0.355 0.389,-0.786 0.389,-1.25c0,-1.215 -0.985,-2.2 -2.2,-2.2c-1.215,0 -2.2,0.985 -2.2,2.2c0,0.466 0.145,0.898 0.392,1.254l-0.83,1.047c-0.537,-0.616 -0.862,-1.42 -0.862,-2.301c0,-1.933 1.567,-3.5 3.5,-3.5c1.933,0 3.5,1.567 3.5,3.5c0,0.879 -0.324,1.683 -0.859,2.297l-0.83,-1.047Zm1.271,1.604c0.694,-0.749 1.118,-1.752 1.118,-2.854c0,-2.32 -1.88,-4.2 -4.2,-4.2c-2.32,0 -4.2,1.88 -4.2,4.2c0,1.103 0.425,2.107 1.121,2.857l-0.814,1.028c-0.993,-0.995 -1.607,-2.368 -1.607,-3.885c0,-3.038 2.462,-5.5 5.5,-5.5c3.038,0 5.5,2.462 5.5,5.5c0,1.515 -0.613,2.887 -1.604,3.882l-0.814,-1.028Zm1.252,1.58c1.151,-1.126 1.866,-2.697 1.866,-4.434c0,-3.424 -2.776,-6.2 -6.2,-6.2c-3.424,0 -6.2,2.776 -6.2,6.2c0,1.739 0.716,3.311 1.869,4.437l-0.811,1.023c-1.452,-1.368 -2.358,-3.308 -2.358,-5.46c0,-4.142 3.358,-7.5 7.5,-7.5c4.142,0 7.5,3.358 7.5,7.5c0,2.15 -0.905,4.089 -2.355,5.457l-0.811,-1.023Zm-0.227,2.066l-8.219,0c-0.355,0 -0.515,-0.434 -0.27,-0.717l4.058,-5.12c0.178,-0.217 0.474,-0.217 0.652,0l4.058,5.12c0.237,0.283 0.085,0.717 -0.279,0.717Z"
|
||||
style="fill-rule:nonzero"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small queue"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item generic">
|
||||
<button class="playback-button--small lyrics"></button>
|
||||
</div>
|
||||
<div class="app-chrome-item full-height">
|
||||
<div class="window-controls">
|
||||
<div class="minimize" onclick="ipcRenderer.send('minimize')"></div>
|
||||
<div class="minmax" onclick="ipcRenderer.send('maximize')"></div>
|
||||
<div class="close" onclick="ipcRenderer.send('close')"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-artwork"></div>
|
||||
<div class="app-navigation">
|
||||
<div id="app-sidebar">
|
||||
<div class="app-sidebar-header">
|
||||
<div class="search-input-container">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
spellcheck="false"
|
||||
@click="showSearch()"
|
||||
@change="showSearch();searchQuery()"
|
||||
placeholder="Search..."
|
||||
v-model="search.term"
|
||||
class="search-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-sidebar-content">
|
||||
<div class="app-sidebar-header-text">
|
||||
Apple Music
|
||||
</div>
|
||||
<sidebar-library-item name="Listen Now" page="listen_now"></sidebar-library-item>
|
||||
<sidebar-library-item name="Browse" page="browse"></sidebar-library-item>
|
||||
<sidebar-library-item name="Radio" page="radio"></sidebar-library-item>
|
||||
<div class="app-sidebar-header-text">
|
||||
Library
|
||||
</div>
|
||||
<sidebar-library-item name="Songs" page="library-songs"></sidebar-library-item>
|
||||
<sidebar-library-item name="Albums" page="library-albums"></sidebar-library-item>
|
||||
<sidebar-library-item name="Artists" page="library-artists"></sidebar-library-item>
|
||||
<sidebar-library-item name="Made For You" page="library-madeforyou"></sidebar-library-item>
|
||||
<div class="app-sidebar-header-text">
|
||||
Playlists
|
||||
</div>
|
||||
<button class="app-sidebar-item" v-for="item in playlists.listing" :key="item.id" href="item.href">
|
||||
{{ item.attributes.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="app-sidebar-footer">
|
||||
<input type="range" class="display--small">
|
||||
<button class="app-sidebar-button" style="width:100%">
|
||||
<div class="sidebar-user-icon">
|
||||
|
||||
</div>
|
||||
<div class="sidebar-user-text">Cider User</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app-content">
|
||||
<!-- Browse -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'browse'">
|
||||
<div class="content-inner">
|
||||
<button id="apple-music-authorize" class="md-btn md-btn-primary" @click="init()">Start MusicKit
|
||||
</button>
|
||||
<button id="apple-music-unauthorize" class="md-btn md-btn-primary" @click="unauthorize()">Stop
|
||||
MusicKit
|
||||
</button>
|
||||
<br>
|
||||
<template v-if="mk.nowPlayingItem">
|
||||
currentPlaybackProgress: {{ app.mk.currentPlaybackProgress }}
|
||||
<br>
|
||||
currentPlaybackDuration: {{ app.mk.currentPlaybackDuration }}
|
||||
</template>
|
||||
<div><input type="text" v-model="quickPlayQuery">
|
||||
<button @click="quickPlay(quickPlayQuery)">Play</button>
|
||||
</div>
|
||||
<h1 class="header-text">Browse</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt
|
||||
consectetur, nisl nunc euismod nisi, eu porttitor nisl nisi euismod nisi.
|
||||
</p>
|
||||
<div class="media-item--small">
|
||||
<div class="artwork">
|
||||
|
||||
</div>
|
||||
<div class="text">
|
||||
Text
|
||||
</div>
|
||||
<div class="subtext">
|
||||
Subtext
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<h1 class="header-text">Listen Now</h1>
|
||||
<div class="winbox">
|
||||
<div class="fancy">990kbps</div>
|
||||
<div class="">
|
||||
<button class="md-btn md-btn-primary">Audio Quality Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="md-btn" @click="drawertest = !drawertest">Toggle Drawer</button>
|
||||
<button class="md-btn">Button</button>
|
||||
<button class="md-btn md-btn-primary">Button</button>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Listen Now -->
|
||||
<transition v-on:enter="getListenNow()" name="wpfade">
|
||||
<template v-if="page == 'listen_now'" @created="console.log('listennow')">
|
||||
<cider-listen-now :data="listennow"></cider-listen-now>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Radio -->
|
||||
<transition v-on:enter="getRadioStations()" name="wpfade">
|
||||
<template v-if="page == 'radio'" @created="console.log('radio')">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Radio</h1>
|
||||
<h3>Recent Stations</h3>
|
||||
<mediaitem-square :item="item" v-for="item in radio.personal"></mediaitem-square>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Search -->
|
||||
<transition name="wpfade">
|
||||
<template v-if="page == 'search'">
|
||||
<cider-search :search="search"></cider-search>
|
||||
</template>
|
||||
</transition>
|
||||
<!-- Library - Songs -->
|
||||
<transition name="wpfade" v-on:enter="getLibrarySongs()">
|
||||
<template v-if="page == 'library-songs'">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Songs</h1>
|
||||
<div class="search-input-container" style="width:100%;margin: 16px 0px;">
|
||||
<div class="search-input--icon"></div>
|
||||
<input type="search"
|
||||
style="width:100%;"
|
||||
spellcheck="false"
|
||||
placeholder="Search..."
|
||||
class="search-input">
|
||||
</div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in library.songs.listing"></mediaitem-list-item>
|
||||
</div>
|
||||
</template>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="app-drawer" v-if="drawertest">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js"></script>
|
||||
<script src="index.js?v=1"></script>
|
||||
<transition name="wpfade">
|
||||
<img v-show="chrome.artworkReady"
|
||||
@load="chrome.artworkReady = true"
|
||||
class="bg-artwork"
|
||||
:src="getNowPlayingArtworkBG(32)">
|
||||
</transition>
|
||||
<transition name="wpfade">
|
||||
<div class="bg-artwork--placeholder" v-else></div>
|
||||
</transition>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="text/x-template" id="cider-listen-now">
|
||||
<div class="content-inner">
|
||||
<h1 class="header-text">Listen Now</h1>
|
||||
<template v-for="recom in data.data">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>{{ recom.attributes.title ? recom.attributes.title.stringForDisplay : ""}}</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="recom.relationships.contents.data.length >= 10">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal :items="recom.relationships.contents.data.limit(10)"></mediaitem-scroller-horizontal>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
||||
<script type="text/x-template" id="cider-search">
|
||||
<div class="content-inner">
|
||||
<div class="row">
|
||||
<div class="col-sm" style="width: auto;" v-if="getTopResult()">
|
||||
<template >
|
||||
<h3>Top Result</h3>
|
||||
<mediaitem-square :item="getTopResult()"></mediaitem-square>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col" v-if="search.results.songs">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Songs</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.songs.data.length >= 6">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<mediaitem-list-item :item="item"
|
||||
v-for="item in search.results.songs.data.limit(6)"></mediaitem-list-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="search.results['meta']">
|
||||
<template v-if="search.results.albums">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Albums</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.albums.data.length >= 10">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-scroller-horizontal :items="search.results.albums.data.limit(10)"></mediaitem-scroller-horizontal>
|
||||
</template>
|
||||
<template v-if="search.results.artists">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Artists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.artists.data.length >= 5">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.artists.data.limit(5)"></mediaitem-square>
|
||||
</template>
|
||||
<template v-if="search.results.playlists">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h3>Playlists</h3>
|
||||
</div>
|
||||
<div class="col-auto flex-center" v-if="search.results.playlists.data.length >= 10">
|
||||
<button class="cd-btn-seeall">See All</button>
|
||||
</div>
|
||||
</div>
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in search.results.playlists.data.limit(10)"></mediaitem-square>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="am-musiccovershelf">
|
||||
<h1>{{ component.attributes.title.stringForDisplay }}</h1>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="sidebar-library-item">
|
||||
<button class="app-sidebar-item"
|
||||
:class="$parent.getSidebarItemClass(page)"
|
||||
@click="$parent.page = page">{{ name }}
|
||||
</button>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-scroller-horizontal">
|
||||
<template>
|
||||
<div class="cd-hmedia-scroller">
|
||||
<mediaitem-square :item="item"
|
||||
v-for="item in items"></mediaitem-square>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-list-item">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-list-item">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 34)}
|
||||
"></div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
<template v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
<template v-if="item.attributes.albumName">
|
||||
- {{ item.attributes.albumName }}
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-rating" v-if="item.attributes.contentRating">
|
||||
{{ item.attributes.contentRating }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-hrect">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-hrect">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 70)}
|
||||
"></div>
|
||||
<div class="info-rect">
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis">
|
||||
{{ item.type }}
|
||||
<template v-if="item.attributes.artistName">
|
||||
∙ {{ item.attributes.artistName }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
<script type="text/x-template" id="mediaitem-square">
|
||||
<template>
|
||||
<div @click="app.playMediaItemById(item.id, item.type)"
|
||||
class="cd-mediaitem-square">
|
||||
<div class="artwork"
|
||||
:class="{'round': item.type == 'artists'}"
|
||||
:style="{'--artwork': app.getMediaItemArtwork(item.attributes.artwork.url, 128)}"></div>
|
||||
<div class="title text-overflow-elipsis">
|
||||
{{ item.attributes.name }}
|
||||
</div>
|
||||
<div class="subtitle text-overflow-elipsis" v-if="item.attributes.artistName">
|
||||
{{ item.attributes.artistName }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</script>
|
||||
|
||||
|
||||
<script src="https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js"></script>
|
||||
<script src="index.js?v=1"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,24 +1,244 @@
|
|||
Vue.component('sidebar-library-item', {
|
||||
template: '#sidebar-library-item',
|
||||
props: ['name', 'page', 'cd-click'],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('mediaitem-scroller-horizontal', {
|
||||
template: '#mediaitem-scroller-horizontal',
|
||||
props: ['items'],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
var app = new Vue({
|
||||
Vue.component('mediaitem-square', {
|
||||
template: '#mediaitem-square',
|
||||
props: ['item'],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('mediaitem-hrect', {
|
||||
template: '#mediaitem-hrect',
|
||||
props: ['item'],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('mediaitem-list-item', {
|
||||
template: '#mediaitem-list-item',
|
||||
props: ['item'],
|
||||
methods: {}
|
||||
});
|
||||
|
||||
Vue.component('cider-search', {
|
||||
template: "#cider-search",
|
||||
props: ['search'],
|
||||
methods: {
|
||||
getTopResult() {
|
||||
if (this.search.results["meta"]) {
|
||||
return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Vue.component('cider-listen-now', {
|
||||
template: "#cider-listen-now",
|
||||
props: ["data"]
|
||||
})
|
||||
|
||||
const MusicKitTools = {
|
||||
getHeader() {
|
||||
return new Headers({
|
||||
Authorization: 'Bearer ' + MusicKit.getInstance().developerToken,
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'Music-User-Token': '' + MusicKit.getInstance().musicUserToken
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// limit an array to a certain number of items
|
||||
Array.prototype.limit = function (n) {
|
||||
return this.slice(0, n);
|
||||
};
|
||||
|
||||
const app = new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
drawertest: false,
|
||||
mk: {},
|
||||
quickPlayQuery: ""
|
||||
quickPlayQuery: "",
|
||||
search: {
|
||||
term: "",
|
||||
results: {},
|
||||
limit: 10
|
||||
},
|
||||
playerLCD: {
|
||||
playbackDuration: 0
|
||||
},
|
||||
listennow: [],
|
||||
radio: {
|
||||
personal: []
|
||||
},
|
||||
library: {
|
||||
songs: {
|
||||
listing: [],
|
||||
meta: {total: 0}
|
||||
}
|
||||
},
|
||||
playlists: {
|
||||
listing: [],
|
||||
details: {}
|
||||
},
|
||||
chrome: {
|
||||
artworkReady: false
|
||||
},
|
||||
page: "browse"
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let self = this
|
||||
this.mk = MusicKit.getInstance()
|
||||
this.mk.authorize()
|
||||
this.$forceUpdate()
|
||||
|
||||
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
|
||||
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
|
||||
})
|
||||
|
||||
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
|
||||
self.chrome.artworkReady = false
|
||||
})
|
||||
|
||||
this.apiCall('https://api.music.apple.com/v1/me/library/playlists', res => {
|
||||
self.playlists.listing = res.data
|
||||
})
|
||||
document.body.removeAttribute("loading")
|
||||
},
|
||||
|
||||
getSidebarItemClass(page) {
|
||||
if (this.page == page) {
|
||||
return ["active"]
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
},
|
||||
async mkapi(method, library = false, term, params = {}, params2 = {}, attempts = 0) {
|
||||
if (attempts > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (library) {
|
||||
return await this.mk.api.library[method](term, params, params2)
|
||||
} else {
|
||||
return await this.mk.api[method](term, params, params2)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
return await this.mkapi(method, library, term, params, params2, attempts + 1)
|
||||
}
|
||||
},
|
||||
async getLibrarySongs() {
|
||||
var response = await this.mkapi("songs", true, "", {limit: 100}, {includeResponseMeta: !0})
|
||||
this.library.songs.listing = response.data
|
||||
this.library.songs.meta = response.meta
|
||||
},
|
||||
async getListenNow(attempt = 0) {
|
||||
if (attempt > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
this.listennow = await this.mk.api.personalRecommendations("",
|
||||
{
|
||||
name: "listen-now",
|
||||
with: "friendsMix,library,social",
|
||||
"art[social-profiles:url]": "c",
|
||||
"art[url]": "c,f",
|
||||
"omit[resource]": "autos",
|
||||
"relate[editorial-items]": "contents",
|
||||
extend: ["editorialCard", "editorialVideo"],
|
||||
"extend[albums]": ["artistUrl"],
|
||||
"extend[library-albums]": ["artistUrl"],
|
||||
"extend[playlists]": ["artistNames", "editorialArtwork"],
|
||||
"extend[library-playlists]": ["artistNames", "editorialArtwork"],
|
||||
"extend[social-profiles]": "topGenreNames",
|
||||
"include[albums]": "artists",
|
||||
"include[songs]": "artists",
|
||||
"include[music-videos]": "artists",
|
||||
"fields[albums]": ["artistName", "artistUrl", "artwork", "contentRating", "editorialArtwork", "editorialVideo", "name", "playParams", "releaseDate", "url"],
|
||||
"fields[artists]": ["name", "url"],
|
||||
"extend[stations]": ["airDate", "supportsAirTimeUpdates"],
|
||||
"meta[stations]": "inflectionPoints",
|
||||
types: "artists,albums,editorial-items,library-albums,library-playlists,music-movies,music-videos,playlists,stations,uploaded-audios,uploaded-videos,activities,apple-curators,curators,tv-shows,social-profiles,social-upsells",
|
||||
platform: "web"
|
||||
},
|
||||
{
|
||||
includeResponseMeta: !0,
|
||||
reload: !0
|
||||
});
|
||||
console.log(this.listennow)
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.getListenNow(attempt + 1)
|
||||
}
|
||||
},
|
||||
async getRadioStations(attempt = 0) {
|
||||
if (attempt > 3) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
this.radio.personal = await this.mkapi("recentRadioStations", false, "",
|
||||
{
|
||||
"platform": "web",
|
||||
"art[url]": "f"
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.getRadioStations(attempt + 1)
|
||||
}
|
||||
},
|
||||
unauthorize() {
|
||||
this.mk.unauthorize()
|
||||
},
|
||||
showSearch() {
|
||||
this.page = "search"
|
||||
},
|
||||
playMediaItemById(id, kind) {
|
||||
this.mk.setQueue({[kind]: [id]}).then(function (queue) {
|
||||
MusicKit.getInstance().play()
|
||||
})
|
||||
},
|
||||
searchQuery() {
|
||||
let self = this
|
||||
this.mk.api.search(this.search.term,
|
||||
{
|
||||
types: "songs,artists,albums,playlists",
|
||||
limit: self.search.limit
|
||||
}).then(function (results) {
|
||||
self.search.results = results
|
||||
})
|
||||
},
|
||||
mkReady() {
|
||||
if(this.mk["nowPlayingItem"]) {
|
||||
if (this.mk["nowPlayingItem"]) {
|
||||
return true
|
||||
}else{
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
getMediaItemArtwork(url, size = 64) {
|
||||
return `url("${url.replace('{w}', size).replace('{h}', size).replace('{f}', "webp").replace('{c}', "cc")}")`;
|
||||
},
|
||||
getNowPlayingArtworkBG(size = 600) {
|
||||
if(!this.mkReady()) {
|
||||
return ""
|
||||
}
|
||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||
return `${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}`;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
},
|
||||
getNowPlayingArtwork(size = 600) {
|
||||
if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) {
|
||||
return `url("${this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size)}")`;
|
||||
|
|
@ -28,26 +248,71 @@ var app = new Vue({
|
|||
},
|
||||
quickPlay(query) {
|
||||
let self = this
|
||||
MusicKit.getInstance().api.search(query, { limit: 2, types: 'songs' }).then(function (data) {
|
||||
MusicKit.getInstance().setQueue({ song: data["songs"]['data'][0]["id"] }).then(function (queue) {
|
||||
MusicKit.getInstance().api.search(query, {limit: 2, types: 'songs'}).then(function (data) {
|
||||
MusicKit.getInstance().setQueue({song: data["songs"]['data'][0]["id"]}).then(function (queue) {
|
||||
MusicKit.getInstance().play()
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
self.$forceUpdate()
|
||||
}, 1000)
|
||||
})
|
||||
})
|
||||
},
|
||||
apiCall(url, callback) {
|
||||
const xmlHttp = new XMLHttpRequest();
|
||||
|
||||
xmlHttp.onreadystatechange = (e) => {
|
||||
if (xmlHttp.readyState !== 4) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (xmlHttp.status === 200) {
|
||||
console.log('SUCCESS', xmlHttp.responseText);
|
||||
callback(JSON.parse(xmlHttp.responseText));
|
||||
} else {
|
||||
console.warn('request_error');
|
||||
}
|
||||
};
|
||||
|
||||
xmlHttp.open("GET", url);
|
||||
xmlHttp.setRequestHeader("Authorization", "Bearer " + MusicKit.getInstance().developerToken);
|
||||
xmlHttp.setRequestHeader("Music-User-Token", "" + MusicKit.getInstance().musicUserToken);
|
||||
xmlHttp.setRequestHeader("Accept", "application/json");
|
||||
xmlHttp.setRequestHeader("Content-Type", "application/json");
|
||||
xmlHttp.responseType = "text";
|
||||
xmlHttp.send();
|
||||
},
|
||||
fetchPlaylist(id, callback) {
|
||||
// id can be found in playlist.attributes.playParams.globalId
|
||||
this.mk.api.playlist(id).then(res => {
|
||||
callback(res)
|
||||
})
|
||||
|
||||
// tracks are found in relationship.data
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener('musickitloaded', function() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
document.addEventListener('musickitloaded', function () {
|
||||
// MusicKit global is now defined
|
||||
MusicKit.configure({
|
||||
developerToken: `${urlParams.get('auth') || ''}`,
|
||||
app: {
|
||||
name: 'My Cool Web App',
|
||||
build: '1978.4.1'
|
||||
}
|
||||
});
|
||||
fetch("https://beta.music.apple.com/")
|
||||
.then(response => response.text())
|
||||
.then(data => {
|
||||
var el = document.createElement("html");
|
||||
el.innerHTML = data;
|
||||
var u = el.querySelector(`[name="desktop-music-app/config/environment"]`)
|
||||
var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content")));
|
||||
console.log(amwebCFG.MEDIA_API.token)
|
||||
// eh fuck it lets just expose the token
|
||||
MusicKit.configure({
|
||||
developerToken: "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IldlYlBsYXlLaWQifQ.eyJpc3MiOiJBTVBXZWJQbGF5IiwiaWF0IjoxNjM2NTYwMjc1LCJleHAiOjE2NTIxMTIyNzV9.is4KeAN_M9FWTfuw9zMV2lgHSSdPqEV2SX-XfCuEYY4qtmjbo-NjebHCageS28z0P0erksqql9rtsoizE4hsJg",
|
||||
app: {
|
||||
name: 'Cider',
|
||||
build: '1978.4.1'
|
||||
}
|
||||
});
|
||||
setTimeout(() => {
|
||||
app.init()
|
||||
}, 1000)
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -2,6 +2,10 @@
|
|||
|
||||
:root {
|
||||
--appleEase: cubic-bezier(0.42, 0, 0.58, 1);
|
||||
--mediaItemShadow-Shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%), 0 8px 40px rgb(0 0 0 / 0.55);
|
||||
--mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
|
||||
--mediaItemRadius: 4px;
|
||||
--mediaItemRadiusRound: 100%;
|
||||
--keyColor: #fa586a;
|
||||
--keyColor-rgb: 250, 88, 106;
|
||||
--keyColor-rollover: #ff8a9c;
|
||||
|
|
@ -27,6 +31,12 @@ body {
|
|||
|
||||
body {
|
||||
background: transparent;
|
||||
transition: opacity .10s var(--appleEase);
|
||||
}
|
||||
|
||||
body[loading] {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -76,17 +86,45 @@ body {
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.bg-artwork--placeholder {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #222;
|
||||
z-index: -1;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.70;
|
||||
}
|
||||
|
||||
|
||||
.bg-artwork {
|
||||
position: absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: url("artwork.jpeg");
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--artwork);
|
||||
z-index: -1;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
filter: blur(60px) saturate(180%);
|
||||
display: none;
|
||||
opacity: 0.70;
|
||||
transition: opacity .25s var(--appleEase);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
[artwork-hidden] {
|
||||
transition: opacity .25s var(--appleEase);
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
@ -132,30 +170,39 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
|
||||
#app-main {
|
||||
display: flex;
|
||||
width:100%;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#app-sidebar {
|
||||
/* background-color: var(--color1); */
|
||||
height:100%;
|
||||
width:260px;
|
||||
display:flex;
|
||||
height: 100%;
|
||||
width: 260px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#app-content {
|
||||
background-color: var(--color2);
|
||||
height:100%;
|
||||
width:100%;
|
||||
padding: 32px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
border-radius: 10px 0px;
|
||||
border-left: 1px solid rgb(0 0 0 / 25%);
|
||||
border-top: 1px solid rgb(0 0 0 / 25%);
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.content-inner {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -195,8 +242,8 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
height: 100%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background-image: url('assets/search.svg');
|
||||
background-position: 10px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -223,10 +270,10 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.app-sidebar-button {
|
||||
width:100%;
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
font-family: inherit;
|
||||
display:flex;
|
||||
display: flex;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgb(200 200 200 / 5%);
|
||||
background: rgb(100 100 100 / 25%);
|
||||
|
|
@ -235,7 +282,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.app-sidebar-button>.sidebar-user-icon {
|
||||
.app-sidebar-button > .sidebar-user-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -244,9 +291,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.app-sidebar-button>.sidebar-user-text {
|
||||
width:100%;
|
||||
display:flex;
|
||||
.app-sidebar-button > .sidebar-user-text {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
margin: 6px 12px;
|
||||
}
|
||||
|
|
@ -255,7 +302,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
padding: 8px;
|
||||
overflow-y: scroll;
|
||||
overflow-y: overlay;
|
||||
height:100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-sidebar-content::-webkit-scrollbar {
|
||||
|
|
@ -308,13 +355,13 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
position: absolute;
|
||||
top: calc(100% - 72%);
|
||||
border-radius: 10px;
|
||||
left:0px;
|
||||
background:var(--keyColor);
|
||||
left: 0px;
|
||||
background: var(--keyColor);
|
||||
}
|
||||
|
||||
.app-chrome {
|
||||
background:var(--color1);
|
||||
width:100%;
|
||||
background: var(--color1);
|
||||
width: 100%;
|
||||
height: var(--chromeHeight);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -323,10 +370,9 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
|
||||
.app-chrome .app-chrome--left,
|
||||
.app-chrome .app-chrome--center,
|
||||
.app-chrome .app-chrome--right
|
||||
{
|
||||
.app-chrome .app-chrome--right {
|
||||
height: 100%;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -366,25 +412,25 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
|
||||
transition: all var(--appleTransition);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:hover {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
|
||||
background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb:active {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
|
||||
background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range] {
|
||||
width:100%;
|
||||
.app-chrome .app-chrome-item.volume > input[type=range] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range] {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
|
|
@ -393,7 +439,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
|
|
@ -403,7 +449,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-runnable-track {
|
||||
.app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
|
||||
-webkit-appearance: none;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
|
@ -419,7 +465,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-title {
|
||||
.app-chrome .app-chrome-item > .app-title {
|
||||
width: 100px;
|
||||
font-size: 13px;
|
||||
background: url("./logotmp.png");
|
||||
|
|
@ -433,109 +479,128 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls {
|
||||
.app-chrome .app-chrome-item > .window-controls {
|
||||
width: 138px;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div {
|
||||
.app-chrome .app-chrome-item > .window-controls > div {
|
||||
height: 100%;
|
||||
width: 32px;
|
||||
}
|
||||
.app-chrome .app-chrome-item>.window-controls>div:hover {
|
||||
|
||||
.app-chrome .app-chrome-item > .window-controls > div:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
.app-chrome .app-chrome-item>.window-controls>div.close {
|
||||
width:100%;
|
||||
height:100%;
|
||||
|
||||
.app-chrome .app-chrome-item > .window-controls > div.close {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: var(--gfx-closeBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div.minmax {
|
||||
.app-chrome .app-chrome-item > .window-controls > div.minmax {
|
||||
background-image: var(--gfx-maxBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
width:100%;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.window-controls>div.minimize {
|
||||
.app-chrome .app-chrome-item > .window-controls > div.minimize {
|
||||
background-image: var(--gfx-minBtn);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-webkit-app-region: no-drag;
|
||||
width:100%;
|
||||
height:100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item.playback-controls {
|
||||
width: 80%;
|
||||
height: 90%;
|
||||
display:flex;
|
||||
display: flex;
|
||||
max-width: 500px;
|
||||
border-left: 1px solid rgb(200 200 200 / 8%);
|
||||
border-right: 1px solid rgb(200 200 200 / 8%);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-name {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-name {
|
||||
font-weight: 600;
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-artist {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-artist {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
overflow: hidden;
|
||||
/* animation: marquee 10s linear infinite; */
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-progress {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-progress {
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range] {
|
||||
@keyframes marquee {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range] {
|
||||
appearance: none;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-webkit-slider-thumb {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 4px;
|
||||
height:12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
background: var(--keyColor);
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .song-progress>input[type=range]::-moz-range-thumb {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .song-progress > input[type=range]::-moz-range-thumb {
|
||||
width: 8px;
|
||||
height:8px;
|
||||
height: 8px;
|
||||
border-radius: 100%;
|
||||
background: var(--keyColor);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .artwork {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .artwork {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background-image: var(--artwork);
|
||||
|
|
@ -549,18 +614,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .actions {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .actions {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 2px;
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .playback-info {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .playback-info {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -569,27 +634,29 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.app-chrome .app-chrome-item>.app-playback-controls .playback-info > div {
|
||||
.app-chrome .app-chrome-item > .app-playback-controls .playback-info > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.app-navigation {
|
||||
background:var(--color1);
|
||||
height:calc(100% - var(--chromeHeight));
|
||||
width:100%;
|
||||
display:flex;
|
||||
background: var(--color1);
|
||||
height: calc(100% - var(--chromeHeight));
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.display--small {
|
||||
display: none!important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Window is smaller <= 1023px width */
|
||||
@media only screen and (max-width: 1023px) {
|
||||
.display--small {
|
||||
display: inherit!important;
|
||||
display: inherit !important;
|
||||
}
|
||||
|
||||
.display--large {
|
||||
display: none!important;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -609,7 +676,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.media-item--small .artwork {
|
||||
background:red;
|
||||
background: red;
|
||||
margin: 6px;
|
||||
border-radius: 100%;
|
||||
width: 90px;
|
||||
|
|
@ -931,7 +998,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
.list-entry .handle {
|
||||
height: 100%;
|
||||
width: 28px;
|
||||
background:var(--keyColor);
|
||||
background: var(--keyColor);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -1091,7 +1158,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
-webkit-mask-image: -webkit-gradient(linear, left 95%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
display:flex;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
|
|
@ -1198,6 +1265,205 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
/* Cider */
|
||||
|
||||
.text-overflow-elipsis {
|
||||
min-width: 0px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* horizontal media scroller */
|
||||
.cd-hmedia-scroller {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.cd-hmedia-scroller::-webkit-scrollbar-thumb{
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb{
|
||||
box-shadow: inset 0px 0px 10px 10px rgb(200 200 200 / 50%);
|
||||
}
|
||||
|
||||
/* mediaitem-list-item */
|
||||
.cd-mediaitem-list-item {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .info-rect {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .subtitle {
|
||||
width: 90%;
|
||||
font-size: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.cd-mediaitem-list-item .content-rating {
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
border-radius: 3px;
|
||||
background: rgb(200 200 200 / 15%);
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-right: 12px;
|
||||
flex: 0 0 auto;
|
||||
font-weight: 500;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* mediaitem-hrect */
|
||||
.cd-mediaitem-hrect {
|
||||
background: rgb(255 255 255 / 18%);
|
||||
width: 264px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: row;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .artwork {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: contain;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
background-repeat: no-repeat;
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .info-rect {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cd-mediaitem-hrect .subtitle {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
/* mediaitem-square */
|
||||
.cd-mediaitem-square {
|
||||
width: 200px;
|
||||
height: 190px;
|
||||
display: inline-flex;
|
||||
flex: 0 0 auto;
|
||||
flex-direction: column;
|
||||
font-size: 14px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square:hover {
|
||||
background: rgb(200 200 200 / 10%);
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .artwork {
|
||||
height: 128px;
|
||||
width: 128px;
|
||||
background: blue;
|
||||
border-radius: var(--mediaItemRadius);
|
||||
background: var(--artwork);
|
||||
background-size: cover;
|
||||
box-shadow: var(--mediaItemShadow);
|
||||
flex: 0 0 auto;
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .artwork.round {
|
||||
border-radius: var(--mediaItemRadiusRound);
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .title {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cd-mediaitem-square .subtitle {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
.cd-btn-seeall {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
color: var(--keyColor);
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
border-radius: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.cd-btn-seeall:hover {
|
||||
cursor: pointer;
|
||||
background: rgb(200 200 200 / 10%)
|
||||
}
|
||||
|
||||
/* Cider */
|
||||
|
||||
/* Transitions */
|
||||
.wpfade-enter-active,
|
||||
.wpfade-leave-active {
|
||||
|
|
|
|||
|
|
@ -302,10 +302,11 @@ document.addEventListener('musickitloaded', function () {
|
|||
var u = el.querySelector(`[name="desktop-music-app/config/environment"]`)
|
||||
var amwebCFG = JSON.parse(decodeURIComponent(u.getAttribute("content")));
|
||||
console.log(amwebCFG.MEDIA_API.token)
|
||||
// eh fuck it lets just expose the token
|
||||
MusicKit.configure({
|
||||
developerToken: amwebCFG.MEDIA_API.token,
|
||||
developerToken: "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IldlYlBsYXlLaWQifQ.eyJpc3MiOiJBTVBXZWJQbGF5IiwiaWF0IjoxNjM2NTYwMjc1LCJleHAiOjE2NTIxMTIyNzV9.is4KeAN_M9FWTfuw9zMV2lgHSSdPqEV2SX-XfCuEYY4qtmjbo-NjebHCageS28z0P0erksqql9rtsoizE4hsJg",
|
||||
app: {
|
||||
name: 'My Cool Web App',
|
||||
name: 'Cider',
|
||||
build: '1978.4.1'
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue