From 2138ef602a18b69b91f03428bb4d800035770cf4 Mon Sep 17 00:00:00 2001 From: Manav Rathi Date: Thu, 2 Jan 2025 15:43:42 +0530 Subject: [PATCH] Inline --- .../PhotoViewer/FileInfo/MapBox.tsx | 81 ------------------- .../components/PhotoViewer/FileInfo/index.tsx | 81 ++++++++++++++++++- 2 files changed, 79 insertions(+), 83 deletions(-) delete mode 100644 web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx deleted file mode 100644 index 8023cfc69f..0000000000 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import { haveWindow } from "@/base/env"; -import { type Location } from "@/base/types"; -import { ChipButton } from "@/new/photos/components/mui/ChipButton"; -import { styled } from "@mui/material"; -import { t } from "i18next"; -import { useEffect, useRef } from "react"; - -import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css"; // Re-uses images from ~leaflet package -import "leaflet/dist/leaflet.css"; -// eslint-disable-next-line @typescript-eslint/no-require-imports -haveWindow() && require("leaflet-defaulticon-compatibility"); -const L = haveWindow() - ? // eslint-disable-next-line @typescript-eslint/no-require-imports - (require("leaflet") as typeof import("leaflet")) - : null; - -const LAYER_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; -const LAYER_TILE_ATTRIBUTION = - '© OpenStreetMap contributors'; -const ZOOM_LEVEL = 16; - -const MapBoxContainer = styled("div")` - height: 200px; - width: 100%; -`; -const MapBoxEnableContainer = styled(MapBoxContainer)` - position: relative; - display: flex; - justify-content: center; - align-items: center; - background-color: rgba(255, 255, 255, 0.09); -`; - -interface MapBoxProps { - location: Location; - mapEnabled: boolean; - openUpdateMapConfirmationDialog: () => void; -} - -const MapBox: React.FC = ({ - location, - mapEnabled, - openUpdateMapConfirmationDialog, -}) => { - const mapBoxContainerRef = useRef(null); - - useEffect(() => { - const mapContainer = mapBoxContainerRef.current; - if (mapEnabled) { - const position: L.LatLngTuple = [ - location.latitude, - location.longitude, - ]; - if (mapContainer && !mapContainer.hasChildNodes()) { - const map = L.map(mapContainer).setView(position, ZOOM_LEVEL); - L.tileLayer(LAYER_TILE_URL, { - attribution: LAYER_TILE_ATTRIBUTION, - }).addTo(map); - L.marker(position).addTo(map).openPopup(); - } - } else { - if (mapContainer?.hasChildNodes()) { - if (mapContainer.firstChild) { - mapContainer.removeChild(mapContainer.firstChild); - } - } - } - }, [mapEnabled]); - - return mapEnabled ? ( - - ) : ( - - - {t("enable_map")} - - - ); -}; - -export default MapBox; diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx index 9c49bae260..dc5fdd579e 100644 --- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx +++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx @@ -5,6 +5,7 @@ import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer"; import { Titlebar } from "@/base/components/Titlebar"; import { EllipsizedTypography } from "@/base/components/Typography"; import { useModalVisibility } from "@/base/components/utils/modal"; +import { haveWindow } from "@/base/env"; import { nameAndExtension } from "@/base/file-name"; import log from "@/base/log"; import type { Location } from "@/base/types"; @@ -72,7 +73,7 @@ import type { DisplayFile } from "components/PhotoFrame"; import { Formik } from "formik"; import { t } from "i18next"; import { GalleryContext } from "pages/gallery"; -import React, { useContext, useEffect, useMemo, useState } from "react"; +import React, { useContext, useEffect, useMemo, useRef, useState } from "react"; import { changeCaption, changeFileName, @@ -80,7 +81,16 @@ import { } from "utils/file"; import { PublicCollectionGalleryContext } from "utils/publicCollectionGallery"; import * as Yup from "yup"; -import MapBox from "./MapBox"; + +// Re-uses images from ~leaflet package. +import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css"; +import "leaflet/dist/leaflet.css"; +// eslint-disable-next-line @typescript-eslint/no-require-imports +haveWindow() && require("leaflet-defaulticon-compatibility"); +const leaflet = haveWindow() + ? // eslint-disable-next-line @typescript-eslint/no-require-imports + (require("leaflet") as typeof import("leaflet")) + : null; export interface FileInfoExif { tags: RawExifTags | undefined; @@ -841,6 +851,73 @@ const BasicDeviceCamera: React.FC<{ parsedExif: ExifInfo }> = ({ const openStreetMapLink = ({ latitude, longitude }: Location) => `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`; +interface MapBoxProps { + location: Location; + mapEnabled: boolean; + openUpdateMapConfirmationDialog: () => void; +} + +const MapBox: React.FC = ({ + location, + mapEnabled, + openUpdateMapConfirmationDialog, +}) => { + const urlTemplate = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"; + const attribution = + '© OpenStreetMap contributors'; + const zoom = 16; + + const mapBoxContainerRef = useRef(null); + + useEffect(() => { + const mapContainer = mapBoxContainerRef.current; + if (mapEnabled) { + const position: L.LatLngTuple = [ + location.latitude, + location.longitude, + ]; + if (mapContainer && !mapContainer.hasChildNodes()) { + const map = leaflet.map(mapContainer).setView(position, zoom); + leaflet + .tileLayer(urlTemplate, { + attribution, + }) + .addTo(map); + leaflet.marker(position).addTo(map).openPopup(); + } + } else { + if (mapContainer?.hasChildNodes()) { + if (mapContainer.firstChild) { + mapContainer.removeChild(mapContainer.firstChild); + } + } + } + }, [mapEnabled]); + + return mapEnabled ? ( + + ) : ( + + + {t("enable_map")} + + + ); +}; + +const MapBoxContainer = styled("div")` + height: 200px; + width: 100%; +`; + +const MapBoxEnableContainer = styled(MapBoxContainer)` + position: relative; + display: flex; + justify-content: center; + align-items: center; + background-color: rgba(255, 255, 255, 0.09); +`; + interface RawExifProps { open: boolean; onClose: () => void;