diff --git a/resources/cider-ui-tests/assets/transparent.png b/resources/cider-ui-tests/assets/transparent.png
new file mode 100644
index 00000000..5da64773
Binary files /dev/null and b/resources/cider-ui-tests/assets/transparent.png differ
diff --git a/resources/cider-ui-tests/index.js b/resources/cider-ui-tests/index.js
index b4e53abf..61bae10e 100644
--- a/resources/cider-ui-tests/index.js
+++ b/resources/cider-ui-tests/index.js
@@ -140,7 +140,8 @@ const app = new Vue({
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
self.lyriccurrenttime = app.mk.currentPlaybackTime;
- app.getActiveLyric()
+
+ if (self.lyricon) app.getActiveLyric();
// animated dot like AM - bad perf
if (self.lyricon && self.drawertest){
let currentLine = document.querySelector(`.lyric-line.active`)
@@ -231,13 +232,41 @@ const app = new Vue({
"extend": "artistBio,bornOrFormed,editorialArtwork,editorialVideo,isGroup,origin,hero",
"extend[playlists]": "trackCount",
"omit[resource:songs]": "relationships",
- "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,trackCount",
+ "fields[albums]": "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialVideo,name,playParams,releaseDate,url,trackCount",
"limit[artists:top-songs]": 20,
"art[url]": "f"
}, {includeResponseMeta: !0})
this.artistPage.data = artistData.data[0]
this.page = "artist-page"
},
+ hashCode(str) {
+ var hash = 0, i, chr;
+ if (str.length === 0) return hash;
+ for (i = 0; i < str.length; i++) {
+ chr = str.charCodeAt(i);
+ hash = ((hash << 5) - hash) + chr;
+ hash |= 0; // Convert to 32bit integer
+ }
+ return hash;
+ },
+ playAnimatedArtwork(url){
+ if (Hls.isSupported()) {
+ var video = document.querySelector(`[vid="${app.hashCode(url)}"] > video`)
+ console.log('supported');
+ var hls = new Hls();
+ // bind them together
+ if (video){
+ hls.attachMedia(video);
+ hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+ console.log('video and hls.js are now bound together !');
+ hls.loadSource(url);
+ hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
+ video.play();
+ return "";
+ });
+ });} else { console.log("hso"); return "";}
+ } else { return "";}
+ },
getArtistPalette(artist){
if(artist["attributes"]["artwork"]) {
return {
@@ -264,7 +293,7 @@ const app = new Vue({
else if(!kind.toString().includes("radioStation") && !kind.toString().includes("song") && !kind.toString().includes("musicVideo") && !kind.toString().includes("uploadedVideo"))
{app.page = (kind) + "_"+ (id);
console.log("oks");
- app.getTypeFromID((kind),(id), (isLibrary));} else {
+ app.getTypeFromID((kind),(id), (isLibrary),{extend: "editorialVideo"});} else {
app.playMediaItemById((id),(kind), (isLibrary), item.attributes.url ?? '')
}
document.querySelector("#app-content").scrollTop = 0
@@ -1055,4 +1084,5 @@ var checkIfScrollIsStatic = setInterval(() => {
}
position = document.getElementsByClassName('lyric-body')[0].scrollTop } catch (e){}
- }, 50)
\ No newline at end of file
+ }, 50);
+
diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index 70b9fd19..44e4130b 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -1366,6 +1366,7 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
align-items: center;
justify-content: space-between;
min-height: 300px;
+ position: relative;
}
.artist-page .artist-image {
@@ -1426,6 +1427,49 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
width: 100%;
height: 100%;
}
+.mediaitem-artwork .animatedartwork-view-box .animated{
+ position: absolute;
+ top: 0px;
+ width: 200px;
+ height: 200px;
+}
+
+.mediaitem-artwork .animatedartwork-view-box .animated > video {
+ width: 200px;
+ height: 200px;
+}
+
+.mediaitem-artwork .animatedartwork-view-box{
+ position: absolute;
+ top: 0px;
+ width: 200px;
+ height: 200px;
+}
+
+.artist-header .animated{
+ width: 100%;
+ height: 100%;
+ align-self: center;
+ position: absolute;
+ overflow: hidden;
+ box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
+}
+
+.artist-header .row .col.flex-center{
+ z-index: 4;
+}
+
+.artist-header .animated > video {
+ overflow: hidden;
+ height: 100%;
+ width: 100%;
+ min-height: 56.25vw;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%,-50%);
+
+}
.mediaitem-artwork.rounded {
border-radius: 100%;
@@ -1963,4 +2007,21 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
#apple-music-video-player-controls:hover{
opacity: 1;
+}
+
+img[src=""] {
+ text-indent: -10000px;
+}
+
+div#captions {
+ font-size: 1.2rem;
+ position: absolute;
+ top: 85%;
+ text-align: center;
+ width: auto;
+ align-self: center;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0,0,0,0.6);
+ color: yellow;
}
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/animatedartwork-view.ejs b/resources/cider-ui-tests/views/components/animatedartwork-view.ejs
new file mode 100644
index 00000000..7f5a19c2
--- /dev/null
+++ b/resources/cider-ui-tests/views/components/animatedartwork-view.ejs
@@ -0,0 +1,20 @@
+
+
+
\ No newline at end of file
diff --git a/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs b/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
index e20320d2..4cae6dae 100644
--- a/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
+++ b/resources/cider-ui-tests/views/components/mediaitem-artwork.ejs
@@ -9,6 +9,9 @@
@@ -16,7 +19,7 @@
-
+
-