Use new timeformat hook

web/public/locales/en/components/dialog.json

@@ -101,7 +101,7 @@
   "recording": {
     "shareTimestamp": {
       "label": "Share Timestamp",
-      "title": "Share Review Timestamp",
+      "title": "Share Timestamp",
       "description": "Share a timestamped URL of current player position or choose a custom timestamp. Note that this is not a public share URL and is only accessible to users with access to Frigate and this camera.",
       "current": "Current Player Timestamp",
       "custom": "Custom Timestamp",

web/src/components/overlay/MobileReviewSettingsDrawer.tsx

@@ -518,12 +518,6 @@ export default function MobileReviewSettingsDrawer({
     content = (
       <div className="w-full">
         <div className="relative h-8 w-full">
-          <div
-            className="absolute left-0 text-selected"
-            onClick={() => setDrawerMode("select")}
-          >
-            {t("button.back", { ns: "common" })}
-          </div>
           <div className="absolute left-1/2 -translate-x-1/2 text-muted-foreground">
             {t("recording.shareTimestamp.title", { ns: "components/dialog" })}
           </div>

web/src/components/overlay/ShareTimestampDialog.tsx

@@ -16,7 +16,7 @@ import {
 } from "@/components/ui/popover";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Separator } from "@/components/ui/separator";
-import { useFormattedTimestamp } from "@/hooks/use-date-utils";
+import { useFormattedTimestamp, useTimeFormat } from "@/hooks/use-date-utils";
 import { cn } from "@/lib/utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { getUTCOffset } from "@/utils/dateUtil";
@@ -84,7 +84,7 @@ export default function ShareTimestampDialog({
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent className="sm:rounded-lg md:rounded-2xl">
         <DialogHeader>
-          <DialogTitle>
+          <DialogTitle className="whitespace-nowrap">
             {t("recording.shareTimestamp.title", { ns: "components/dialog" })}
           </DialogTitle>
           <DialogDescription className="sr-only">
@@ -120,9 +120,10 @@ export function ShareTimestampContent({
 }: Readonly<ShareTimestampContentProps>) {
   const { t } = useTranslation(["common", "components/dialog"]);
   const { data: config } = useSWR<FrigateConfig>("config");
+  const timeFormat = useTimeFormat(config);
   const currentTimestampLabel = useFormattedTimestamp(
     currentTime,
-    config?.ui.time_format == "24hour"
+    timeFormat == "24hour"
       ? t("time.formattedTimestamp.24hour")
       : t("time.formattedTimestamp.12hour"),
     config?.ui.timezone,
@@ -199,7 +200,7 @@ export function ShareTimestampContent({
         className={cn("mt-4", !isDesktop && "flex flex-col-reverse gap-4")}
       >
         {onCancel && (
-          <Button
+          <button
             type="button"
             className={cn(
               "cursor-pointer p-2 text-center",
@@ -208,7 +209,7 @@ export function ShareTimestampContent({
             onClick={onCancel}
           >
             {t("button.cancel", { ns: "common" })}
-          </Button>
+          </button>
         )}
         <Button
           className={cn(!isDesktop && "w-full")}
@@ -236,6 +237,7 @@ function CustomTimestampSelector({
 }: Readonly<CustomTimestampSelectorProps>) {
   const { t } = useTranslation(["common"]);
   const { data: config } = useSWR<FrigateConfig>("config");
+  const timeFormat = useTimeFormat(config);
 
   const timezoneOffset = useMemo(
     () =>
@@ -271,7 +273,7 @@ function CustomTimestampSelector({
 
   const formattedTimestamp = useFormattedTimestamp(
     displayTimestamp,
-    config?.ui.time_format == "24hour"
+    timeFormat == "24hour"
       ? t("time.formattedTimestamp.24hour")
       : t("time.formattedTimestamp.12hour"),
   );

web/src/pages/Events.tsx

@@ -280,6 +280,7 @@ export default function Events() {
         // this pattern is also used LiveCameraView to enter recording view
         severity: "alert",
         timelineType: notificationTab,
+        navigationSource: "shared-link",
       },
       true,
     );

web/src/types/record.ts

@@ -40,6 +40,7 @@ export type RecordingStartingPoint = {
   startTime: number;
   severity: ReviewSeverity;
   timelineType?: TimelineType;
+  navigationSource?: "shared-link";
 };
 
 export type RecordingPlayerError = "stalled" | "startup";

web/src/views/recording/RecordingView.tsx

@@ -349,6 +349,16 @@ export function RecordingView({
     [location.pathname, mainCamera, t],
   );
 
+  const handleBack = useCallback(() => {
+    // if we came from a direct share link, there is no history to go back to, so navigate to the homepage instead
+    if (recording?.navigationSource === "shared-link") {
+      navigate("/");
+      return;
+    }
+
+    navigate(-1);
+  }, [navigate, recording?.navigationSource]);
+
   useEffect(() => {
     if (!scrubbing) {
       if (Math.abs(currentTime - playerTime) > 10) {
@@ -599,7 +609,7 @@ export function RecordingView({
               className="flex items-center gap-2.5 rounded-lg"
               aria-label={t("label.back", { ns: "common" })}
               size="sm"
-              onClick={() => navigate(-1)}
+              onClick={handleBack}
             >
               <IoMdArrowRoundBack className="size-5 text-secondary-foreground" />
               {isDesktop && (