Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-10-15 20:07:23 +02:00
Code Issues Projects Releases Wiki Activity

Fix tall videos from covering height in export page (#12725)

Browse Source 
* Fix tall videos from covering height in export page

* Handle mobile landscape
This commit is contained in:
Nicolas Mowen 2024-08-02 07:06:15 -06:00 committed by GitHub
parent b28cc45510
commit 88d4b694f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/pages/Exports.tsx
View File

@ -13,9 +13,11 @@ import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog"; import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import { cn } from "@/lib/utils";
import { DeleteClipType, Export } from "@/types/export"; import { DeleteClipType, Export } from "@/types/export";
import axios from "axios"; import axios from "axios";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { isMobile } from "react-device-detect";
import { LuFolderX } from "react-icons/lu"; import { LuFolderX } from "react-icons/lu";
import { toast } from "sonner"; import { toast } from "sonner";
import useSWR from "swr"; import useSWR from "swr";
@ -92,6 +94,7 @@ function Exports() {
// Viewing // Viewing
const [selected, setSelected] = useState<Export>(); const [selected, setSelected] = useState<Export>();
const [selectedAspect, setSelectedAspect] = useState(0.0);
return ( return (
<div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2"> <div className="flex size-full flex-col gap-2 overflow-hidden px-1 pt-2 md:p-2">
@ -129,15 +132,27 @@ function Exports() {
} }
}} }}
> >
<DialogContent className="max-w-7xl"> <DialogContent
<DialogTitle>{selected?.name}</DialogTitle> className={cn("max-w-[80%]", isMobile && "landscape:max-w-[60%]")}
>
<DialogTitle className="capitalize">
{selected?.name?.replaceAll("_", " ")}
</DialogTitle>
<video <video
className="size-full rounded-lg md:rounded-2xl" className={cn(
"size-full rounded-lg md:rounded-2xl",
selectedAspect < 1.5 && "aspect-video h-full",
)}
playsInline playsInline
preload="auto" preload="auto"
autoPlay autoPlay
controls controls
muted muted
onLoadedData={(e) =>
setSelectedAspect(
e.currentTarget.videoWidth / e.currentTarget.videoHeight,
)
}
> >
<source <source
src={`${baseUrl}${selected?.video_path?.replace("/media/frigate/", "")}`} src={`${baseUrl}${selected?.video_path?.replace("/media/frigate/", "")}`}