batuhancoskun/lazuri-doviguram
1
0
Fork 0
mirror of https://github.com/samkaraca/lazuri-doviguram.git synced 2026-04-29 17:59:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Remove youtube vide url media tester from theme side bar.

Browse Source
This commit is contained in:
Hikmet 2025-01-29 16:59:56 +03:00
parent 894b6cf0de
commit 3aaf7d9a9a
7 changed files with 72 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package-lock.json generated
View File

@ -14,6 +14,7 @@
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.4.1",
"@mui/material": "^6.4.1",
"@next/third-parties": "^15.1.6",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-toast": "^1.2.5",
"@tanstack/react-query": "^5.65.1",
@ -2130,6 +2131,18 @@
"node": ">= 10"
}
},
"node_modules/@next/third-parties": {
"version": "15.1.6",
"resolved": "https://registry.npmjs.org/@next/third-parties/-/third-parties-15.1.6.tgz",
"integrity": "sha512-F0uemUqFwD3lLx5SrWXYRe9dZvMVkO0rFuMnvLiPBcagxNc23Ufl5cNXEm4Yuo8O1Mu8dgh+VjExMz1Td4vBew==",
"dependencies": {
"third-party-capital": "1.0.20"
},
"peerDependencies": {
"next": "^13.0.0 || ^14.0.0 || ^15.0.0",
"react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0"
}
},
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -8337,6 +8350,11 @@
"node": ">=0.8"
}
},
"node_modules/third-party-capital": {
"version": "1.0.20",
"resolved": "https://registry.npmjs.org/third-party-capital/-/third-party-capital-1.0.20.tgz",
"integrity": "sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA=="
},
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

1
package.json
View File

@ -15,6 +15,7 @@
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.4.1",
"@mui/material": "^6.4.1",
"@next/third-parties": "^15.1.6",
"@radix-ui/react-slot": "^1.1.1",
"@radix-ui/react-toast": "^1.2.5",
"@tanstack/react-query": "^5.65.1",

2
src/api/theme/useAdminUpdateTheme.ts
View File

@ -20,7 +20,7 @@ export const useAdminUpdateTheme = () => {
title: string;
explanation: string;
image?: string | null;
youtubeVideoUrl?: string;
youtubeVideoUrl?: string | null;
};
}) => {
const payload = {

2
src/backend/services/theme/updateTheme.ts
View File

@ -51,7 +51,7 @@ export const updateTheme = async (
if (title) updateData.title = title;
if (slug) updateData.slug = slug;
if (explanation) updateData.explanation = explanation;
if (youtubeVideoUrl) updateData.youtubeVideoUrl = youtubeVideoUrl;
if (youtubeVideoUrl || youtubeVideoUrl === null) updateData.youtubeVideoUrl = youtubeVideoUrl;
if (image || image === null) updateData.image = image;
await Theme.updateOne(

18
src/components/media_tester/index.tsx
View File

@ -36,13 +36,12 @@ export function MediaTester({
>
<input
required
className={`simple ${
status === "error"
className={`simple ${status === "error"
? "error"
: status === "success"
? "success"
: undefined
}`}
? "success"
: undefined
}`}
id="foto"
type="text"
placeholder={placeholder}
@ -52,13 +51,12 @@ export function MediaTester({
}
/>
<button
className={`simple basic ${
status === "error"
className={`simple basic ${status === "error"
? "error"
: status === "success"
? "success"
: undefined
}`}
? "success"
: undefined
}`}
disabled={status !== "idle"}
>
Test

22
src/components/ui/input.tsx Normal file
View File

@ -0,0 +1,22 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"
export { Input }

39
src/features/admin_tools/theme_side_bar.tsx
View File

@ -1,10 +1,8 @@
import { MediaTester } from "@/components/media_tester";
import styles from "./theme_side_bar.module.scss";
import { Dispatch, SetStateAction, useCallback, useEffect, useRef, useState } from "react";
import {
DeleteOutline,
DesignServices,
Upload,
WarningAmber,
} from "@mui/icons-material";
import { TextField } from "@mui/material";
@ -15,15 +13,17 @@ import { useAdminTheme } from "@/api/theme/useAdminTheme";
import { useRouter } from "next/router";
import { useQueryClient } from "@tanstack/react-query";
import { useAdminDeleteTheme } from "@/api/theme/useAdminDeleteTheme";
import { OptionalStringValueProperty } from "@/features/activity_editor/model/view_model";
import { useUploadImage } from "@/api/useUploadImage";
import { Loader2Icon, UploadCloudIcon, Trash2Icon } from "lucide-react";
import { Loader2Icon, UploadCloudIcon, Trash2Icon, SquarePlayIcon } from "lucide-react";
import getYouTubeID from "get-youtube-id";
import { YouTubeEmbed } from "@next/third-parties/google"
import { Input } from "@/components/ui/input";
interface ClientTheme {
title: string;
explanation: string;
image: string | null;
youtubeVideoUrl: OptionalStringValueProperty;
youtubeVideoUrl: string | null;
imageFile: File | null;
}
@ -50,7 +50,7 @@ export function ThemeSideBar({
title: "",
explanation: "",
image: null,
youtubeVideoUrl: { status: "idle", value: "" },
youtubeVideoUrl: null,
imageFile: null,
});
@ -61,7 +61,7 @@ export function ThemeSideBar({
title: dbTheme.title,
explanation: dbTheme.explanation,
image: dbTheme.image ?? null,
youtubeVideoUrl: { status: "success", value: dbTheme.youtubeVideoUrl ?? "" },
youtubeVideoUrl: dbTheme.youtubeVideoUrl ?? null,
imageFile: null,
});
}
@ -77,8 +77,10 @@ export function ThemeSideBar({
(dbTheme.image && clientTheme.image && dbTheme.image !== clientTheme.image) ||
(!dbTheme.image && clientTheme.image) ||
(dbTheme.image && !clientTheme.image) ||
(clientTheme.youtubeVideoUrl.status === "success" &&
dbTheme.youtubeVideoUrl !== clientTheme.youtubeVideoUrl.value)
(dbTheme.youtubeVideoUrl && clientTheme.youtubeVideoUrl && dbTheme.youtubeVideoUrl !== clientTheme.youtubeVideoUrl) ||
(!dbTheme.youtubeVideoUrl && clientTheme.youtubeVideoUrl) ||
(dbTheme.youtubeVideoUrl && !clientTheme.youtubeVideoUrl)
);
}, [dbTheme, clientTheme]);
@ -109,7 +111,7 @@ export function ThemeSideBar({
title: dbTheme.title,
explanation: dbTheme.explanation,
image: dbTheme.image ?? null,
youtubeVideoUrl: { status: "success", value: dbTheme.youtubeVideoUrl ?? "" },
youtubeVideoUrl: dbTheme.youtubeVideoUrl ?? null,
imageFile: null,
});
}
@ -123,7 +125,7 @@ export function ThemeSideBar({
title: clientTheme.title,
explanation: clientTheme.explanation,
image: clientTheme.image || null,
youtubeVideoUrl: clientTheme.youtubeVideoUrl.status === "success" ? clientTheme.youtubeVideoUrl.value : undefined
youtubeVideoUrl: clientTheme.youtubeVideoUrl || null
}
});
@ -222,13 +224,14 @@ export function ThemeSideBar({
)}
</div>
</div>
<MediaTester
label="Tema YouTube Video Linki"
placeholder="https://www.youtube.com/watch?v=VQGLYY1Q8yA"
media={clientTheme.youtubeVideoUrl}
type="youtube-video"
setMedia={(value) => setClientTheme(prev => ({ ...prev, youtubeVideoUrl: typeof value === 'function' ? value(prev.youtubeVideoUrl) : value }))}
/>
<section>
<div className="border border-2 border-gray-200 rounded-md overflow-hidden">
{clientTheme.youtubeVideoUrl ? <YouTubeEmbed
videoid={getYouTubeID(clientTheme.youtubeVideoUrl) ?? ""}
/> : <div className="flex items-center gap-2 w-full justify-center aspect-video !bg-gray-200"><SquarePlayIcon />Youtube videosu ekleyin</div>}
</div>
<Input placeholder="Youtube video linki..." className="mt-2" value={clientTheme.youtubeVideoUrl ?? ""} onChange={(e) => setClientTheme(x => ({ ...x, youtubeVideoUrl: e.target.value }))} />
</section>
</div>
<footer>
<div>