TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inline

Browse Source
This commit is contained in:
Manav Rathi
2025-01-02 15:43:42 +05:30
parent 6adadcaf93
commit 2138ef602a
2 changed files with 79 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
web/apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
View File

@@ -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 =
'&copy; <a target="_blank" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 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<MapBoxProps> = ({
location,
mapEnabled,
openUpdateMapConfirmationDialog,
}) => {
const mapBoxContainerRef = useRef<HTMLDivElement>(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 ? (
<MapBoxContainer ref={mapBoxContainerRef} />
) : (
<MapBoxEnableContainer>
<ChipButton onClick={openUpdateMapConfirmationDialog}>
{t("enable_map")}
</ChipButton>
</MapBoxEnableContainer>
);
};
export default MapBox;

81
web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
View File

@@ -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<MapBoxProps> = ({
location,
mapEnabled,
openUpdateMapConfirmationDialog,
}) => {
const urlTemplate = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const attribution =
'&copy; <a target="_blank" rel="noopener" href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
const zoom = 16;
const mapBoxContainerRef = useRef<HTMLDivElement>(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 ? (
<MapBoxContainer ref={mapBoxContainerRef} />
) : (
<MapBoxEnableContainer>
<ChipButton onClick={openUpdateMapConfirmationDialog}>
{t("enable_map")}
</ChipButton>
</MapBoxEnableContainer>
);
};
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;