RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up

Browse Source
This commit is contained in:
SrGooglo 2023-05-30 00:59:21 +00:00
parent a616af07d6
commit 3c1c48ed36
2 changed files with 20 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/app/src/pages/lyrics/index.jsx
View File

@ -10,16 +10,6 @@ import request from "comty.js/handlers/request"
import "./index.less" import "./index.less"
function RGBStringToValues(rgbString) {
if (!rgbString) {
return [0, 0, 0]
}
const rgb = rgbString.replace("rgb(", "").replace(")", "").split(",").map((v) => parseInt(v))
return [rgb[0], rgb[1], rgb[2]]
}
function composeRgbValues(values) { function composeRgbValues(values) {
let value = "" let value = ""
@ -47,7 +37,6 @@ function calculateLineTime(line) {
function isOverflown(element) { function isOverflown(element) {
if (!element) { if (!element) {
console.log("element is null")
return false return false
} }
@ -165,26 +154,6 @@ class PlayerController extends React.Component {
} }
this.startSync() this.startSync()
// // create a intersection observer to check if title is overflown
// // if the entire title is not visible, we will use marquee
// this.titleObserver = new IntersectionObserver((entries) => {
// for (const entry of entries) {
// if (entry.isIntersecting) {
// this.setState({ titleOverflown: false })
// } else {
// this.setState({ titleOverflown: true })
// }
// }
// }, {
// root: null,
// rootMargin: "0px",
// threshold: 1.0,
// })
console.log(this.titleRef.current)
//this.titleObserver.observe(this.titleRef.current)
} }
componentWillUnmount() { componentWillUnmount() {
@ -217,7 +186,7 @@ class PlayerController extends React.Component {
> >
<div className="player_controller_cover"> <div className="player_controller_cover">
<Image <Image
src={this.state.currentPlaying?.thumbnail ?? "/assets/no_song.png"} src={this.state.currentPlaying?.cover ?? this.state.currentPlaying?.thumbnail ?? "/assets/no_song.png"}
/> />
</div> </div>
@ -352,7 +321,7 @@ export default class SyncLyrics extends React.Component {
videoCanvasRef = React.createRef() videoCanvasRef = React.createRef()
thumbnailCanvasRef = React.createRef() coverCanvasRef = React.createRef()
events = { events = {
"player.current.update": (currentManifest) => { "player.current.update": (currentManifest) => {
@ -747,11 +716,11 @@ export default class SyncLyrics extends React.Component {
</div> </div>
<div <div
className="lyrics_viewer_thumbnail" className="lyrics_viewer_cover"
> >
<Image <Image
src={this.state.currentManifest?.thumbnail ?? "/assets/no_song.png"} src={this.state.currentManifest?.cover ?? this.state.currentManifest?.thumbnail ?? "/assets/no_song.png"}
ref={this.thumbnailRef} ref={this.coverRef}
/> />
</div> </div>

18
packages/app/src/pages/lyrics/index.less
View File

@ -37,13 +37,15 @@
} }
&.centered-player { &.centered-player {
.lyrics_viewer_thumbnail { .lyrics_viewer_cover {
width: 100vw; width: 100vw;
height: 80vh; //fallback height: 80vh; //fallback
height: 80dvh; height: 80dvh;
opacity: 1; opacity: 1;
bottom: 20vh;
} }
.player_controller_wrapper { .player_controller_wrapper {
@ -175,10 +177,10 @@
} }
} }
.lyrics_viewer_thumbnail { .lyrics_viewer_cover {
position: absolute; position: absolute;
top: 0; bottom: 0;
left: 0; left: 0;
z-index: 250; z-index: 250;
@ -534,3 +536,13 @@
} }
} }
} }
@keyframes bottom-to-top {
0% {
bottom: 0;
}
100% {
bottom: 20vh;
}
}