調整 バグもいくつか修正

README.md

@@ -7,4 +7,9 @@ A desktop app that lets you easily create Minecraft `/playsound` commands
 
 # Supported
 ### 大感謝　　　Thank you so so so so so much
-### [@ChenCMD](https://github.com/ChenCMD)
+### [@ChenCMD](https://github.com/ChenCMD)
+
+
+# Feedback
+
+[Create Issue](https://github.com/nea-c/Knead/issues/new)

src/web/hooks/useAudioPlay.ts → src/hooks/useAudioPlay.ts

@@ -1,5 +1,5 @@
 import { useCallback, useState, useMemo, useEffect } from 'react'
-import { mapEntries } from '../../utils/ObjectUtil'
+import { mapEntries } from '../utils/ObjectUtil'
 
 type GlobalContext = {
   isSomePlaying: boolean
@@ -98,8 +98,8 @@ export const useAudioPlay = (): { context: GlobalContext, contexts: { head?: Pub
     absn.connect(audioContext.destination)
 
     const gainController = audioContext.createGain()
-    gainController.gain.value = volume
     gainController.connect(audioContext.destination)
+    gainController.gain.value = volume
 
     return [absn, gainController]
   }, [audioContext])
@@ -221,11 +221,10 @@ export const useAudioPlay = (): { context: GlobalContext, contexts: { head?: Pub
   const setPlaybackTime = useCallback((soundKey: string, playbackTime: number) => {
     setAudioState((prev) => {
       if (prev[soundKey].isPlaying) {
-        // いろいろ試したけどこの書き方が一番思ってる挙動する 謎
+        // いろいろ試したけどこれが一番思ってる挙動する 謎
         const playTime = prev[soundKey].absn.context.currentTime - (playbackTime / (prev[soundKey].speed < 1 ? prev[soundKey].speed : 1))
         pause()
-        // どうやったら少しだけ待ってくれるん？これ
-        setTimeout(() => {}, 100)
+        // ここで少しだけ待ってもらうような処理書いたほうがバグ発生抑えれる？ でも待つ処理がわからん
         play()
         return { ...prev, [soundKey]: { ...prev[soundKey], playTime, pauseTime: 0, playbackTime } }
       }

src/web/Footer.tsx

@@ -6,7 +6,7 @@ import { useAddDispatch, useAppSelector } from '../store/_store'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { SoundName, updateSelectedSound } from '../store/fetchSlice'
 import { isAboveVersion, VersionInfoType } from '../types/VersionInfo'
-import { useAudioPlay } from './hooks/useAudioPlay'
+import { useAudioPlay } from '../hooks/useAudioPlay'
 import { useTranslation } from 'react-i18next'
 import { PitchInput } from './PitchInput'
 import { secondsToString } from '../utils/NumberUtil'
@@ -182,7 +182,7 @@ export const Footer = () => {
         else if (target_pitch > 2) target_pitch = 2
         try {
           const hash = await myAPI.get_mcSoundHash(sound?.hash ?? '')
-          await AudioController.commands.setSound(selectedSound, hash, target_pitch, appVolume)
+          await AudioController.commands.setSound(selectedSound, hash, target_pitch, appVolume - 1)
           AudioController.commands.play()
         }
         catch (e: unknown) {
@@ -193,6 +193,11 @@ export const Footer = () => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [soundSelectDetector])
 
+  useEffect(() => {
+    if (selectedSound) AudioController.commands.setVolume(selectedSound, appVolume - 100)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appVolume])
+
   return (
     <>
       <footer className="fixed_bottom">
@@ -209,7 +214,7 @@ export const Footer = () => {
           </Box>
 
           <Flex w="full" marginTop={2}>
-            <IconButton onClick={AudioController.commands.restart} icon={<FaArrowRotateLeft size={20} />} variant="ghost" />
+            <IconButton onClick={() => dispatch(updateSelectedSound({ id: selectedSound }))} icon={<FaArrowRotateLeft size={20} />} variant="ghost" />
             <Spacer maxW={1} />
             <IconButton
               onClick={AudioController.context.isSomePlaying ? AudioController.commands.pause : AudioController.commands.play}

src/web/LanguageChange.tsx

@@ -16,8 +16,8 @@ export const LanguageChange = () => {
   }
 
   return (
-    <Menu animation="top" gutter={0} trigger="hover">
-      <MenuButton as={IconButton} icon={<GlobeIcon fontSize="lg" />} variant="outline" disableRipple={true} />
+    <Menu animation="top" gutter={0}>
+      <MenuButton as={IconButton} icon={<GlobeIcon fontSize="lg" />} variant="outline" />
 
       <MenuList style={{ padding: 0, margin: 0 }}>
         <MenuItem

src/web/SoundSelector.tsx

@@ -2,10 +2,10 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useAddDispatch, useAppSelector } from '../store/_store'
 import { Box, Flex, Input, InputGroup, InputLeftElement, Spacer, Toggle, useBoolean } from '@yamada-ui/react'
 import { FilterIcon, FilterXIcon, SearchIcon } from '@yamada-ui/lucide'
-import { useVirtualScroll } from './hooks/useVirtualScroll'
+import { useVirtualScroll } from '../hooks/useVirtualScroll'
 import { RatingStars } from './RatingStars'
 import { updateSelectedSound, updateSoundRating } from '../store/fetchSlice'
-import { useWindowSize } from './hooks/useWindowSize'
+import { useWindowSize } from '../hooks/useWindowSize'
 import { useTranslation } from 'react-i18next'
 
 export const SoundSelector = () => {

src/web/ThemeChange.tsx

@@ -11,8 +11,8 @@ export const ThemeChange = () => {
   const isDarkColor = (internalColorMode == 'dark') ? 'primary' : ''
 
   return (
-    <Menu animation="top" gutter={0} trigger="hover">
-      <MenuButton as={IconButton} icon={<PaletteIcon fontSize="lg" />} variant="outline" disableRipple={true} />
+    <Menu animation="top" gutter={0}>
+      <MenuButton as={IconButton} icon={<PaletteIcon fontSize="lg" />} variant="outline" />
 
       <MenuList style={{ padding: 0, margin: 0 }}>
         <MenuItem

src/web/VersionSelector.tsx

@@ -38,10 +38,11 @@ export const VersionSelector = () => {
     const pre_versions = versions.filter(v => v.kind === 'pre-release').sort(comparePreReleaseVersionInfo).reverse().map(v => v.raw)
     const rc_versions = versions.filter(v => v.kind === 'release-candidate').sort(compareReleaseCandidateVersionInfo).reverse().map(v => v.raw)
 
+    // 仮置きで最新バージョンが選択されるようにする
     const f = async () => {
       try {
         if (major_versions[0]) {
-          if (!targetVersion) return
+          if (!targetVersion) return dispatch(updateTargetVersion({ version: versions.find(v => v.raw == major_versions[0]) }))
           const sounds: Sound[] = await myAPI.get_mcSounds(targetVersion)
           setSelectedVersion(targetVersion)
           dispatch(updateSoundList({ sounds }))
@@ -76,7 +77,7 @@ export const VersionSelector = () => {
         variant="filled"
         items={versionList}
         onChange={onChangeVersion}
-        maxW="xs"
+        maxW="sm"
         animation="top"
         value={SelectedVersion}
         gutter={0}

src/web/VolumeChange.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Volume1Icon, Volume2Icon, VolumeOffIcon, VolumeXIcon } from '@yamada-ui/lucide'
-import { Box, IconButton, Popover, PopoverBody, PopoverContent, PopoverHeader, PopoverTrigger, Slider, Toggle, useBoolean } from '@yamada-ui/react'
+import { Box, Flex, Slider, Toggle, useBoolean } from '@yamada-ui/react'
 import { useAddDispatch, useAppSelector } from '../store/_store'
 import { updateAppVolume } from '../store/fetchSlice'
 
@@ -11,6 +11,12 @@ export const VolumeChange = () => {
 
   const volumeSlider = useAppSelector(state => state.fetch.volumeSlider)
 
+  const onClickMute = () => {
+    const mute_invert = !MuteSwitch
+    dispatch(updateAppVolume({ volume: volumeSlider, mute: mute_invert }))
+    toggleMute()
+  }
+
   const onChangeVolumeSlider = (value: number) => {
     dispatch(updateAppVolume({ volume: value, mute: MuteSwitch }))
   }
@@ -23,22 +29,13 @@ export const VolumeChange = () => {
   }
 
   return (
-    <Popover animation="top" closeOnButton={false} gutter={0} trigger="hover">
-      <PopoverTrigger>
-        <IconButton icon={volumeIcon(volumeSlider, MuteSwitch)} variant="outline" disableRipple={true} />
-      </PopoverTrigger>
-
-      <PopoverContent w={10}>
-        <PopoverHeader>
-          <Toggle icon={<VolumeXIcon fontSize="lg" />} onClick={toggleMute} variant="outline" />
-        </PopoverHeader>
-        <PopoverBody>
-          <Box w="full" textAlign="center" paddingY={2}>
-            <Slider value={volumeSlider} disabled={MuteSwitch} onChange={onChangeVolumeSlider} h="xs" orientation="vertical" marginTop={2} step={0.01} min={0} max={1} filledTrackColor="primary" thumbColor="primary" trackColor="gray.200" thumbSize={2.5} thumbProps={{ _focusVisible: { boxShadow: '' }, _disabled: { color: 'primary' } }} />
-          </Box>
-        </PopoverBody>
-      </PopoverContent>
-    </Popover>
+    <Flex>
+
+      <Toggle icon={volumeIcon(volumeSlider, MuteSwitch)} onClick={onClickMute} variant="outline" colorScheme={MuteSwitch ? 'red' : 'primary'} />
+      <Box w="full" textAlign="center" paddingX={2}>
+        <Slider value={volumeSlider} disabled={MuteSwitch} onChange={onChangeVolumeSlider} marginBottom={-2} step={0.01} min={0} max={1} w={40} filledTrackColor="primary" thumbColor="primary" trackColor="gray.200" thumbSize={2.5} thumbProps={{ _focusVisible: { boxShadow: '' }, _disabled: { color: 'primary' } }} />
+      </Box>
+    </Flex>
 
   )
 }