Add: support video (still in test), change ogg to webm

web/src/App.css

@@ -100,3 +100,11 @@ dialog {
   flex-direction: row;
   flex-wrap: wrap;
 }
+.vertical {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+.warp-word {
+  overflow-wrap: anywhere;
+}

web/src/App.js

@@ -83,14 +83,8 @@ function App() {
               path="/manage/register"
               element={<Register user={user} setUser={setUser} />}
             />
-            <Route
-              path="/manage/tags"
-              element={<Tags user={user} />}
-            />
-            <Route
-              path="/manage/tags/:id"
-              element={<EditTag user={user} />}
-            />
+            <Route path="/manage/tags" element={<Tags user={user} />} />
+            <Route path="/manage/tags/:id" element={<EditTag user={user} />} />
             <Route
               path="/manage/reviews/:id"
               element={<EditReview user={user} />}
@@ -113,16 +107,16 @@ function App() {
             />
             <Route
               path="/files/:id/review"
-              element={<ReviewPage user={user} setPlayingFile={setPlayingFile} />}
+              element={
+                <ReviewPage user={user} setPlayingFile={setPlayingFile} />
+              }
             />
           </Routes>
         </main>
-        <footer>
-          <AudioPlayer
-            playingFile={playingFile}
-            setPlayingFile={setPlayingFile}
-          />
-        </footer>
+        <AudioPlayer
+          playingFile={playingFile}
+          setPlayingFile={setPlayingFile}
+        />
       </Router>
     </div>
   );

web/src/component/AudioPlayer.js

@@ -64,7 +64,7 @@ function AudioPlayer(props) {
   let navigate = useNavigate();
 
   return (
-    <div>
+    <footer className="vertical">
       <h5>Player status</h5>
       {props.playingFile.id && (
         <span>
@@ -111,46 +111,65 @@ function AudioPlayer(props) {
 
       <br />
 
-      <input
-        checked={loop}
-        onChange={(event) => setLoop(event.target.checked)}
-        type="checkbox"
-      />
-      <label>Loop</label>
+      <span>
+        <input
+          checked={loop}
+          onChange={(event) => setLoop(event.target.checked)}
+          type="checkbox"
+        />
+        <label>Loop</label>
 
-      <input
-        checked={raw}
-        onChange={(event) => setRaw(event.target.checked)}
-        type="checkbox"
-      />
-      <label>Raw</label>
+        <input
+          checked={raw}
+          onChange={(event) => setRaw(event.target.checked)}
+          type="checkbox"
+        />
+        <label>Raw</label>
 
-      {!raw && (
-        <span>
-          <input
-            checked={prepare}
-            onChange={(event) => setPrepare(event.target.checked)}
-            type="checkbox"
-          />
-          <label>Prepare</label>
-        </span>
-      )}
+        {!raw && (
+          <span>
+            <input
+              checked={prepare}
+              onChange={(event) => setPrepare(event.target.checked)}
+              type="checkbox"
+            />
+            <label>Prepare</label>
+          </span>
+        )}
+
+        <input
+          type="checkbox"
+          onClick={(e) => {
+            const domVideoPlayer = document.getElementById("dom-video-player");
+            if (domVideoPlayer === null) {
+              return;
+            }
+            if (e.target.checked) {
+              domVideoPlayer.style.height = "auto";
+            } else {
+              domVideoPlayer.style.height = "39px";
+            }
+          }}
+        />
+        <label>Video</label>
+      </span>
 
       {playingURL !== "" && (
-        <audio
+        <video
+          id="dom-video-player"
           controls
           autoPlay
           loop={loop}
           className="audio-player"
           src={playingURL}
-        ></audio>
+        ></video>
       )}
 
       <FfmpegConfig
         selectedFfmpegConfig={selectedFfmpegConfig}
         setSelectedFfmpegConfig={setSelectedFfmpegConfig}
       />
-    </div>
+    </footer>
   );
 }
 

web/src/component/FfmpegConfig.js

@@ -33,7 +33,7 @@ function FfmpegConfig(props) {
           <option key={ffmpegConfig.name}>{ffmpegConfig.name}</option>
         ))}
       </select>
-      <span>{props.selectedFfmpegConfig.args}</span>
+      <span className="warp-word">{props.selectedFfmpegConfig.args}</span>
     </div>
   );
 }