-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
+
-
-
-
-
-
-
-
- {{ mk.nowPlayingItem["attributes"]["name"] }}
-
-
- {{ mk.nowPlayingItem["attributes"]["artistName"] }} - {{ mk.nowPlayingItem["attributes"]["albumName"] }}
-
-
-
-
- ❤️
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/app-win/index.js b/docs/app-win/index.js
index 56a812bc..366d9a3c 100644
--- a/docs/app-win/index.js
+++ b/docs/app-win/index.js
@@ -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)
+ });
+
});
\ No newline at end of file
diff --git a/docs/app-win/style.css b/docs/app-win/style.css
index 7d764a91..e93d668a 100644
--- a/docs/app-win/style.css
+++ b/docs/app-win/style.css
@@ -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 {
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index baa97919..366d9a3c 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -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'
}
});