and this is why you should test your code before pushing

This commit is contained in:
maikirakiwi 2022-07-08 21:04:39 -07:00
parent 92ce7b38f3
commit 62fd9d825e
2 changed files with 25 additions and 41 deletions

View file

@ -925,7 +925,7 @@ const app = new Vue({
}) })
this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => { this.mk.addEventListener(MusicKit.Events.playbackTimeDidChange, (a) => {
self.lyriccurrenttime = self.mk.currentPlaybackTime + app.lyricOffset self.lyriccurrenttime = self.mk.currentPlaybackTime + (app.lyricOffset / 2)
this.currentSongInfo = a this.currentSongInfo = a
self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime) self.playerLCD.playbackDuration = (self.mk.currentPlaybackTime)
// wsapi // wsapi
@ -3192,7 +3192,8 @@ const app = new Vue({
applied +=2; applied +=2;
} }
else if (app.lyrics[applied].line === raw_lines[i].childNodes[0].childNodes[0].textContent) { else if (app.lyrics[applied].line === raw_lines[i].childNodes[0].childNodes[0].textContent) {
// Do nothing // Skip this line
applied +=1;
} }
else { else {
app.lyrics[applied].translation = raw_lines[i].childNodes[0].childNodes[0].textContent; app.lyrics[applied].translation = raw_lines[i].childNodes[0].childNodes[0].textContent;

View file

@ -11334,11 +11334,11 @@ fieldset:disabled .btn {
} }
/* mediaitem-square */ /* mediaitem-square */
.cd-mediaitem-square { .cd-mediaitem-square {
--transitionDuration: 0.25s; --transitionDuration: 0.5s;
--scaleRate: 1.25; --scaleRate: 1.25;
--scaleRateArtwork: 1; --scaleRateArtwork: 1;
width: 200px; width: calc(160px * var(--windowRelativeScale));
height: 200px; height: calc(200px * var(--windowRelativeScale));
display: inline-flex; display: inline-flex;
flex: 0 0 auto; flex: 0 0 auto;
flex-direction: column; flex-direction: column;
@ -11346,14 +11346,13 @@ fieldset:disabled .btn {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 6px; border-radius: 6px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square .artwork-container { .cd-mediaitem-square .artwork-container {
position: relative; position: relative;
} }
.cd-mediaitem-square .artwork-container .artwork { .cd-mediaitem-square .artwork-container .artwork {
height: 150px; height: calc(140px * var(--windowRelativeScale));
width: 150px; width: calc(140px * var(--windowRelativeScale));
background: blue; background: blue;
border-radius: var(--mediaItemRadius); border-radius: var(--mediaItemRadius);
background: var(--artwork); background: var(--artwork);
@ -11361,7 +11360,6 @@ fieldset:disabled .btn {
flex: 0 0 auto; flex: 0 0 auto;
margin: 6px; margin: 6px;
cursor: pointer; cursor: pointer;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square .artwork-container .artwork .mediaitem-artwork { .cd-mediaitem-square .artwork-container .artwork .mediaitem-artwork {
box-shadow: unset; box-shadow: unset;
@ -11421,30 +11419,6 @@ fieldset:disabled .btn {
.cd-mediaitem-square .artwork-container:hover > .menu-btn { .cd-mediaitem-square .artwork-container:hover > .menu-btn {
opacity: 1; opacity: 1;
} }
@media (min-width: 1460px) {
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
--scaleRate: 1.1;
--scaleRateArtwork: 0.9;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
}
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
@media (min-width: 1550px) {
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
}
.cd-mediaitem-square:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) .artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
.cd-mediaitem-square .info-rect { .cd-mediaitem-square .info-rect {
width: 90%; width: 90%;
height: 100%; height: 100%;
@ -11488,10 +11462,12 @@ fieldset:disabled .btn {
.cd-mediaitem-square.mediaitem-video { .cd-mediaitem-square.mediaitem-video {
height: 200px; height: 200px;
width: 240px; width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square.mediaitem-video .artwork { .cd-mediaitem-square.mediaitem-video .artwork {
height: 120px; height: 120px;
width: 212px; width: 212px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
@media (min-width: 1460px) { @media (min-width: 1460px) {
.cd-mediaitem-square.mediaitem-video:not(.noscale) { .cd-mediaitem-square.mediaitem-video:not(.noscale) {
@ -11520,10 +11496,12 @@ fieldset:disabled .btn {
.cd-mediaitem-square.mediaitem-brick { .cd-mediaitem-square.mediaitem-brick {
height: 200px; height: 200px;
width: 240px; width: 240px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square.mediaitem-brick .artwork { .cd-mediaitem-square.mediaitem-brick .artwork {
height: 123px; height: 123px;
width: 220px; width: 220px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
@media (min-width: 1460px) { @media (min-width: 1460px) {
.cd-mediaitem-square.mediaitem-brick:not(.noscale) { .cd-mediaitem-square.mediaitem-brick:not(.noscale) {
@ -11550,12 +11528,14 @@ fieldset:disabled .btn {
} }
} }
.cd-mediaitem-square.mediaitem-small { .cd-mediaitem-square.mediaitem-small {
width: 140px; width: calc(140px, var(--windowRelativeScale));
height: 180px; height: calc(180px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square.mediaitem-small .artwork { .cd-mediaitem-square.mediaitem-small .artwork {
height: 128px; height: calc(128px, var(--windowRelativeScale));
width: 128px; width: calc(128px, var(--windowRelativeScale));
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square.mediaitem-card { .cd-mediaitem-square.mediaitem-card {
background: #ccc; background: #ccc;
@ -11566,6 +11546,7 @@ fieldset:disabled .btn {
position: relative; position: relative;
border-radius: calc(var(--mediaItemRadius) * 2); border-radius: calc(var(--mediaItemRadius) * 2);
box-shadow: var(--mediaItemShadow-ShadowSubtle); box-shadow: var(--mediaItemShadow-ShadowSubtle);
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
} }
.cd-mediaitem-square.mediaitem-card .artwork { .cd-mediaitem-square.mediaitem-card .artwork {
width: 230px; width: 230px;
@ -11645,7 +11626,7 @@ fieldset:disabled .btn {
.cd-mediaitem-square.mediaitem-card:hover .info-rect-card::before { .cd-mediaitem-square.mediaitem-card:hover .info-rect-card::before {
filter: brightness(0.3) blur(50px) saturate(180%); filter: brightness(0.3) blur(50px) saturate(180%);
} }
@media (min-width: 1460px) { @media (min-width: 1200px) {
.cd-mediaitem-square.mediaitem-card:not(.noscale) { .cd-mediaitem-square.mediaitem-card:not(.noscale) {
width: calc(230px * 1.1); width: calc(230px * 1.1);
height: calc(298px * 1.1); height: calc(298px * 1.1);
@ -11655,7 +11636,7 @@ fieldset:disabled .btn {
height: calc(230px * 1.1); height: calc(230px * 1.1);
} }
} }
@media (min-width: 1550px) { @media (min-width: 1400px) {
.cd-mediaitem-square.mediaitem-card:not(.noscale) { .cd-mediaitem-square.mediaitem-card:not(.noscale) {
width: calc(230px * 1.25); width: calc(230px * 1.25);
height: calc(298px * 1.25); height: calc(298px * 1.25);
@ -13995,7 +13976,7 @@ input[type=checkbox][switch]:checked:active::before {
right: 28px; right: 28px;
} }
.artist-page.animated .artist-header { .artist-page.animated .artist-header {
min-height: 500px; min-height: 80vh;
} }
.artist-page .artist-header { .artist-page .artist-header {
color: white; color: white;
@ -14080,6 +14061,7 @@ input[type=checkbox][switch]:checked:active::before {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
object-fit: cover;
} }
.artist-page .artist-header .row .col.flex-center { .artist-page .artist-header .row .col.flex-center {
z-index: 4; z-index: 4;
@ -14862,6 +14844,7 @@ input[type=checkbox][switch]:checked:active::before {
display: none; display: none;
} }
:root { :root {
--windowRelativeScale: 1;
--appleEase: cubic-bezier(0.42, 0, 0.58, 1); --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
--borderColor: rgba(200, 200, 200, 0.16); --borderColor: rgba(200, 200, 200, 0.16);
--mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16); --mediaItemShadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16);
@ -16598,7 +16581,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
} }
@media screen and (min-width: 1500px) { @media screen and (min-width: 1500px) {
.well.itemContainer.collection-list-square { .well.itemContainer.collection-list-square {
grid-template-columns: repeat(6, minmax(200px, 1fr)); grid-template-columns: repeat(5, minmax(200px, 1fr));
} }
} }
@media screen and (max-width: 1150px) { @media screen and (max-width: 1150px) {