Skip to content

Commit

Permalink
added translations to ProjectDisplay
Browse files Browse the repository at this point in the history
  • Loading branch information
@hubcio2115
hubcio2115 committed Sep 29, 2024
1 parent dd29db8 commit fe37f3b
Showing 1 changed file with 56 additions and 62 deletions.
118 changes: 56 additions & 62 deletions apps/web/src/components/dashboard/project-view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,26 +20,33 @@ import {
import { useProjectStatusMutation } from "~/lib/mutations/useProjectStatusMutation";
import { useProjectQuery } from "~/lib/queries/useProjectsQuery";
import { useEditProjectMutation } from "~/lib/mutations/useEditProjectMutation";
import type { SupportedLanguages } from "~/i18n/settings";
import { useTranslation } from "~/i18n/client";

interface ProjectDisplayProps {
project: Project;
channel: youtube_v3.Schema$Channel;
lang: SupportedLanguages;
}

function ProjectDisplay({ channel, project }: ProjectDisplayProps) {
function ProjectDisplay({ channel, project, lang }: ProjectDisplayProps) {
const [showWholeDescription, setShowWholeDescription] = useState(false);
const descriptionLines = project.description.split("\n");

const { data: languages } = useLanguagesQuery();
const { data: languages } = useLanguagesQuery(lang);
const language = languages?.find(
(language) => language.id === project.defaultLanguage,
);

const { data: categories } = useCategoriesQuery();
const { data: categories } = useCategoriesQuery(lang);
const category = categories?.find(
(category) => category.id === project.categoryId,
);

const { t } = useTranslation(lang, "project-page", {
keyPrefix: "project_display",
});

const queryClient = useQueryClient();

const { mutate, isPending } = useProjectStatusMutation(project.id, {
Expand Down Expand Up @@ -72,7 +79,7 @@ function ProjectDisplay({ channel, project }: ProjectDisplayProps) {
disabled
className="rounded-full my-auto disabled:opacity-100"
>
Subscribe
{t("subscribe")}
</Button>
</div>

Expand All @@ -88,58 +95,53 @@ function ProjectDisplay({ channel, project }: ProjectDisplayProps) {
className="rounded-full w-max"
onClick={() => setShowWholeDescription((prev) => !prev)}
>
{showWholeDescription ? "Show less" : "Show more"}
{showWholeDescription ? t("show_less") : t("show_more")}
</Button>
)}
</div>

<div className="grid grid-cols-2 gap-2">
<div className="flex gap-2 flex-col">
<h2 className="font-bold">Tags:</h2>
<p>{project.tags || "None"}</p>
<h2 className="font-bold">{t("tags.label")}:</h2>
<p>{project.tags || t("tags.empty")}</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">License:</h2>
<p>
{(() => {
switch (project.license) {
case "youtube":
return "Standard YouTube License";
case "creativeCommon":
return "Creative Commons - Attribution";
}
})()}
</p>
<h2 className="font-bold">{t("license.label")}:</h2>
<p>{t(`license.${project.license}`)}</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">Embeddable:</h2>
<p>{project.embeddable ? "Yes" : "No"}</p>
<h2 className="font-bold">{t("embeddable.label")}:</h2>
<p>{project.embeddable ? t("yes") : t("no")}</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">Language:</h2>
<h2 className="font-bold">{t("language.label")}:</h2>
<p>{language?.snippet?.name}</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">Stats:</h2>
<p>{project.publicStatsViewable ? "Public" : "Private"}</p>
<h2 className="font-bold">{t("stats.label")}:</h2>
<p>
{project.publicStatsViewable
? t("stats.public")
: t("stats.private")}
</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">'Made for Kids':</h2>
<p>{project.selfDeclaredMadeForKids ? "Yes" : "No"}</p>
<h2 className="font-bold">{t("made_for_kids.label")}:</h2>
<p>{project.selfDeclaredMadeForKids ? t("yes") : t("no")}</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">Notify Subscribers:</h2>
<p>{project.notifySubscribers ? "Yes" : "No"}</p>
<h2 className="font-bold">{t("notify_subscribers.label")}:</h2>
<p>{project.notifySubscribers ? t("yes") : t("no")}</p>
</div>

<div className="flex gap-2">
<h2 className="font-bold">Category</h2>
<h2 className="font-bold">{t("category.label")}</h2>
<p>{category?.snippet?.title}</p>
</div>
</div>
Expand All @@ -160,24 +162,22 @@ function ProjectDisplay({ channel, project }: ProjectDisplayProps) {
) : (
<GitPullRequestClosed className="size-4" />
)}
Close
{t("close_button")}
</Button>

<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button className="gap-2" disabled>
<Merge className="size-4" />
Publish
</Button>
<div>
<Button className="gap-2" disabled>
<Merge className="size-4" />
{t("publish_button")}
</Button>
</div>
</TooltipTrigger>

<TooltipContent>
We are currently unable to allow you to publish your project.
This feature is locked for unauthorized applications that use
YouTube API. We're currently in a process of passing a Google
audit. For now you can publish your project manually form
YouTube Studio.
<TooltipContent className="max-w-96">
{t("unable_to_publish_info")}
</TooltipContent>
</Tooltip>
</TooltipProvider>
Expand All @@ -191,7 +191,7 @@ function ProjectDisplay({ channel, project }: ProjectDisplayProps) {
}}
>
{isPending && <Loader2 className="animate-spin size-4" />}
Reopen
{t("reopen_button")}
</Button>
)}
</div>
Expand All @@ -204,18 +204,22 @@ interface ProjectViewProps {
channel: youtube_v3.Schema$Channel;
languages: youtube_v3.Schema$I18nLanguage[];
categories: youtube_v3.Schema$VideoCategory[];
lang: SupportedLanguages;
}

export default function ProjectView({
project: initialProject,
channel,
languages,
categories,
lang,
}: ProjectViewProps) {
const [isEdititng, setIsEditing] = useState(false);

const queryClient = useQueryClient();

const { t } = useTranslation(lang, "project-page");

useEffect(() => {
if (!queryClient.getQueryData(["youtubeVideoCategories"])) {
queryClient.setQueryData(["youtubeVideoCategories"], categories);
Expand All @@ -241,42 +245,32 @@ export default function ProjectView({
<div className="mx-auto flex w-full flex-col flex-1 pb-10 gap-4 max-w-[1260px]">
<div className="container flex justify-between">
<div className="flex items-center gap-2">
<p>Status: </p>
{(() => {
switch (project!.status) {
case "public":
return <Badge variant="default"></Badge>;
case "unlisted":
return <Badge variant="secondary">Unlisted</Badge>;
case "closed":
return <Badge variant="destructive">Closed</Badge>;
}
})()}
<p>{t("status.label")}: </p>
<Badge variant="secondary">{t("status.unlisted")}</Badge>
</div>

{project?.status === "unlisted" && (
<Button
variant="outline"
className="self-end"
onClick={() => setIsEditing((prev) => !prev)}
>
{isEdititng ? "Stop Editing" : "Edit"}
</Button>
)}
<Button
variant="outline"
className="self-end"
onClick={() => setIsEditing((prev) => !prev)}
>
{isEdititng ? t("edit.stop_button") : t("edit.start_button")}
</Button>
</div>

<iframe
src={`https://www.youtube.com/embed/${project!.videoId}`}
className="border-none relative w-full aspect-video"
title="YouTube video player"
title={t("video_player_title")}
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
/>

<div className="self-start flex flex-col gap-2 container">
{isEdititng ? (
<ProjectForm lang={lang}
<ProjectForm
lang={lang}
mutate={mutate}
isPending={isPending}
defaultValues={project!}
Expand Down

0 comments on commit fe37f3b

Please sign in to comment.