From ce18001005bcc39f0b43f6fe7dad4730b541f008 Mon Sep 17 00:00:00 2001
From: toshi-pono <66683209+toshi-pono@users.noreply.github.com>
Date: Wed, 29 Dec 2021 16:59:21 +0900
Subject: [PATCH] use webm

---
 .../PausableMovie/PausableMovie.jsx           | 53 +++++++------------
 client/src/utils/get_path.js                  |  2 +-
 server/src/routes/api/movie.js                |  4 +-
 3 files changed, 21 insertions(+), 38 deletions(-)

diff --git a/client/src/components/foundation/PausableMovie/PausableMovie.jsx b/client/src/components/foundation/PausableMovie/PausableMovie.jsx
index 7bdea81e4..209f029a0 100644
--- a/client/src/components/foundation/PausableMovie/PausableMovie.jsx
+++ b/client/src/components/foundation/PausableMovie/PausableMovie.jsx
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { Animator, Decoder } from 'gifler';
 import { GifReader } from 'omggif';
 import React from 'react';
+import { useEffect } from 'react';
 
 import { useFetch } from '../../../hooks/use_fetch';
 import { fetchBinary } from '../../../utils/fetchers';
@@ -20,46 +21,26 @@ import { FontAwesomeIcon } from '../FontAwesomeIcon';
 const PausableMovie = ({ src }) => {
   const { data, isLoading } = useFetch(src, fetchBinary);
 
-  /** @type {React.RefObject<import('gifler').Animator>} */
-  const animatorRef = React.useRef(null);
-  /** @type {React.RefCallback<HTMLCanvasElement>} */
-  const canvasCallbackRef = React.useCallback(
-    (el) => {
-      animatorRef.current?.stop();
-
-      if (el === null || data === null) {
-        return;
-      }
-
-      // GIF を解析する
-      const reader = new GifReader(new Uint8Array(data));
-      const frames = Decoder.decodeFramesSync(reader);
-      const animator = new Animator(reader, frames);
-
-      animator.animateInCanvas(el);
-      animator.onFrame(frames[0]);
-
-      // 視覚効果 off のとき GIF を自動再生しない
-      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        setIsPlaying(false);
-        animator.stop();
-      } else {
-        setIsPlaying(true);
-        animator.start();
-      }
-
-      animatorRef.current = animator;
-    },
-    [data],
-  );
+  /** @type {React.RefCallback<HTMLVideoElement>} */
+  const videoRef = React.useRef(null);
+  useEffect(() => {
+    // 視覚効果 off のとき GIF を自動再生しない
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setIsPlaying(false);
+      videoRef.current?.pause();
+    } else {
+      setIsPlaying(true);
+      videoRef.current?.play();
+    }
+  }, [])
 
   const [isPlaying, setIsPlaying] = React.useState(true);
   const handleClick = React.useCallback(() => {
     setIsPlaying((isPlaying) => {
       if (isPlaying) {
-        animatorRef.current?.stop();
+        videoRef.current?.pause();
       } else {
-        animatorRef.current?.start();
+        videoRef.current?.play();
       }
       return !isPlaying;
     });
@@ -72,7 +53,9 @@ const PausableMovie = ({ src }) => {
   return (
     <AspectRatioBox aspectHeight={1} aspectWidth={1}>
       <button className="group relative block w-full h-full" onClick={handleClick} type="button">
-        <canvas ref={canvasCallbackRef} className="w-full" />
+        <video ref={videoRef} className="w-full" preload='metadata' loop muted autoPlay>
+          <source src={src} type="video/webm" />
+        </video>
         <div
           className={classNames(
             'absolute left-1/2 top-1/2 flex items-center justify-center w-16 h-16 text-white text-3xl bg-black bg-opacity-50 rounded-full transform -translate-x-1/2 -translate-y-1/2',
diff --git a/client/src/utils/get_path.js b/client/src/utils/get_path.js
index 0b0788895..a38ad791f 100644
--- a/client/src/utils/get_path.js
+++ b/client/src/utils/get_path.js
@@ -11,7 +11,7 @@ function getImagePath(imageId) {
  * @returns {string}
  */
 function getMoviePath(movieId) {
-  return `/movies/${movieId}.gif`;
+  return `/movies/${movieId}.webm`;
 }
 
 /**
diff --git a/server/src/routes/api/movie.js b/server/src/routes/api/movie.js
index 403ae06af..94570f2fe 100644
--- a/server/src/routes/api/movie.js
+++ b/server/src/routes/api/movie.js
@@ -9,7 +9,7 @@ import { convertMovie } from '../../converters/convert_movie';
 import { UPLOAD_PATH } from '../../paths';
 
 // 変換した動画の拡張子
-const EXTENSION = 'gif';
+const EXTENSION = 'webm';
 
 const router = Router();
 
@@ -27,7 +27,7 @@ router.post('/movies', async (req, res) => {
     // 動画の拡張子を指定する
     extension: EXTENSION,
     // 動画の縦横サイズを指定する (undefined は元動画に合わせる)
-    size: undefined,
+    size: 640,
   });
 
   const filePath = path.resolve(UPLOAD_PATH, `./movies/${movieId}.${EXTENSION}`);