From d253e5b7399d850023d024df978aec8cc732d217 Mon Sep 17 00:00:00 2001
From: Will Moss <will@adriel.solutions>
Date: Thu, 18 Jul 2024 22:14:21 +0700
Subject: [PATCH] fix(client): added a check to prevent Safari from crashing
 when trying to read .ogg video files

---
 src/App.js                         | 8 +++++++-
 src/components/VideoCard/index.jsx | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 49f87a8..0ac4287 100644
--- a/src/App.js
+++ b/src/App.js
@@ -73,6 +73,8 @@ const App = () => {
   };
   const _isVideo = (file) =>
     ["mp4", "ogg", "webm"].includes(file.name.toLowerCase().split(".").at(-1));
+  const _isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
   const _toAuthenticatedUrl = (url) => `${url}?hash=${secureHash}`;
   const _veryFirsPageTitle = document.title;
   const _updatePageTitle = (video) => {
@@ -146,7 +148,7 @@ const App = () => {
     _retrieveVideosRecursively().then((files) => {
       if (!files) setLoading(false);
 
-      const _videoFiles = files
+      let _videoFiles = files
         .filter((f) => _isVideo(f))
         .map((v) => ({
           url: _toAuthenticatedUrl(`${window.PUBLIC_URL}/media/${v.url}`),
@@ -156,9 +158,13 @@ const App = () => {
             .split(".")
             .slice(0, -1)
             .join(""),
+          extension: v.url.split(".").at(-1).toLowerCase(),
         }))
         .sort((a, b) => 0.5 - Math.random());
 
+      // Fix for Safari : .ogg files are not supported
+      if (_isSafari) _videoFiles = _videoFiles.filter((f) => f.extension !== "ogg");
+
       setVideos(_videoFiles);
 
       // Load the first two videos
diff --git a/src/components/VideoCard/index.jsx b/src/components/VideoCard/index.jsx
index cb3bf37..e81cb5b 100644
--- a/src/components/VideoCard/index.jsx
+++ b/src/components/VideoCard/index.jsx
@@ -28,6 +28,7 @@ const VideoCard = ({ index, url, title, isLoaded, isMuted, refForwarder }) => {
         onClick={togglePause}
         muted={isMuted}
         loop
+        playsInline
       />
       <div className="bottom-controls">
         <div className="footer-left">