show settings on playback error +

make hls play with hlsjs if possible + latest version of provider package

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.7.0",
     "@headlessui/react": "^1.5.0",
-    "@movie-web/providers": "^1.1.2",
+    "@movie-web/providers": "^1.1.3",
     "@noble/hashes": "^1.3.2",
     "@react-spring/web": "^9.7.1",
     "@scure/bip39": "^1.2.1",

pnpm-lock.yaml

@@ -18,8 +18,8 @@ dependencies:
     specifier: ^1.5.0
     version: 1.7.17(react-dom@17.0.2)(react@17.0.2)
   '@movie-web/providers':
-    specifier: ^1.1.2
-    version: 1.1.2
+    specifier: ^1.1.3
+    version: 1.1.3
   '@noble/hashes':
     specifier: ^1.3.2
     version: 1.3.2
@@ -1889,8 +1889,8 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /@movie-web/providers@1.1.2:
-    resolution: {integrity: sha512-ZPSHBoz9WFLc6bWnRAXpefE+Vf8GNJ4xuWv5gu+uNg7dNBIMCnPqeuABlNIGxpEi68Go7zYlyx6nH/GQItgweA==}
+  /@movie-web/providers@1.1.3:
+    resolution: {integrity: sha512-6oxRqoZLVWQJHkJJaS1ZqDV7/LATYJ2EY0RKHhQUho3eFP5SpcdAvElllvvaRaomVFix8ftYYuy+NHWTbFox0g==}
     dependencies:
       cheerio: 1.0.0-rc.12
       crypto-js: 4.2.0

src/pages/parts/player/PlayerPart.tsx

@@ -102,9 +102,12 @@ export function PlayerPart(props: PlayerPartProps) {
                 <Player.Pip />
                 <Player.Airplay />
                 <Player.Chromecast />
-                <Player.Settings />
               </>
             ) : null}
+            {status === playerStatus.PLAYBACK_ERROR ||
+            status === playerStatus.PLAYING ? (
+              <Player.Settings />
+            ) : null}
             <Player.Fullscreen />
           </div>
         </div>

src/utils/detectFeatures.ts

@@ -1,4 +1,5 @@
 import fscreen from "fscreen";
+import Hls from "hls.js";
 
 export const isSafari = /^((?!chrome|android).)*safari/i.test(
   navigator.userAgent
@@ -48,5 +49,6 @@ export function canWebkitPictureInPicture(): boolean {
 }
 
 export function canPlayHlsNatively(video: HTMLVideoElement): boolean {
+  if (Hls.isSupported()) return false; // no need to play natively
   return !!video.canPlayType("application/vnd.apple.mpegurl");
 }