Skip to content

Commit

Permalink
edit video allow changing position
Browse files Browse the repository at this point in the history
  • Loading branch information
sphinxrave committed Oct 26, 2024
1 parent 10c3c2f commit 3717d37
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 10 deletions.
2 changes: 1 addition & 1 deletion packages/react/src/components/layout/SelectionFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const SelectionFooter = () => {
return (
<footer
id="selectionFooter"
className="sticky bottom-0 right-0 flex bg-base-3 p-1 shadow-lg"
className="sticky bottom-0 right-0 flex border-t border-base-6 bg-base-3 p-1 shadow-lg"
style={{ bottom: "var(--footer-height-clearance)" }}
>
<SelectedVideosModal
Expand Down
30 changes: 21 additions & 9 deletions packages/react/src/routes/editVideo.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Loading } from "@/components/common/Loading";
import { VideoEditTopic } from "@/components/edit/VideoEditTopic";
import { siteIsSmallAtom } from "@/hooks/useFrame";
import { useVideo } from "@/services/video.service";
import {
ResizableHandle,
Expand All @@ -9,7 +8,6 @@ import {
} from "@/shadcn/ui/resizable";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
import { TypographyH3 } from "@/shadcn/ui/typography";
import { useAtomValue } from "jotai";
import { useState } from "react";
import { Helmet } from "react-helmet-async";
import { useTranslation } from "react-i18next";
Expand All @@ -18,15 +16,16 @@ import "./editVideo.scss";
import { VideoEditMusic } from "@/components/edit/VideoEditMusic";
import { PlayerWrapper } from "@/components/layout/PlayerWrapper";
import { idToVideoURL } from "@/lib/utils";
import { Button } from "@/shadcn/ui/button";

export function EditVideo() {
const { id } = useParams();
const { t } = useTranslation();
const siteIsSmall = useAtomValue(siteIsSmallAtom);
const { data, error, isPending, isSuccess } = useVideo<PlaceholderVideo>({
id: id!,
});
const [tab, setTab] = useState("topic");
const [isHorizontal, setIsHorizontal] = useState(true); // Add this state

return (
<>
Expand All @@ -35,7 +34,8 @@ export function EditVideo() {
<div className="container"></div>
<ResizablePanelGroup
className="container min-h-[90vh]"
direction={siteIsSmall ? "vertical" : "horizontal"}
direction={isHorizontal ? "vertical" : "horizontal"}
// it's talking about content direction, not the direction of the splitter.
>
<ResizablePanel minSize={10} defaultSize={20}>
{isSuccess && data && (
Expand All @@ -47,10 +47,22 @@ export function EditVideo() {
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel className="px-4">
<TypographyH3 className="mb-4 mt-2">
Editing: {data?.title}
</TypographyH3>

<div className="mb-4 mt-2 flex items-center gap-4">
<Button
variant="base-outline"
size="icon-lg"
onClick={() => setIsHorizontal(!isHorizontal)}
>
<div
className={
isHorizontal
? "i-mingcute:rotate-to-vertical-line -rotate-180 -scale-x-100"
: "i-mingcute:rotate-to-vertical-line rotate-90 "
}
/>
</Button>
<TypographyH3>Editing: {data?.title}</TypographyH3>
</div>
{isPending || error ? (
<Loading size="lg" error={error} />
) : (
Expand All @@ -62,7 +74,7 @@ export function EditVideo() {
>
<TabsList className="w-full justify-start">
<TabsTrigger value="topic">
{t("views.editor.changeTopic.title")} /
{t("views.editor.changeTopic.title")} /{" "}
{t("views.editor.channelMentions.title")}
</TabsTrigger>
<TabsTrigger value="music">
Expand Down

0 comments on commit 3717d37

Please sign in to comment.