mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 19:14:16 +00:00
analyze and style livestream items
This commit is contained in:
parent
cf49b8f70e
commit
625ef741bd
@ -1,15 +1,21 @@
|
||||
import React from "react"
|
||||
import Livestream from "models/livestream"
|
||||
import * as antd from "antd"
|
||||
import { FastAverageColor } from "fast-average-color"
|
||||
|
||||
import { UserPreview } from "components"
|
||||
import { Icons } from "components/Icons"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
const fac = new FastAverageColor()
|
||||
|
||||
const LivestreamItem = (props) => {
|
||||
const { livestream = {} } = props
|
||||
|
||||
const itemRef = React.useRef()
|
||||
const imageRef = React.useRef()
|
||||
|
||||
const handleOnClick = async () => {
|
||||
if (typeof props.onClick !== "function") {
|
||||
console.warn("LivestreamItem: onClick is not a function")
|
||||
@ -19,63 +25,88 @@ const LivestreamItem = (props) => {
|
||||
return await props.onClick(livestream)
|
||||
}
|
||||
|
||||
return <div className="livestream_item" onClick={handleOnClick}>
|
||||
if (!livestream) {
|
||||
return null
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
if (livestream.info?.thumbnail) {
|
||||
fac.getColorAsync(
|
||||
livestream.info?.thumbnail,
|
||||
{
|
||||
left: 0,
|
||||
top: 0,
|
||||
}
|
||||
).then((color) => {
|
||||
const colorEnd = [...color.value.slice(0, 3), 0].join(',')
|
||||
const gradient = `linear-gradient(to top, rgba(${colorEnd}) 0%, ${color.rgba} 100%)`
|
||||
|
||||
if (color.isLight) {
|
||||
itemRef.current.classList.add("white_background")
|
||||
}
|
||||
|
||||
itemRef.current.style.backgroundImage = gradient
|
||||
})
|
||||
}
|
||||
}, [])
|
||||
|
||||
return <div
|
||||
className="livestream_item"
|
||||
onClick={handleOnClick}
|
||||
ref={itemRef}
|
||||
>
|
||||
<div className="livestream_thumbnail">
|
||||
<img src={livestream.info?.thumbnail ?? "/assets/new_file.png"} />
|
||||
<img
|
||||
src={livestream.info?.thumbnail ?? "/assets/new_file.png"}
|
||||
ref={imageRef}
|
||||
/>
|
||||
</div>
|
||||
<div className="livestream_info">
|
||||
<UserPreview username={livestream.username} />
|
||||
<UserPreview
|
||||
user={livestream.user}
|
||||
small
|
||||
/>
|
||||
|
||||
<div className="livestream_title">
|
||||
<h1>{livestream.info?.title}</h1>
|
||||
</div>
|
||||
|
||||
<div className="livestream_description">
|
||||
<h2>{livestream.info?.description ?? "No description"}</h2>
|
||||
</div>
|
||||
|
||||
<div className="livestream_category">
|
||||
{livestream.info?.category?.label ?? "No category"}
|
||||
<span>
|
||||
{livestream.info?.category?.label ?? "No category"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export default (props) => {
|
||||
const [loading, setLoading] = React.useState(true)
|
||||
const [list, setList] = React.useState([])
|
||||
|
||||
const loadStreamings = async () => {
|
||||
setLoading(true)
|
||||
|
||||
const livestreams = await Livestream.getLivestreams().catch((err) => {
|
||||
console.error(err)
|
||||
app.message.error("Failed to load livestreams")
|
||||
return false
|
||||
})
|
||||
|
||||
console.log("Livestreams", livestreams)
|
||||
|
||||
setLoading(false)
|
||||
|
||||
if (livestreams) {
|
||||
if (!Array.isArray(livestreams)) {
|
||||
console.error("Livestreams is not an array")
|
||||
return false
|
||||
}
|
||||
|
||||
setList(livestreams)
|
||||
}
|
||||
}
|
||||
const [L_Streams, R_Streams, E_Streams] = app.cores.api.useRequest(Livestream.getLivestreams)
|
||||
|
||||
const onClickItem = (livestream) => {
|
||||
app.setLocation(`/live/${livestream.username}`)
|
||||
app.setLocation(`/live/${livestream.stream}`)
|
||||
}
|
||||
|
||||
if (E_Streams) {
|
||||
console.error(E_Streams)
|
||||
|
||||
return <antd.Result
|
||||
status="error"
|
||||
title="Failed to load livestreams"
|
||||
subTitle="Please try again later"
|
||||
/>
|
||||
}
|
||||
|
||||
if (L_Streams || !R_Streams) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
const renderList = () => {
|
||||
if (loading) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
if (list.length === 0) {
|
||||
if (R_Streams.length === 0) {
|
||||
return <antd.Result>
|
||||
<h1>
|
||||
No livestreams found
|
||||
@ -83,15 +114,11 @@ export default (props) => {
|
||||
</antd.Result>
|
||||
}
|
||||
|
||||
return list.map((livestream) => {
|
||||
return R_Streams.map((livestream) => {
|
||||
return <LivestreamItem livestream={livestream} onClick={onClickItem} />
|
||||
})
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
loadStreamings()
|
||||
}, [])
|
||||
|
||||
return <div className="livestream_list">
|
||||
{renderList()}
|
||||
</div>
|
||||
|
@ -14,30 +14,45 @@
|
||||
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--background-color-primary-2);
|
||||
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
max-height: 200px;
|
||||
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
outline: 1px solid var(--border-color);
|
||||
|
||||
background-color: var(--background-color-primary-2);
|
||||
|
||||
border-radius: @item_border_radius;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-accent);
|
||||
}
|
||||
|
||||
&.white_background {
|
||||
h1,
|
||||
h2,
|
||||
span {
|
||||
color: var(--text-color-black) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.livestream_thumbnail {
|
||||
width: 8vw;
|
||||
height: 100%;
|
||||
width: 15vw;
|
||||
height: 10vw;
|
||||
max-height: 180px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
border-radius: @item_border_radius;
|
||||
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@ -53,10 +68,6 @@
|
||||
|
||||
color: var(--text-color);
|
||||
|
||||
.userPreview {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0;
|
||||
|
Loading…
x
Reference in New Issue
Block a user