dev

.eslintrc.js

@@ -46,8 +46,8 @@ module.exports = {
     'react/function-component-definition': [
       'warn',
       {
-        namedComponents: 'function-declaration',
-        unnamedComponents: 'function-expression',
+        namedComponents: 'arrow-function',
+        unnamedComponents: 'arrow-function',
       },
     ],
     'react/jsx-filename-extension': [

.github/wip-screenshot.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.node-version'
+          node-version-file: 'package.json'
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/lint-test.yml

@@ -14,7 +14,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.node-version'
+          node-version-file: 'package.json'
 
       - name: install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/tag-on-push.yml

@@ -18,7 +18,7 @@ jobs:
       - name: setup node
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.node-version'
+          node-version-file: 'package.json'
 
       - name: install dependencies
         run: yarn install --frozen-lockfile

.github/workflows/upload-build-files.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version-file: '.node-version'
+          node-version-file: 'package.json'
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile

.vscode/settings.json

@@ -3,5 +3,6 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
     ["cn\\('([^']*)'\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  ],
+  "conventionalCommits.gitmoji": false
 }

electron/api.ts

@@ -337,6 +337,19 @@ export const router = t.router({
       },
     );
   }),
+  getVrcWorldInfoByWorldId: procedure.input(z.string()).query(async (ctx) => {
+    log.debug('getVrcWorldInfoByWorldId', ctx.input);
+    const result = await service.getVrcWorldInfoByWorldId(ctx.input);
+    return result.match(
+      (r) => {
+        return r;
+      },
+      (error) => {
+        logError(error);
+        return null;
+      },
+    );
+  }),
 });
 
 export type AppRouter = typeof router;

electron/service.ts

@@ -460,6 +460,19 @@ const getVRChatPhotoFolderYearMonthList =
 const getVRChatPhotoItemData = (photoPath: string) => {
   return vrchatPhotoService.getVRChatPhotoItemData(photoPath);
 };
+const getVrcWorldInfoByWorldId = async (
+  worldId: string,
+): Promise<neverthrow.Result<{ name: string }, Error>> => {
+  const reqUrl = `https://api.vrchat.cloud/api/1/worlds/${worldId}`;
+  const response = await fetch(reqUrl);
+  if (!response.ok) {
+    return neverthrow.err(
+      new Error(`getVrcWorldInfoByWorldId: ${response.statusText}`),
+    );
+  }
+  const json = await response.json();
+  return neverthrow.ok({ name: json.name });
+};
 
 const getService = (settingStore: ReturnType<typeof getSettingStore>) => {
   return {
@@ -488,6 +501,7 @@ const getService = (settingStore: ReturnType<typeof getSettingStore>) => {
     getVRChatPhotoWithWorldIdAndDate:
       getVRChatPhotoWithWorldIdAndDate(settingStore),
     getVRChatPhotoItemData,
+    getVrcWorldInfoByWorldId,
   };
 };
 

electron/service/infoFile/createWorldNameImage.ts

@@ -12,7 +12,6 @@ interface Props {
   exif: {
     // 撮影日
     dateTimeOriginal: Date;
-    description: string;
   };
   imageWidth?: number;
 }
@@ -97,7 +96,7 @@ const createOGPImage = async ({ worldName, date, exif, imageWidth }: Props) => {
             exif.dateTimeOriginal,
             'yyyy-MM-dd HH:mm:ss',
           ),
-          ImageDescription: exif.description,
+          ImageDescription: worldName,
         },
       },
     });

electron/service/infoFile/service.ts

@@ -103,7 +103,6 @@ const getToCreateMap = async (props: {
         },
         exif: {
           dateTimeOriginal: utcDate,
-          description: info.worldId,
         },
         imageWidth: props.imageWidth,
       });

electron/service/type.ts

@@ -84,7 +84,7 @@ const JoinInfoFileNameSchema = z
 type JoinInfoFileName = z.infer<typeof JoinInfoFileNameSchema>;
 const parseJoinInfoFileName = (joinInfoFileName: JoinInfoFileName) => {
   const matches = joinInfoFileName.match(
-    /^VRChat_(\d{4})-(\d{2})-(\d{2})_(\d{2})-(\d{2})-(\d{2}).(\d{3})_wrld_(\w{8}-\w{4}-\w{4}-\w{4}-\w{12})$/,
+    /^VRChat_(\d{4})-(\d{2})-(\d{2})_(\d{2})-(\d{2})-(\d{2}).(\d{3})_(wrld_\w{8}-\w{4}-\w{4}-\w{4}-\w{12})$/,
   );
   if (!matches) {
     return neverthrow.err('parseJoinInfoFileName: matches is null');

package.json

@@ -5,7 +5,7 @@
   "author": {
     "name": "tktcorporation"
   },
-  "description": "Starter using Vite 2+ React +Typescript + Electron for fast prototyping.",
+  "description": "",
   "keywords": [
     "vite",
     "react",
@@ -34,6 +34,13 @@
     "lint": "npx @biomejs/biome check .",
     "lint:fix": "npx @biomejs/biome check --apply ."
   },
+  "simple-git-hooks": {
+    "pre-commit": "yarn lint && yarn type-check"
+  },
+  "engines": {
+    "node": "20",
+    "yarn": "1"
+  },
   "dependencies": {
     "@heroicons/react": "^2.0.18",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -112,9 +119,6 @@
     "ts-prune": "^0.10.3",
     "typescript": "^5.2.2"
   },
-  "simple-git-hooks": {
-    "pre-commit": "yarn lint && yarn type-check"
-  },
   "build": {
     "asar": true,
     "files": [

src/page/photoList/PhotoList.tsx

@@ -2,7 +2,6 @@ import { trpcReact } from '@/trpc';
 import React, { useEffect, useState } from 'react';
 
 import Sidebar from '@/components/SideBar';
-import Photo from '@/components/ui/Photo';
 import VrcPhoto from '@/components/ui/VrcPhoto';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -11,7 +10,28 @@ import { RefreshCw } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import { usePhotoItems, useYearMonthList } from './composable';
 
-function PhotoList() {
+const WorldInfo = ({
+  vrcWorldId,
+  datetime,
+}: {
+  vrcWorldId: string;
+  datetime: { year: string; month: string; day: string };
+}) => {
+  const { data } = trpcReact.getVrcWorldInfoByWorldId.useQuery(vrcWorldId, {
+    staleTime: 1000 * 60 * 5, // キャッシュの有効期限を5分に設定
+    cacheTime: 1000 * 60 * 30, // キャッシュされたデータを30分間メモリに保持
+  });
+  return (
+    <div>
+      <p>{data?.name ?? vrcWorldId}</p>
+      <p className="text-sm text-gray-500">
+        Join: {datetime.year}/{datetime.month}/{datetime.day}
+      </p>
+    </div>
+  );
+};
+
+const PhotoList = () => {
   const { sortedYearMonthList, refetchYearMonthList } = useYearMonthList();
   const firstYearMonth = sortedYearMonthList?.[0] || { year: '', month: '' };
   const [selectedFolderYearMonth, setSelectedFolderYearMonth] =
@@ -110,7 +130,6 @@ function PhotoList() {
             <div className="col-span-4">
               <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 p-4">
                 {photoItemList?.map((item) => {
-                  // TODO: join だけだったら簡易表示、photo もあればグルーピングして表示
                   const content =
                     item.type === 'PHOTO' ? (
                       <VrcPhoto
@@ -120,10 +139,26 @@ function PhotoList() {
                         }}
                       />
                     ) : (
-                      <Photo photoPath={item.path} />
+                      <WorldInfo
+                        vrcWorldId={item.worldId}
+                        datetime={{
+                          year: item.datetime.date.year,
+                          month: item.datetime.date.month,
+                          day: item.datetime.date.day,
+                        }}
+                      />
                     );
 
-                  return <div key={item.path}>{content}</div>;
+                  return (
+                    <div
+                      key={item.path}
+                      className={
+                        item.type === 'PHOTO' ? 'col-span-1' : 'col-span-full'
+                      }
+                    >
+                      {content}
+                    </div>
+                  );
                 })}
               </div>
             </div>
@@ -132,7 +167,7 @@ function PhotoList() {
       </div>
     </div>
   );
-}
+};
 
 PhotoList.whyDidYouRender = true;