fixes lyrics shifting whole view

This commit is contained in:
booploops 2022-01-03 20:30:39 -08:00
parent acbc4a8995
commit 4ca4f33826
2 changed files with 42 additions and 3 deletions

View file

@ -101,6 +101,25 @@ body[platform='linux'] {
background-size: 400% 400%; background-size: 400% 400%;
} }
.bgGradientMaterial {
position:relative;
}
.bgGradientMaterial::before {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 250%;
background-image: var(--bgColor);
content: "";
z-index: -1;
transform: rotateZ(0deg);
transform-origin: center;
animation: bgRotate 10s linear infinite;
filter: brightness(100%) saturate(200%) contrast(1.5);
}
#app::before { #app::before {
position: absolute; position: absolute;
top: -50%; top: -50%;

View file

@ -130,10 +130,30 @@
if(this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");} if(this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`)) {this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${prevLine}"]`).classList.remove("active");}
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active") this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).classList.add("active")
if (checkIfScrollIsStatic) { if (checkIfScrollIsStatic) {
this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({ let lyricElement = this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`)
behavior: "smooth", // this.$refs.lyricsview.querySelector(`.lyric-line[line-index="${i}"]`).scrollIntoView({
block: "center" // behavior: "smooth",
// block: "nearest", inline: 'start'
// })
let parent = lyricElement.parentElement
let parentRect = parent.getBoundingClientRect()
let lyricElementRect = lyricElement.getBoundingClientRect()
let parentScrollTop = parent.scrollTop
let parentScrollLeft = parent.scrollLeft
let parentScrollTopDiff = parentScrollTop - parentRect.top
let parentScrollLeftDiff = parentScrollLeft - parentRect.left
let lyricElementScrollTop = lyricElementRect.top + parentScrollTopDiff
let lyricElementScrollLeft = lyricElementRect.left + parentScrollLeftDiff
let scrollTopDiff = lyricElementScrollTop - parentScrollTop
let scrollLeftDiff = lyricElementScrollLeft - parentScrollLeft
let scrollTop = parent.scrollTop + scrollTopDiff
let scrollLeft = parent.scrollLeft + scrollLeftDiff
parent.scrollTo({
top: scrollTop - 128,
left: scrollLeft,
behavior: 'smooth'
}) })
} }
} }
} else if (app.currentLyricsLine == 0 && app.drawer.open) { } else if (app.currentLyricsLine == 0 && app.drawer.open) {