1000分動画　BGM更新 (#429)

* [video] fix dependencies * change music 脱lofigirl * fix #428
kani3camp · Jan 29, 2025 · 7a2f3d8 · 7a2f3d8
1 parent 2bb0b1e
commit 7a2f3d8
Show file tree

Hide file tree

Showing 12 changed files with 387 additions and 20,526 deletions.
diff --git a/video-maker/1000-minutes-simulator/.vscode/settings.json b/video-maker/1000-minutes-simulator/.vscode/settings.json
@@ -2,8 +2,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true,
-        "source.fixAll.stylelint": true
+        "source.fixAll.eslint": "explicit",
+        "source.fixAll.stylelint": "explicit"
     },
     "prettier.configPath": ".prettierrc.yaml",
     "cSpell.words": ["Lofi", "Milli", "pomodoro", "stylelint"]

diff --git a/video-maker/1000-minutes-simulator/next-env.d.ts b/video-maker/1000-minutes-simulator/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/video-maker/1000-minutes-simulator/package-lock.json b/video-maker/1000-minutes-simulator/package-lock.json
diff --git a/video-maker/1000-minutes-simulator/package.json b/video-maker/1000-minutes-simulator/package.json
@@ -5,7 +5,7 @@
     "scripts": {
         "dev": "next dev",
         "build": "next build",
-        "start": "next start -p 5000",
+        "start": "next start",
         "lint": "next lint",
         "stylelint": "stylelint --ignore-path .gitignore './src/**/*.{css,scss,ts,tsx}'",
         "typecheck": "tsc",
@@ -14,6 +14,7 @@
     },
     "dependencies": {
         "@emotion/react": "^11.10.0",
+        "jsmediatags": "^3.9.7",
         "next": "14.2.20",
         "next-i18next": "^12.0.1",
         "react": "18.2.0",
@@ -23,6 +24,7 @@
     },
     "devDependencies": {
         "@stylelint/postcss-css-in-js": "^0.38.0",
+        "@types/jsmediatags": "^3.9.6",
         "@types/node": "^18.6.4",
         "@types/react": "18.0.15",
         "@types/react-dom": "18.0.6",
@@ -33,7 +35,7 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-unused-imports": "^2.0.0",
         "prettier": "^2.7.1",
-        "stylelint": "^15.10.1",
+        "stylelint": "^14.16.1",
         "stylelint-config-idiomatic-order": "^9.0.0",
         "stylelint-config-prettier": "^9.0.3",
         "stylelint-config-standard": "^26.0.0",

diff --git a/video-maker/1000-minutes-simulator/public/locales/en/common.json b/video-maker/1000-minutes-simulator/public/locales/en/common.json
@@ -4,7 +4,7 @@
     "tips.poster_footer": "",
     "tips.comment": "Comment",
     "gauge.title": "Elapsed Time",
-    "gauge.unit": "[Unit : Hur]",
+    "gauge.unit": "[Unit : Hour]",
     "elapsed.title": "Elapsed Time Chart",
     "elapsed.time_subscript": "M",
     "elapsed.hour": "H",

diff --git a/video-maker/1000-minutes-simulator/src/components/BGMPlayer.tsx b/video-maker/1000-minutes-simulator/src/components/BGMPlayer.tsx
@@ -1,9 +1,10 @@
+import jsmediatags from 'jsmediatags'
 import { useTranslation } from 'next-i18next'
 import { FC, useEffect, useState } from 'react'
 import { BsFillPersonFill } from 'react-icons/bs'
 import { IoMdMusicalNotes } from 'react-icons/io'
 import { MdQueueMusic } from 'react-icons/md'
-import { getRandomBgm } from '../lib/common'
+import { getCurrentRandomBgm } from '../lib/bgm'
 import { OffsetSec } from '../pages'
 import * as styles from '../styles/BGMPlayer.styles'
 import * as common from '../styles/common.styles'
@@ -15,8 +16,8 @@ type Props = {
 const BGMPlayer: FC<Props> = (props) => {
     const { t } = useTranslation()
 
-    const [audioTitle, setAudioTitle] = useState('BGM Title')
-    const [audioArtist, setAudioArtist] = useState('BGM Artist')
+    const [audioTitle, setAudioTitle] = useState<string>(t('bgm.title'))
+    const [audioArtist, setAudioArtist] = useState<string>(t('bgm.artist'))
 
     const audioDivId = 'music'
 
@@ -28,7 +29,7 @@ const BGMPlayer: FC<Props> = (props) => {
         const audio = document.getElementById(audioDivId) as HTMLAudioElement
         audio.addEventListener('ended', () => {
             setAudioTitle(t('bgm.title'))
-            setAudioArtist(t('bgm.title'))
+            setAudioArtist(t('bgm.artist'))
             audioNext()
         })
         audio.addEventListener('error', (event) => {
@@ -42,12 +43,30 @@ const BGMPlayer: FC<Props> = (props) => {
         }, OffsetSec * 1000)
     }
 
-    const audioNext = () => {
+    const audioNext = async () => {
         const audio = document.getElementById(audioDivId) as HTMLAudioElement
-        const bgm = getRandomBgm()
-        audio.src = bgm.file
-        setAudioTitle(bgm.title)
-        setAudioArtist(bgm.artist)
+        const bgm = await getCurrentRandomBgm()
+
+        audio.src = bgm
+        jsmediatags.read(audio.src, {
+            onSuccess(tag) {
+                const title = tag.tags.title
+                const artist = tag.tags.artist
+                setAudioTitle(
+                    title !== null && title !== undefined
+                        ? title
+                        : t('bgm.title')
+                )
+                setAudioArtist(
+                    artist !== null && artist !== undefined
+                        ? artist
+                        : t('bgm.artist')
+                )
+            },
+            onError(error) {
+                console.error(error)
+            },
+        })
         audio.volume = 0.3
         audio.addEventListener('loadeddata', () => {
             audio.play()

diff --git a/video-maker/1000-minutes-simulator/src/components/Timer.tsx b/video-maker/1000-minutes-simulator/src/components/Timer.tsx
@@ -24,6 +24,11 @@ type Props = {
 const Timer: FC<Props> = (props) => {
     const { t } = useTranslation()
 
+    const AUDIO_FILES = {
+        CHIME1: '/audio/chime/chime1.mp3',
+        CHIME2: '/audio/chime/chime2.mp3',
+    } as const
+
     const chime1DivId = 'chime1'
     const chime2DivId = 'chime2'
 
@@ -78,6 +83,27 @@ const Timer: FC<Props> = (props) => {
         }
     }, [isStudyingState])
 
+    useEffect(() => {
+        const checkFile = async () => {
+            try {
+                const response1 = await fetch(AUDIO_FILES.CHIME1)
+                const response2 = await fetch(AUDIO_FILES.CHIME2)
+
+                if (!response1.ok) {
+                    alert(`${AUDIO_FILES.CHIME1} not found`)
+                }
+                if (!response2.ok) {
+                    alert(`${AUDIO_FILES.CHIME2} not found`)
+                }
+            } catch (error: unknown) {
+                alert('Failed to load audio files')
+                console.error('Failed to load audio files:', error)
+            }
+        }
+
+        checkFile()
+    }, [])
+
     const chime1Play = () => {
         console.log(chime1Play.name)
         const chime1 = document.getElementById(chime1DivId) as HTMLAudioElement
@@ -138,8 +164,8 @@ const Timer: FC<Props> = (props) => {
                 </div>
             </div>
 
-            <audio id={chime1DivId} src='/audio/chime/chime1.mp3'></audio>
-            <audio id={chime2DivId} src='/audio/chime/chime2.mp3'></audio>
+            <audio id={chime1DivId} src={AUDIO_FILES.CHIME1}></audio>
+            <audio id={chime2DivId} src={AUDIO_FILES.CHIME2}></audio>
         </div>
     )
 }

diff --git a/video-maker/1000-minutes-simulator/src/lib/bgm.ts b/video-maker/1000-minutes-simulator/src/lib/bgm.ts
@@ -0,0 +1,24 @@
+/**
+ * ランダムにBGMを選ぶ．
+ * @return {string} 現在のBGMファイルのパス
+ */
+export async function getCurrentRandomBgm(): Promise<string> {
+    const res = await fetch('/api/bgm')
+    const file = (await res.json()).file
+    console.log(file)
+
+    if (file) {
+        return file
+    }
+    throw Error('no bgm file.')
+} 
+
+export type Bgm = {
+  title: string
+  artist: string
+  file: string
+  forPart: string[]
+}
+
+export const AllPartType = ['AllPartType']
+