image info for mobile web

lazyxu · Dec 27, 2023 · 34cb084 · 34cb084
1 parent 4362365
commit 34cb084
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 18 deletions.
diff --git a/ui/mobile/App.js b/ui/mobile/App.js
@@ -17,6 +17,7 @@ import Toast from 'react-native-toast-message';
 import "./global";
 import Photos from './pages/Photos';
 import SystemConfig from './pages/Setting/SystemConfig';
+import Info from './pages/Windows/Info';
 import Viewer from './pages/Windows/Viewer';
 
 const Albums = () => {
@@ -111,9 +112,10 @@ function ThemeApp() {
   return (
     <PaperProvider theme={paperTheme}>
       <NavigationContainer>
-        <Stack.Navigator initialRouteName="App1" screenOptions={{ headerShown: false }}>
+        <Stack.Navigator initialRouteName="App1" screenOptions={{ headerShown: false, animation: 'slide_from_bottom' }}>
           <Stack.Screen name="App1" component={App1} />
           <Stack.Screen name="Viewer" component={Viewer} />
+          <Stack.Screen name="Info" component={Info} />
         </Stack.Navigator>
         <Toast />
       </NavigationContainer>

diff --git a/ui/mobile/pages/Photos/index.jsx b/ui/mobile/pages/Photos/index.jsx
@@ -58,7 +58,7 @@ export default function ({ navigation }) {
                             alignContent: "flex-start"
                         }}>
                             {metadataYear.list.map(hash =>
-                                <TouchableHighlight key={hash} onPress={() => { navigation.navigate("Viewer", { hash }); }}  >
+                                <TouchableHighlight key={hash} onPress={() => navigation.navigate("Viewer", { hash })}  >
                                     <Image style={{
                                         width: width,
                                         height: width,

diff --git a/ui/mobile/pages/Windows/Info.jsx b/ui/mobile/pages/Windows/Info.jsx
@@ -0,0 +1,73 @@
+import { parseShotEquipment } from "@kfs/common/api/utils";
+import { getMetadata } from "@kfs/common/api/webServer/exif";
+import { getSysConfig } from "@kfs/common/hox/sysConfig";
+import { useEffect, useState } from 'react';
+import { TouchableHighlight, View } from 'react-native';
+import { Appbar, Text } from "react-native-paper";
+
+function formatTime(DateTime, SubsecTime, OffsetTime) {
+    let t = "";
+    if (DateTime) {
+        t += DateTime;
+    }
+    if (SubsecTime) {
+        t += "." + SubsecTime;
+    }
+    if (OffsetTime) {
+        t += " " + OffsetTime;
+    }
+    return t;
+}
+
+function parseLocation(metadata) {
+    let { exif } = metadata;
+    if (exif) {
+        let t = "";
+        if (exif.GPSLatitudeRef) {
+            t += exif.GPSLatitudeRef + exif.GPSLatitude + ", " + exif.GPSLongitudeRef + exif.GPSLongitude;
+        }
+        return t;
+    }
+}
+
+export default function ({ navigation, route }) {
+    const { hash } = route.params;
+    const [metadata, setMetadata] = useState();
+    const [sameFiles, setSameFiles] = useState([]);
+    const sysConfig = getSysConfig();
+    useEffect(() => {
+        getMetadata(hash).then(setMetadata);
+        // listDriverFileByHash(hash).then(sf => {
+        //     setSameFiles(sf);
+        // });
+    }, []);
+    console.log("Viewer", hash, metadata);
+    return (
+        <>
+            <Appbar.Header mode="center-aligned">
+                <Appbar.Content title="信息" />
+                <TouchableHighlight key={hash} onPress={() => navigation.pop()}  >
+                    <Text>完成</Text>
+                </TouchableHighlight>
+            </Appbar.Header>
+            {!metadata ?
+                <View style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }}>
+                    <Text >TODO</Text>
+                </View> : <>
+                    <Text>哈希值：{hash}</Text>
+                    {metadata.exif && <>
+                        <Text>原始时间：{formatTime(metadata.exif.DateTimeOriginal, metadata.exif.SubsecTimeOriginal, metadata.exif.OffsetTimeOriginal)}</Text>
+                        <Text>数字化时间：{formatTime(metadata.exif.DateTimeDigitized, metadata.exif.SubsecTimeDigitized, metadata.exif.OffsetTimeDigitized)}</Text>
+                        <Text>修改时间：{formatTime(metadata.exif.DateTime, metadata.exif.SubsecTime, metadata.exif.OffsetTime)}</Text>
+                        <Text>图片信息：{ }</Text>
+                        <Text>相机信息：{parseShotEquipment(metadata)}</Text>
+                        <Text>位置：{parseLocation(metadata)}</Text>
+                    </>}
+                </>}
+        </>
+    );
+}
diff --git a/ui/mobile/pages/Windows/Viewer.jsx b/ui/mobile/pages/Windows/Viewer.jsx
@@ -83,7 +83,8 @@ export default function ({ navigation, route }) {
             <Appbar.Header>
                 <Appbar.BackAction onPress={() => navigation.pop()} />
                 <Appbar.Action icon="export-variant" onPress={shareImage} />
-                <Appbar.Action icon="download" onPress={downloadImage} />
+                <Appbar.Action icon="download-outline" onPress={downloadImage} />
+                <Appbar.Action icon="information-outline" onPress={() => navigation.navigate("Info", { hash })} />
             </Appbar.Header>
             <ViewShot ref={ref} style={{
                 padding: "0",

diff --git a/ui/packages/common/api/webServer/exif.js b/ui/packages/common/api/webServer/exif.js
@@ -32,6 +32,17 @@ export async function listExif() {
     }
 }
 
+export async function getMetadata(hash) {
+    try {
+        console.log('web.getMetadata', hash);
+        return await httpGet("/api/v1/metadata", {
+            hash,
+        });
+    } catch (e) {
+        window.noteError("获取文件元数据失败：" + (typeof e.response?.data === 'string' ? e.response?.data : e.message));
+        throw e;
+    }
+}
 
 export async function listDCIMMetadataTime() {
     try {

diff --git a/ui/packages/mui/api/exif.js b/ui/packages/mui/api/exif.js
@@ -1,5 +1,5 @@
 import { httpPost as localHttpPost } from "@kfs/common/api/localServer";
-import { httpGet, httpPost } from "@kfs/common/api/webServer";
+import { httpPost } from "@kfs/common/api/webServer";
 import { getSysConfig } from "@kfs/common/hox/sysConfig";
 import { noteError } from "@kfs/mui/components/Notification";
 
@@ -45,16 +45,4 @@ export async function startDriverLocalFileFilter(start, driverId, srcPath, ignor
         noteError("测试过滤规则设置失败：" + (typeof e.response?.data === 'string' ? e.response?.data : e.message));
         throw e;
     }
-}
-
-export async function getMetadata(hash) {
-    try {
-        console.log('web.getMetadata', hash);
-        return await httpGet("/api/v1/metadata", {
-            hash,
-        });
-    } catch (e) {
-        noteError("获取文件元数据失败：" + (typeof e.response?.data === 'string' ? e.response?.data : e.message));
-        throw e;
-    }
 }
diff --git a/ui/packages/mui/pages/Windows/ImageViewer.jsx b/ui/packages/mui/pages/Windows/ImageViewer.jsx
@@ -1,5 +1,5 @@
+import { getMetadata } from "@kfs/common/api/webServer/exif";
 import { getSysConfig } from "@kfs/common/hox/sysConfig";
-import { getMetadata } from "@kfs/mui/api/exif";
 import { downloadByHash, listDriverFileByHash } from "@kfs/mui/api/fs";
 import { TitleBar, Window, WorkingArea } from "@kfs/mui/components/Window/Window";
 import FileAttribute from "@kfs/mui/pages/Files/DriverFiles/FileAttribute";

diff --git a/ui/packages/mui/pages/Windows/VideoViewer.jsx b/ui/packages/mui/pages/Windows/VideoViewer.jsx
@@ -1,5 +1,5 @@
+import { getMetadata } from "@kfs/common/api/webServer/exif";
 import { getSysConfig } from "@kfs/common/hox/sysConfig";
-import { getMetadata } from "@kfs/mui/api/exif";
 import { downloadByHash, listDriverFileByHash } from "@kfs/mui/api/fs";
 import { TitleBar, Window, WorkingArea } from "@kfs/mui/components/Window/Window";
 import FileAttribute from "@kfs/mui/pages/Files/DriverFiles/FileAttribute";