mirror of https://github.com/Qortal/q-tube
Browse Source
settingsSlice.ts renamed to persistentSlice, it is only used to store persistent data. reset button no longer changes video type from "playlist" to "video". Subscriptions are now stored as list of objects that have the name of the user and the name of the channel that is followed. When the application starts in App.tsx the subscription list is filtered by the user's name, so they only see channels by the name they have subscribed to. Edits to QuickMythril's bounty commits (showing home page stats and publish video form displaying supported codecs) to improve visibility and readability.pull/18/head
15 changed files with 564 additions and 382 deletions
@ -1,17 +1,17 @@ |
|||||||
import ReactDOM from 'react-dom/client' |
import ReactDOM from "react-dom/client"; |
||||||
import App from './App' |
import App from "./App"; |
||||||
import './index.css' |
import "./index.css"; |
||||||
import { BrowserRouter } from 'react-router-dom' |
import { BrowserRouter } from "react-router-dom"; |
||||||
interface CustomWindow extends Window { |
interface CustomWindow extends Window { |
||||||
_qdnBase: string
|
_qdnBase: string; |
||||||
} |
} |
||||||
|
|
||||||
const customWindow = window as unknown as CustomWindow |
const customWindow = window as unknown as CustomWindow; |
||||||
|
|
||||||
const baseUrl = customWindow?._qdnBase || '' |
const baseUrl = customWindow?._qdnBase || ""; |
||||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( |
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( |
||||||
<BrowserRouter basename={baseUrl}> |
<BrowserRouter basename={baseUrl}> |
||||||
<App /> |
<App /> |
||||||
<div id="modal-root" /> |
<div id="modal-root" /> |
||||||
</BrowserRouter> |
</BrowserRouter> |
||||||
) |
); |
||||||
|
|||||||
@ -1,65 +1,74 @@ |
|||||||
import React, { useMemo } from 'react' |
import React, { useMemo } from "react"; |
||||||
import { VideoListComponentLevel } from '../Home/VideoListComponentLevel' |
import { VideoListComponentLevel } from "../Home/VideoListComponentLevel"; |
||||||
import { HeaderContainer, ProfileContainer } from './Profile-styles' |
import { HeaderContainer, ProfileContainer } from "./Profile-styles"; |
||||||
import { AuthorTextComment, StyledCardColComment, StyledCardHeaderComment } from '../VideoContent/VideoContent-styles' |
import { |
||||||
import { Avatar, Box, useTheme } from '@mui/material' |
AuthorTextComment, |
||||||
import { useParams } from 'react-router-dom' |
StyledCardColComment, |
||||||
import { useSelector } from 'react-redux' |
StyledCardHeaderComment, |
||||||
import { setUserAvatarHash } from '../../state/features/globalSlice' |
} from "../VideoContent/VideoContent-styles"; |
||||||
import { RootState } from '../../state/store' |
import { Avatar, Box, useTheme } from "@mui/material"; |
||||||
|
import { useParams } from "react-router-dom"; |
||||||
|
import { useSelector } from "react-redux"; |
||||||
|
import { setUserAvatarHash } from "../../state/features/globalSlice"; |
||||||
|
import { RootState } from "../../state/store"; |
||||||
import { SubscribeButton } from "../../components/common/SubscribeButton.tsx"; |
import { SubscribeButton } from "../../components/common/SubscribeButton.tsx"; |
||||||
|
|
||||||
export const IndividualProfile = () => { |
export const IndividualProfile = () => { |
||||||
const { name: paramName } = useParams() |
const { name: paramName } = useParams(); |
||||||
|
|
||||||
const userAvatarHash = useSelector( |
const userAvatarHash = useSelector( |
||||||
(state: RootState) => state.global.userAvatarHash |
(state: RootState) => state.global.userAvatarHash |
||||||
) |
); |
||||||
const theme = useTheme() |
const theme = useTheme(); |
||||||
|
|
||||||
|
const avatarUrl = useMemo(() => { |
||||||
|
let url = ""; |
||||||
const avatarUrl = useMemo(()=> { |
if (paramName && userAvatarHash[paramName]) { |
||||||
let url = '' |
url = userAvatarHash[paramName]; |
||||||
if(paramName && userAvatarHash[paramName]){ |
|
||||||
url = userAvatarHash[paramName] |
|
||||||
} |
} |
||||||
|
|
||||||
return url |
return url; |
||||||
}, [userAvatarHash, paramName]) |
}, [userAvatarHash, paramName]); |
||||||
return ( |
return ( |
||||||
<ProfileContainer> |
<ProfileContainer> |
||||||
<HeaderContainer> |
<HeaderContainer> |
||||||
<Box sx={{ |
<Box |
||||||
cursor: 'pointer' |
sx={{ |
||||||
}} > |
cursor: "pointer", |
||||||
|
}} |
||||||
|
> |
||||||
<StyledCardHeaderComment |
<StyledCardHeaderComment |
||||||
sx={{ |
sx={{ |
||||||
'& .MuiCardHeader-content': { |
"& .MuiCardHeader-content": { |
||||||
overflow: 'hidden' |
overflow: "hidden", |
||||||
} |
}, |
||||||
}} |
}} |
||||||
> |
> |
||||||
<Box> |
<Box> |
||||||
<Avatar src={`/arbitrary/THUMBNAIL/${paramName}/qortal_avatar`} alt={`${paramName}'s avatar`} /> |
<Avatar |
||||||
|
src={`/arbitrary/THUMBNAIL/${paramName}/qortal_avatar`} |
||||||
|
alt={`${paramName}'s avatar`} |
||||||
|
/> |
||||||
</Box> |
</Box> |
||||||
<StyledCardColComment> |
<StyledCardColComment> |
||||||
<AuthorTextComment |
<AuthorTextComment |
||||||
color={ |
color={ |
||||||
theme.palette.mode === 'light' |
theme.palette.mode === "light" |
||||||
? theme.palette.text.secondary |
? theme.palette.text.secondary |
||||||
: '#d6e8ff' |
: "#d6e8ff" |
||||||
} |
} |
||||||
> |
> |
||||||
{paramName} |
{paramName} |
||||||
</AuthorTextComment> |
</AuthorTextComment> |
||||||
</StyledCardColComment> |
</StyledCardColComment> |
||||||
<SubscribeButton name={paramName} sx={{marginLeft:'10px'}}/> |
<SubscribeButton |
||||||
|
subscriberName={paramName} |
||||||
|
sx={{ marginLeft: "10px" }} |
||||||
|
/> |
||||||
</StyledCardHeaderComment> |
</StyledCardHeaderComment> |
||||||
</Box> |
</Box> |
||||||
</HeaderContainer> |
</HeaderContainer> |
||||||
<VideoListComponentLevel /> |
<VideoListComponentLevel /> |
||||||
</ProfileContainer> |
</ProfileContainer> |
||||||
|
); |
||||||
) |
}; |
||||||
} |
|
||||||
|
|||||||
Loading…
Reference in new issue