mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 02:54:15 +00:00
move spaces
This commit is contained in:
parent
e3c4f1297d
commit
9e159a3f61
@ -6,10 +6,10 @@ import { Icons, createIconRender } from "components/Icons"
|
||||
|
||||
import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
|
||||
|
||||
import FeedBrowser from "./components/feed"
|
||||
import ExploreBrowser from "./components/explore"
|
||||
import LivestreamsBrowser from "./components/livestreams"
|
||||
import SavedPostsBrowser from "./components/savedPosts"
|
||||
import FeedTab from "./components/feed"
|
||||
import ExploreTab from "./components/explore"
|
||||
import TrendingsTab from "./components/trendings"
|
||||
import SavedPostsTab from "./components/savedPosts"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
@ -17,23 +17,23 @@ const Tabs = {
|
||||
"feed": {
|
||||
title: "Feed",
|
||||
icon: "Rss",
|
||||
component: FeedBrowser
|
||||
component: FeedTab
|
||||
},
|
||||
"trendings": {
|
||||
title: "Trendings",
|
||||
icon: "TrendingUp",
|
||||
component: TrendingsTab
|
||||
},
|
||||
"explore": {
|
||||
title: "Explore",
|
||||
icon: "Search",
|
||||
component: ExploreBrowser
|
||||
component: ExploreTab
|
||||
},
|
||||
"savedPosts": {
|
||||
title: "Saved posts",
|
||||
icon: "Bookmark",
|
||||
component: SavedPostsBrowser
|
||||
},
|
||||
"livestreams": {
|
||||
title: "Livestreams",
|
||||
icon: "Tv",
|
||||
component: LivestreamsBrowser
|
||||
},
|
||||
component: SavedPostsTab
|
||||
}
|
||||
}
|
||||
|
||||
export default class Dashboard extends React.Component {
|
||||
|
||||
@ -2,14 +2,10 @@ import React from "react"
|
||||
import * as antd from "antd"
|
||||
import classnames from "classnames"
|
||||
|
||||
import { Icons, createIconRender } from "components/Icons"
|
||||
|
||||
import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
|
||||
|
||||
import FeedBrowser from "./components/feed"
|
||||
import ExploreBrowser from "./components/explore"
|
||||
import LivestreamsBrowser from "./components/livestreams"
|
||||
import SavedPostsBrowser from "./components/savedPosts"
|
||||
import FeedTab from "./components/feed"
|
||||
import ExploreTab from "./components/explore"
|
||||
import TrendingsTab from "./components/trendings"
|
||||
import SavedPostsTab from "./components/savedPosts"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
@ -17,23 +13,23 @@ const Tabs = {
|
||||
"feed": {
|
||||
title: "Feed",
|
||||
icon: "Rss",
|
||||
component: FeedBrowser
|
||||
component: FeedTab
|
||||
},
|
||||
"trendings": {
|
||||
title: "Trendings",
|
||||
icon: "TrendingUp",
|
||||
component: TrendingsTab
|
||||
},
|
||||
"explore": {
|
||||
title: "Explore",
|
||||
icon: "Search",
|
||||
component: ExploreBrowser
|
||||
component: ExploreTab
|
||||
},
|
||||
"savedPosts": {
|
||||
title: "Saved posts",
|
||||
icon: "Bookmark",
|
||||
component: SavedPostsBrowser
|
||||
},
|
||||
"livestreams": {
|
||||
title: "Livestreams",
|
||||
icon: "Tv",
|
||||
component: LivestreamsBrowser
|
||||
},
|
||||
component: SavedPostsTab
|
||||
}
|
||||
}
|
||||
|
||||
export default class Dashboard extends React.Component {
|
||||
|
||||
@ -1,123 +0,0 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
|
||||
import { UserPreview } from "components"
|
||||
import { Icons } from "components/Icons"
|
||||
|
||||
import Livestream from "../../../../models/livestream"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
const LivestreamItem = (props) => {
|
||||
const { livestream = {} } = props
|
||||
|
||||
const handleOnClick = async () => {
|
||||
if (typeof props.onClick !== "function") {
|
||||
console.warn("LivestreamItem: onClick is not a function")
|
||||
return
|
||||
}
|
||||
|
||||
return await props.onClick(livestream)
|
||||
}
|
||||
|
||||
return <div className="livestream_item" onClick={handleOnClick}>
|
||||
<div className="livestream_thumbnail">
|
||||
<img src={livestream.info?.thumbnail ?? "/assets/new_file.png"} />
|
||||
</div>
|
||||
<div className="livestream_info">
|
||||
<UserPreview username={livestream.username} />
|
||||
|
||||
<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"}
|
||||
</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 onClickItem = (livestream) => {
|
||||
app.setLocation(`/live/${livestream.username}`)
|
||||
}
|
||||
|
||||
const onClickControlPanel = () => {
|
||||
app.setLocation("/live_control")
|
||||
}
|
||||
|
||||
const renderList = () => {
|
||||
if (loading) {
|
||||
return <antd.Skeleton active />
|
||||
}
|
||||
|
||||
if (list.length === 0) {
|
||||
return <antd.Result>
|
||||
<h1>
|
||||
No livestreams found
|
||||
</h1>
|
||||
</antd.Result>
|
||||
}
|
||||
|
||||
return list.map((livestream) => {
|
||||
return <LivestreamItem livestream={livestream} onClick={onClickItem} />
|
||||
})
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
loadStreamings()
|
||||
}, [])
|
||||
|
||||
return <div className="livestreamsBrowser">
|
||||
<div className="header">
|
||||
<div className="title">
|
||||
<h1>
|
||||
<Icons.Tv />
|
||||
<span>Livestreams</span>
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="panel">
|
||||
<antd.Button
|
||||
icon={<Icons.Settings />}
|
||||
onClick={onClickControlPanel}
|
||||
>
|
||||
Control Panel
|
||||
</antd.Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="livestream_list">
|
||||
{renderList()}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
@item_border_radius: 10px;
|
||||
|
||||
.livestreamsBrowser {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.header {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.panel {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
svg {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.livestream_list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 50px;
|
||||
|
||||
.livestream_item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--background-color-primary2);
|
||||
|
||||
border: 1px solid var(--border-color);
|
||||
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
border-radius: @item_border_radius;
|
||||
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--background-color-accent);
|
||||
}
|
||||
|
||||
.livestream_thumbnail {
|
||||
width: 8vw;
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: @item_border_radius;
|
||||
}
|
||||
}
|
||||
|
||||
.livestream_info {
|
||||
position: relative;
|
||||
|
||||
width: 100%;
|
||||
|
||||
margin-left: 20px;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 10px 0;
|
||||
|
||||
color: var(--text-color);
|
||||
|
||||
.userPreview {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 0;
|
||||
height: fit-content;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.livestream_title {
|
||||
margin-top: 10px;
|
||||
font-size: 1.5rem;
|
||||
height: fit-content;
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
}
|
||||
|
||||
.livestream_description {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 400;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.livestream_category {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
packages/app/src/pages/home/components/trendings/index.jsx
Normal file
14
packages/app/src/pages/home/components/trendings/index.jsx
Normal file
@ -0,0 +1,14 @@
|
||||
import React from "react"
|
||||
import { Result } from "antd"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
export default (props) => {
|
||||
return <div className="trendingsBrowser">
|
||||
<Result
|
||||
status="404"
|
||||
title="Not implemented"
|
||||
subTitle="Sorry, but this feature is not implemented yet."
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
.trendingsBrowser {}
|
||||
@ -1,7 +1,7 @@
|
||||
import React from "react"
|
||||
|
||||
export default () => {
|
||||
app.setLocation("home/feed")
|
||||
app.setLocation("/home/feed")
|
||||
|
||||
return <></>
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user