Merge pull request #13 from hrdtbs/fix/mp3

MochiNoaProject · Mar 5, 2020 · 1e0b48e · 1e0b48e · vercel · Mar 5, 2020
2 parents 03fd3a5 + aff71b7
commit 1e0b48e
Show file tree

Hide file tree

Showing 88 changed files with 7 additions and 52 deletions.
diff --git a/components/Voice.tsx b/components/Voice.tsx
@@ -3,13 +3,10 @@ import clsx from "clsx"
 
 const Voice: React.FC<{ name: string }> = ({ name }) => {
     const audioRef = useRef<HTMLAudioElement>(null)
-    const [duration, setDuration] = useState(0)
     const [active, setActive] = useState(false)
     const handleClick = useCallback(async () => {
         const el = audioRef.current
-
         if (el) {
-            setDuration(el.duration)
             await el.play()
         }
     }, [audioRef])
@@ -18,6 +15,7 @@ const Voice: React.FC<{ name: string }> = ({ name }) => {
         <figure onClick={handleClick} className={clsx({ active })}>
             <style jsx>{`
                 figure {
+                    user-select: none;
                     position: relative;
                     display: inline-flex;
                     flex: 1 1 auto;
@@ -29,41 +27,21 @@ const Voice: React.FC<{ name: string }> = ({ name }) => {
                     cursor: pointer;
                     background-color: #faa65f;
                     border-left: 12px solid #fcdfa1;
+                    transition: 0.3s ease-in-out;
                     border-radius: 10px;
                     box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                         0 1px 5px 0 rgba(0, 0, 0, 0.12);
                 }
-                figure::before {
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: 0px;
-                    left: 0px;
-                    height: 100%;
-                    background-color: black;
-                    mix-blend-mode: soft-light;
-                    will-change: width;
-                    transform: translate3d(0, 0, 0);
-                }
             `}</style>
             <style jsx>{`
-                figure.active::before {
-                    animation: decrement ${duration}s ease-in-out;
-                }
-                @keyframes decrement {
-                    0% {
-                        width: 100%;
-                    }
-                    100% {
-                        width: 0%;
-                    }
+                figure.active {
+                    background-color: #f06808;
                 }
             `}</style>
             <figcaption>{name}</figcaption>
             <audio
-                preload="metadata"
+                src={`/static/voices/${name}.mp3`}
                 ref={audioRef}
-                src={`/static/voices/${name}.mp4`}
                 onPlay={() => setActive(true)}
                 onEnded={() => setActive(false)}
             ></audio>

diff --git a/next.config.js b/next.config.js
@@ -24,7 +24,7 @@ const nextConfig = {
                 }
             },
             {
-                urlPattern: /.(?:png|webp|svg|mp4)$/,
+                urlPattern: /.(?:png|webp|svg)$/,
                 handler: "CacheFirst"
             }
         ]

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -4,29 +4,7 @@ class MyDocument extends Document {
     render() {
         return (
             <Html lang="ja">
-                <Head>
-                    {/*
-                    <link rel="preconnect" href="https://fonts.gstatic.com/" crossOrigin />
-                    <link
-                        href="https://fonts.googleapis.com/css?family=Kosugi+Maru&display=swap&subset=japanese"
-                        rel="stylesheet"
-                    />
-
-                    <link rel="preconnect" href="https://www.google-analytics.com" crossOrigin="true" />
-                    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-90236823-7" />
-                    <script
-                        dangerouslySetInnerHTML={{
-                            __html: `
-                                window.dataLayer = window.dataLayer || [];
-                                function gtag(){dataLayer.push(arguments);}
-                                gtag('js', new Date());
-
-                                gtag('config', 'UA-90236823-7');
-                            `
-                        }}
-                    ></script>
-                    */}
-                </Head>
+                <Head />
                 <body>
                     <Main />
                     <NextScript />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,4 +1,3 @@
-import { useCallback, useState } from "react"
 import { version } from "../package.json"
 import { voices } from "../constants/voices"
 import InstallPWA from "../components/InstallPWA"

diff --git a/public/static/voices/FPSは遊びじゃないんだよ！.mp3 b/public/static/voices/FPSは遊びじゃないんだよ！.mp3
diff --git a/public/static/voices/FPSは遊びじゃないんだよ！.mp4 b/public/static/voices/FPSは遊びじゃないんだよ！.mp4
diff --git a/public/static/voices/あなたは私のもの.mp3 b/public/static/voices/あなたは私のもの.mp3
diff --git a/public/static/voices/あなたは私のもの.mp4 b/public/static/voices/あなたは私のもの.mp4
diff --git a/public/static/voices/あーん.mp3 b/public/static/voices/あーん.mp3
diff --git a/public/static/voices/あーん.mp4 b/public/static/voices/あーん.mp4
diff --git a/public/static/voices/う、うめぇ.mp3 b/public/static/voices/う、うめぇ.mp3
diff --git a/public/static/voices/う、うめぇ.mp4 b/public/static/voices/う、うめぇ.mp4
diff --git a/public/static/voices/うんめぇ！感動的な味だなぁ！.mp3 b/public/static/voices/うんめぇ！感動的な味だなぁ！.mp3
diff --git a/public/static/voices/うんめぇ！感動的な味だなぁ！.mp4 b/public/static/voices/うんめぇ！感動的な味だなぁ！.mp4
diff --git a/public/static/voices/えらい！すごくえらい！.mp3 b/public/static/voices/えらい！すごくえらい！.mp3
diff --git a/public/static/voices/えらい！すごくえらい！.mp4 b/public/static/voices/えらい！すごくえらい！.mp4
diff --git a/public/static/voices/おにいちゃん.mp3 b/public/static/voices/おにいちゃん.mp3
diff --git a/public/static/voices/おにいちゃん.mp4 b/public/static/voices/おにいちゃん.mp4
diff --git a/public/static/voices/お仕事しっかり頑張れ.mp3 b/public/static/voices/お仕事しっかり頑張れ.mp3
diff --git a/public/static/voices/お仕事しっかり頑張れ.mp4 b/public/static/voices/お仕事しっかり頑張れ.mp4
diff --git a/public/static/voices/がんばれがんばれ.mp3 b/public/static/voices/がんばれがんばれ.mp3
diff --git a/public/static/voices/がんばれがんばれ.mp4 b/public/static/voices/がんばれがんばれ.mp4
diff --git a/public/static/voices/がんばれがんばれ２.mp3 b/public/static/voices/がんばれがんばれ２.mp3
diff --git a/public/static/voices/がんばれがんばれ２.mp4 b/public/static/voices/がんばれがんばれ２.mp4
diff --git a/public/static/voices/ぎゅーってして？.mp3 b/public/static/voices/ぎゅーってして？.mp3
diff --git a/public/static/voices/ぎゅーってして？.mp4 b/public/static/voices/ぎゅーってして？.mp4
diff --git a/public/static/voices/ごめんなさーい.mp3 b/public/static/voices/ごめんなさーい.mp3
diff --git a/public/static/voices/ごめんなさーい.mp4 b/public/static/voices/ごめんなさーい.mp4
diff --git a/public/static/voices/ごめんね？.mp3 b/public/static/voices/ごめんね？.mp3
diff --git a/public/static/voices/ごめんね？.mp4 b/public/static/voices/ごめんね？.mp4
diff --git a/public/static/voices/しばしまたれいっ！.mp3 b/public/static/voices/しばしまたれいっ！.mp3
diff --git a/public/static/voices/しばしまたれいっ！.mp4 b/public/static/voices/しばしまたれいっ！.mp4
diff --git a/public/static/voices/そのDVDうちにあるよ？.mp3 b/public/static/voices/そのDVDうちにあるよ？.mp3
diff --git a/public/static/voices/そのDVDうちにあるよ？.mp4 b/public/static/voices/そのDVDうちにあるよ？.mp4
diff --git a/public/static/voices/だいすきです.mp3 b/public/static/voices/だいすきです.mp3
diff --git a/public/static/voices/だいすきです.mp4 b/public/static/voices/だいすきです.mp4
diff --git a/public/static/voices/だめだめだめだめ.mp3 b/public/static/voices/だめだめだめだめ.mp3
diff --git a/public/static/voices/だめだめだめだめ.mp4 b/public/static/voices/だめだめだめだめ.mp4
diff --git a/public/static/voices/とぅんとぅんとぅん.mp3 b/public/static/voices/とぅんとぅんとぅん.mp3
diff --git a/public/static/voices/とぅんとぅんとぅん.mp4 b/public/static/voices/とぅんとぅんとぅん.mp4
diff --git a/public/static/voices/ねぇ、たすからないで！？.mp3 b/public/static/voices/ねぇ、たすからないで！？.mp3
diff --git a/public/static/voices/ねぇ、たすからないで！？.mp4 b/public/static/voices/ねぇ、たすからないで！？.mp4
diff --git a/public/static/voices/のあお姉ちゃんのこと好き？.mp3 b/public/static/voices/のあお姉ちゃんのこと好き？.mp3
diff --git a/public/static/voices/のあお姉ちゃんのこと好き？.mp4 b/public/static/voices/のあお姉ちゃんのこと好き？.mp4
diff --git a/public/static/voices/のあに賄賂はきかないよ！？.mp3 b/public/static/voices/のあに賄賂はきかないよ！？.mp3
diff --git a/public/static/voices/のあに賄賂はきかないよ！？.mp4 b/public/static/voices/のあに賄賂はきかないよ！？.mp4
diff --git a/public/static/voices/のあの配信だけ見るよね？.mp3 b/public/static/voices/のあの配信だけ見るよね？.mp3
diff --git a/public/static/voices/のあの配信だけ見るよね？.mp4 b/public/static/voices/のあの配信だけ見るよね？.mp4
diff --git a/public/static/voices/やっちゃった〜.mp3 b/public/static/voices/やっちゃった〜.mp3
diff --git a/public/static/voices/やっちゃった〜.mp4 b/public/static/voices/やっちゃった〜.mp4
diff --git a/public/static/voices/やっていこう！.mp3 b/public/static/voices/やっていこう！.mp3
diff --git a/public/static/voices/やっていこう！.mp4 b/public/static/voices/やっていこう！.mp4
diff --git a/public/static/voices/ゆるさないんだからね！.mp3 b/public/static/voices/ゆるさないんだからね！.mp3
diff --git a/public/static/voices/ゆるさないんだからね！.mp4 b/public/static/voices/ゆるさないんだからね！.mp4
diff --git a/public/static/voices/よちよち！えらいでちゅね〜！.mp3 b/public/static/voices/よちよち！えらいでちゅね〜！.mp3
diff --git a/public/static/voices/よちよち！えらいでちゅね〜！.mp4 b/public/static/voices/よちよち！えらいでちゅね〜！.mp4
diff --git a/public/static/voices/ネットに写真をアップロードするのは十分気をつけたほうがいい.mp3 b/public/static/voices/ネットに写真をアップロードするのは十分気をつけたほうがいい.mp3
diff --git a/public/static/voices/ネットに写真をアップロードするのは十分気をつけたほうがいい.mp4 b/public/static/voices/ネットに写真をアップロードするのは十分気をつけたほうがいい.mp4
diff --git a/public/static/voices/ネットは怖いんですよ〜？.mp3 b/public/static/voices/ネットは怖いんですよ〜？.mp3
diff --git a/public/static/voices/ネットは怖いんですよ〜？.mp4 b/public/static/voices/ネットは怖いんですよ〜？.mp4
diff --git a/public/static/voices/下心あれば水心.mp3 b/public/static/voices/下心あれば水心.mp3
diff --git a/public/static/voices/下心あれば水心.mp4 b/public/static/voices/下心あれば水心.mp4
diff --git a/public/static/voices/世界一かわいい.mp3 b/public/static/voices/世界一かわいい.mp3
diff --git a/public/static/voices/世界一かわいい.mp4 b/public/static/voices/世界一かわいい.mp4
diff --git a/public/static/voices/二窓してるの？.mp3 b/public/static/voices/二窓してるの？.mp3
diff --git a/public/static/voices/二窓してるの？.mp4 b/public/static/voices/二窓してるの？.mp4
diff --git a/public/static/voices/今日もお疲れ様.mp3 b/public/static/voices/今日もお疲れ様.mp3
diff --git a/public/static/voices/今日もお疲れ様.mp4 b/public/static/voices/今日もお疲れ様.mp4
diff --git a/public/static/voices/他の女の匂いがする.mp3 b/public/static/voices/他の女の匂いがする.mp3
diff --git a/public/static/voices/他の女の匂いがする.mp4 b/public/static/voices/他の女の匂いがする.mp4
diff --git a/public/static/voices/何？通分って？？.mp3 b/public/static/voices/何？通分って？？.mp3
diff --git a/public/static/voices/何？通分って？？.mp4 b/public/static/voices/何？通分って？？.mp4
diff --git a/public/static/voices/分かんないとき指当てない？普通.mp3 b/public/static/voices/分かんないとき指当てない？普通.mp3
diff --git a/public/static/voices/分かんないとき指当てない？普通.mp4 b/public/static/voices/分かんないとき指当てない？普通.mp4
diff --git a/public/static/voices/幸せになれますよー.mp3 b/public/static/voices/幸せになれますよー.mp3
diff --git a/public/static/voices/幸せになれますよー.mp4 b/public/static/voices/幸せになれますよー.mp4
diff --git a/public/static/voices/来ちゃった♡.mp3 b/public/static/voices/来ちゃった♡.mp3
diff --git a/public/static/voices/来ちゃった♡.mp4 b/public/static/voices/来ちゃった♡.mp4
diff --git a/public/static/voices/死は救済です。.mp3 b/public/static/voices/死は救済です。.mp3
diff --git a/public/static/voices/死は救済です。.mp4 b/public/static/voices/死は救済です。.mp4
diff --git a/public/static/voices/消費税込みはだめだよなぁ？.mp3 b/public/static/voices/消費税込みはだめだよなぁ？.mp3
diff --git a/public/static/voices/消費税込みはだめだよなぁ？.mp4 b/public/static/voices/消費税込みはだめだよなぁ？.mp4
diff --git a/public/static/voices/笑い声.mp3 b/public/static/voices/笑い声.mp3
diff --git a/public/static/voices/笑い声.mp4 b/public/static/voices/笑い声.mp4
diff --git a/public/static/voices/結婚するのか？.mp3 b/public/static/voices/結婚するのか？.mp3
diff --git a/public/static/voices/結婚するのか？.mp4 b/public/static/voices/結婚するのか？.mp4
diff --git a/public/static/voices/脳みそと直結してんのかぁ？.mp3 b/public/static/voices/脳みそと直結してんのかぁ？.mp3
diff --git a/public/static/voices/脳みそと直結してんのかぁ？.mp4 b/public/static/voices/脳みそと直結してんのかぁ？.mp4
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ const nextConfig = { @@
                     }
                 },
                 {
-                    urlPattern: /.(?:png|webp|svg|mp4)$/,
+                    urlPattern: /.(?:png|webp|svg)$/,
                     handler: "CacheFirst"
                 }
             ]
@@ Expand Down @@