Skip to content

add links to navigation buttons #526

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

add links to navigation buttons #526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 16 additions & 15 deletions Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,13 +169,13 @@ const ContentGrid: Component<ContentGridProps> = (props) => {

const renderCreator = (creator: IPlatformAuthorLink) => {
return (
<CreatorView id={creator.id}
<a href={"/web/channel?url=" + encodeURIComponent(creator.url)}><CreatorView id={creator.id}
name={creator.name}
onClick={() => navigate("/web/channel?url=" + encodeURIComponent(creator.url), { state: { author: creator
} })}
thumbnail={creator.thumbnail}
metadata={((creator.subscribers && creator.subscribers > 0) ? (toHumanNumber(creator.subscribers) + " subscribers") : "")}
url={creator.url} />
url={creator.url} /></a>
);
};

Expand All @@ -186,11 +186,11 @@ const ContentGrid: Component<ContentGridProps> = (props) => {
});

return (
<PlaylistView itemCount={playlist.videoCount}
<a href={("/web/remotePlaylist?url=" + encodeURIComponent(playlist.url))}><PlaylistView itemCount={playlist.videoCount}
name={playlist.name}
thumbnail={playlist.thumbnail}
platformIconUrl={pluginIconUrl$()}
onClick={() => navigate("/web/remotePlaylist?url=" + encodeURIComponent(playlist.url))} />
onClick={() => navigate("/web/remotePlaylist?url=" + encodeURIComponent(playlist.url))} /></a>
);
//onSettings={(e) => onSettingsClicked(e, playlist)}
};
Expand Down Expand Up @@ -231,24 +231,25 @@ const ContentGrid: Component<ContentGridProps> = (props) => {
builder={(index, item) =>
<Switch>
<Match when={item()?.contentType == ContentType.MEDIA}>
<VideoThumbnailView video={item() as IPlatformVideo}
useCache={!!props?.useCache}
onSettings={(e, content)=> onSettingsClicked(e, content)}
onAddtoQueue={(e, content)=>video?.actions.addToQueue(content as IPlatformVideo)}
onClick={() => {
const url = item().backendUrl ?? item().url;
if (url)
video?.actions.openVideo(item() as IPlatformVideo);
}} />
<a href={"/web/video?url="+(item().backendUrl ?? item().url)}>
<VideoThumbnailView video={item() as IPlatformVideo}
useCache={!!props?.useCache}
onSettings={(e, content)=> onSettingsClicked(e, content)}
onAddtoQueue={(e, content)=>video?.actions.addToQueue(content as IPlatformVideo)}
onClick={() => {
const url = item().backendUrl ?? item().url;
if (url)
video?.actions.openVideo(item() as IPlatformVideo);
}} /> </a>
</Match>
<Match when={item()?.contentType == ContentType.POST}>
<PostThumbnailView post={item() as IPlatformPost}
<a href={"/web/details/post?url=" + encodeURIComponent(item().backendUrl ?? item().url)}><PostThumbnailView post={item() as IPlatformPost}
onSettings={(e, content)=> onSettingsClicked(e, content)}
onClick={() =>{
const url = item().backendUrl ?? item().url;
if(url)
navigate("/web/details/post?url=" + encodeURIComponent(url));
}} />
}} /></a>
</Match>
<Match when={item()?.contentType == ContentType.NESTED_VIDEO}>
<NestedMediaThumbnailView video={item() as IPlatformNestedMedia}
Expand Down
16 changes: 12 additions & 4 deletions Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,27 +87,35 @@ const VideoThumbnailView: Component<VideoProps> = (props) => {
<div class={styles.title} onClick={props.onClick} onDragStart={startDrag} draggable={true}>{props.video?.name}</div>
<div class={styles.bottomRow}>
<Show when={showAuthorThumbnail$()}>
<AnimatedImage src={props.video?.author.thumbnail} class={styles.authorThumbnail} alt="author thumbnail" onClick={onClickAuthor} referrerPolicy='no-referrer' />
<a href={props.video?.author.url? "/web/channel?url=" + encodeURIComponent(props.video?.author.url):undefined}>
<AnimatedImage src={props.video?.author.thumbnail} class={styles.authorThumbnail} alt="author thumbnail" onClick={onClickAuthor} referrerPolicy='no-referrer' />
</a>
</Show>
<div class={styles.authorColumn} style={{
"margin-left": showAuthorThumbnail$() ? "8px" : undefined
}}>
<div class={styles.authorName} onClick={onClickAuthor}>{props.video?.author?.name ?? "Unknown"}</div>
<a href={props.video?.author.url? "/web/channel?url=" + encodeURIComponent(props.video?.author.url):undefined}>
<div class={styles.authorName} onClick={onClickAuthor}>{props.video?.author?.name ?? "Unknown"}</div>
</a>
<Show when={props.video}>
<div class={styles.metadata}><Show when={(props.video?.viewCount ?? 0) > 0}>{toHumanNumber(props.video?.viewCount)} views • </Show>{toHumanNowDiffString(props.video?.dateTime)}</div>
</Show>
</div>


<Show when={props.onAddtoQueue}>
<a href="javascript:void(0)">
<IconButton icon={addToQueueIcon}
style={{"margin-right": "7px", "margin-top": "4px"}}
iconPadding='3px'
height={"22px"} width={"22px"} ref={refAddToQueueButton} onClick={() => props.onAddtoQueue?.(refAddToQueueButton!, props.video!)} />
height={"22px"} width={"22px"} ref={refAddToQueueButton} onClick={() => {props.onAddtoQueue?.(refAddToQueueButton!, props.video!); return false;}} />
</a>
</Show>

<Show when={props.onSettings}>
<IconButton icon={more} ref={refMoreButton} onClick={() => props.onSettings?.(refMoreButton!, props.video!)} />
<a href="javascript:void(0)">
<IconButton icon={more} ref={refMoreButton} onClick={() => {console.log(1111.1); props.onSettings?.(refMoreButton!, props.video!); return false;}} />
</a>
</Show>
</div>
</div>
Expand Down
33 changes: 21 additions & 12 deletions Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,7 +525,6 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {

const isMinimized = createMemo(() => {
const res = video?.state() === VideoState.Minimized && !isFullscreen();
console.log("isMinimized", res);
return res;
});

Expand Down Expand Up @@ -594,10 +593,18 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
repositionMinimize();
};

onMount(() => {
const [params, setParams] = useSearchParams();
onMount(async () => {
resizeObserver.observe(scrollContainerRef!);
window.addEventListener('resize', handleWindowResize);
setDimensions({ width: scrollContainerRef!.clientWidth, height: scrollContainerRef!.clientHeight });
if(location.pathname==="/web/video"){
const url=params.url;
const result = (!url) ? null : (await DetailsBackend.videoLoad(url));
if(result){
video?.actions.openVideo(result?.video);
}
}
});

onCleanup(() => {
Expand Down Expand Up @@ -1382,18 +1389,20 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
</div>
<div class={styles.authorContainer}>
<Show when={isThumbnailValid$()}>
<img src={author$()?.thumbnail} class={styles.author} alt="author" onClick={onClickAuthor} referrerPolicy='no-referrer' />
<a href={"/web/channel?url=" + encodeURIComponent(author$()?.url??"")}><img src={author$()?.thumbnail} class={styles.author} alt="author" onClick={onClickAuthor} referrerPolicy='no-referrer' /></a>
</Show>
<div class={styles.authorDescription} style={{
"margin-left": isThumbnailValid$() ? undefined : "40px"
}}>
<div class={styles.authorName} onClick={onClickAuthor}>{author$()?.name}</div>
<div style="flex-grow:1;"></div>
<Show when={(author$()?.subscribers ?? 0) > 0}>
<div class={styles.authorMetadata} onClick={onClickAuthor}>{toHumanNumber(author$()?.subscribers)} subscribers</div>
<a href={"/web/channel?url=" + encodeURIComponent(author$()?.url??"")}>
<div class={styles.authorDescription} style={{
"margin-left": isThumbnailValid$() ? undefined : "40px"
}}>
<div class={styles.authorName} onClick={onClickAuthor}>{author$()?.name}</div>
<div style="flex-grow:1;"></div>
</Show>
</div>
<Show when={(author$()?.subscribers ?? 0) > 0}>
<div class={styles.authorMetadata} onClick={onClickAuthor}>{toHumanNumber(author$()?.subscribers)} subscribers</div>
<div style="flex-grow:1;"></div>
</Show>
</div>
</a>

<SubscribeButton author={author$()?.url} style={{"margin-top": "29px"}} />

Expand Down
15 changes: 9 additions & 6 deletions Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
icon: iconSettings,
name: 'Settings',
action: () => UIOverlay.overlaySettings(),
path: '/web/settings',
selected: location.pathname === '/web/settings'
});

Expand Down Expand Up @@ -257,14 +258,14 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
</Show>
</div>
{topButtons$().slice(0, visibleTopButtonCount$()).map(btn => (
<SideBarButton
<a href={btn.path} style="width: 100%;"><SideBarButton
collapsed={collapsed()}
icon={btn.icon}
name={btn.name}
selected={btn.selected}
onClick={() => btn.action ? btn.action() : navigateTo(btn.path!, options)}
onRightClick={btn.onRightClick}
/>
/></a>
))}
<Show when={moreTopButtonCount$() > 0}>
<SideBarButton
Expand Down Expand Up @@ -295,13 +296,15 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
<FlexibleArrayList outerContainerRef={scrollContainerRef}
items={subscriptions$()}
builder={(_, item$) =>
<a href={"/web/channel?url=" + encodeURIComponent(item$()?.channel!.url)}>
<SideBarCreator onClick={() => {
const author = item$()?.channel;
if (!author) {
return;
}
navigate("/web/channel?url=" + encodeURIComponent(author!.url), { state: { author } });
}} icon={item$()?.channel?.thumbnail} name={item$()?.channel?.name} selected={false} />
</a>
} />
</ScrollContainer>
</Match>
Expand All @@ -312,13 +315,13 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
</Show>
<div class={styles.buttonListBottom}>
{bottomButtons$().map(btn => (
<SideBarButton
<a href={btn.path} style="width: 100%;"><SideBarButton
collapsed={collapsed()}
icon={btn.icon}
name={btn.name}
selected={btn.selected}
onClick={() => btn.action ? btn.action() : navigateTo(btn.path!, options)}
/>
/></a>
))}
</div>
<Portal>
Expand All @@ -335,14 +338,14 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
<div style="background-color: #141414; width: 200px; height: calc(100% - 20px); border-right: #2a2a2a 1px solid; padding: 10px; display: flex;
flex-direction: column; align-items: center; gap: 6px;">
{topButtons$().slice(visibleTopButtonCount$(), visibleTopButtonCount$() + moreTopButtonCount$()).map(btn => (
<SideBarButton
<a href={btn.path}><SideBarButton
collapsed={false}
icon={btn.icon}
name={btn.name}
selected={btn.selected}
onClick={() => btn.action ? btn.action() : navigateTo(btn.path!, options)}
onRightClick={btn.onRightClick}
/>
/></a>
))}
</div>
</div>
Expand Down
1 change: 0 additions & 1 deletion Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,6 @@ const PlayerControlsView: Component<PlayerControlsProps> = (props) => {
return;
}
}

switch (ev.key) {
case " ":
case "k":
Expand Down
5 changes: 5 additions & 0 deletions Grayjay.Desktop.Web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,9 @@ code {

img {
-webkit-user-drag: none;
}

a {
color: inherit;
text-decoration: inherit
}
8 changes: 5 additions & 3 deletions Grayjay.Desktop.Web/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,9 +149,11 @@ const App: Component<RouteSectionProps> = (props) => {

render(() => (
<Router root={App}>
<Route path="/web/index.html" component={HomePage} />
<Route path="/web" component={HomePage} />
<Route path="/web/home" component={HomePage} />
<Route path="/web/video" component={BuyPage} />
<Route path="/web/index.html" component={DefaultPage} />
<Route path="/web" component={DefaultPage} />
<Route path="/web/home" component={DefaultPage} />
<Route path="/web/recommended" component={HomePage} />
<Route path="/web/search" component={SearchPage} />
<Route path="/web/subscriptions" component={SubscriptionsPage} />
<Route path="/web/creators" component={CreatorsPage} />
Expand Down
3 changes: 2 additions & 1 deletion Grayjay.Desktop.Web/src/pages/Creators/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ const CreatorsPage: Component = () => {
"margin-top": "7px"*/
}}
builder={(index, item) =>
<a href={"/web/channel?url=" + encodeURIComponent(item()?.channel?.url)}>
<CreatorView {... item()?.channel}
metadata={((item()?.channel?.subscribers && item()?.channel?.subscribers > 0) ? (toHumanNumber(item()?.channel?.subscribers) + " subscribers") : "")}
onClick={() => {
Expand All @@ -172,7 +173,7 @@ const CreatorsPage: Component = () => {
showSubscriptionSettings(el, item());
}}
subscription={item()}
isSubscribedInitialState={true} />
isSubscribedInitialState={true} /></a>
} />
</ScrollContainer>
</Show>
Expand Down
4 changes: 2 additions & 2 deletions Grayjay.Desktop.Web/src/pages/History/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ const HistoryPage: Component = () => {
"width": historyVideo() ? `${(getVideoProgressPercentage(historyVideo()?.position, historyVideo()?.video?.duration))}%` : undefined
}} />
</div>
<div style="display: flex; flex-direction: column; height: 100%; margin-left: 20px; width: 100%;">
<a href={"/web/video?url="+historyVideo()?.video.url}><div style="display: flex; flex-direction: column; height: 100%; margin-left: 20px; width: 100%;">
<div class={styles.videoTitle} onClick={openVideo}>{historyVideo()?.video.name}</div>
<div style="flex-grow: 1"></div>
<div style="display: flex; flex-direction: row; align-items: center;">
Expand All @@ -294,7 +294,7 @@ const HistoryPage: Component = () => {
<div class={styles.authorMetadata} onClick={openAuthor}>{metadata()}</div>
</div>
</div>
</div>
</div></a>
<div style="flex-grow: 1"></div>
<IconButton icon={ic_more}
style={{"flex-shrink": 0}}
Expand Down
4 changes: 3 additions & 1 deletion Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,8 @@ const PlaylistsPage: Component = () => {
});

return (
<PlaylistView name={item()?.name}
<a href={"/web/playlist?id=" + item()?.id}>
<PlaylistView name={item()?.name}
itemCount={item()?.videos.length}
thumbnail={bestThumbnail$()?.url}
onClick={() => {
Expand All @@ -309,6 +310,7 @@ const PlaylistsPage: Component = () => {
onSettingsClicked(e, playlist);
}
}} />
</a>
);
}} />
</Show>
Expand Down