From 5853393396c99130404aad8d284f80e839b5c7d0 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 1 Apr 2024 08:20:27 -0600
Subject: [PATCH] Fix mobile playback (#10774)

---
 web/src/components/player/HlsVideoPlayer.tsx | 6 ++++--
 web/src/utils/iconUtil.tsx                   | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index d667f4be0..b6480d6bd 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -6,10 +6,12 @@ import {
   useState,
 } from "react";
 import Hls from "hls.js";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import VideoControls from "./VideoControls";
 
+// Android native hls does not seek correctly
+const USE_NATIVE_HLS = !isAndroid;
 const HLS_MIME_TYPE = "application/vnd.apple.mpegurl" as const;
 const unsupportedErrorCodes = [
   MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED,
@@ -51,7 +53,7 @@ export default function HlsVideoPlayer({
       return;
     }
 
-    if (videoRef.current.canPlayType(HLS_MIME_TYPE)) {
+    if (USE_NATIVE_HLS && videoRef.current.canPlayType(HLS_MIME_TYPE)) {
       return;
     } else if (Hls.isSupported()) {
       setUseHlsCompat(true);
diff --git a/web/src/utils/iconUtil.tsx b/web/src/utils/iconUtil.tsx
index 0c326f4d5..bc9f74a8b 100644
--- a/web/src/utils/iconUtil.tsx
+++ b/web/src/utils/iconUtil.tsx
@@ -76,7 +76,7 @@ function getVerifiedIcon(label: string, className?: string) {
   const simpleLabel = label.substring(0, label.lastIndexOf("-"));
 
   return (
-    <div className="flex items-center">
+    <div key={label} className="flex items-center">
       {getIconForLabel(simpleLabel, className)}
       <FaCheckCircle className="absolute size-2 translate-x-[80%] translate-y-3/4" />
     </div>