Add info text for ios and HLS + fix lightbar overflows

src/assets/css/index.css

@@ -4,7 +4,7 @@
 
 html,
 body {
-  @apply bg-background-main font-open-sans text-type-text overflow-x-hidden;
+  @apply bg-background-main font-open-sans text-type-text;
   min-height: 100vh;
   min-height: 100dvh;
 }
@@ -221,4 +221,4 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
 .tabbable:focus-visible {
   outline: 2px solid theme('colors.themePreview.primary');
   box-shadow: 0 0 10px theme('colors.themePreview.secondary');
-}
+}

src/assets/locales/en.json

@@ -203,7 +203,8 @@
       "quality": {
         "title": "Quality",
         "automaticLabel": "Automatic quality",
-        "hint": "You can try <0>switching source</0> to get different quality options."
+        "hint": "You can try <0>switching source</0> to get different quality options.",
+        "iosNoQuality": "Due to Apple-defined limitations, quality selection is not available on iOS for this source. You can try <0>switching to another source</0> to get different quality options."
       }
     }
   },

src/components/player/atoms/settings/QualityView.tsx

@@ -1,5 +1,6 @@
+import Hls from "hls.js";
 import { t } from "i18next";
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { Trans } from "react-i18next";
 
 import { Toggle } from "@/components/buttons/Toggle";
@@ -13,6 +14,7 @@ import {
   qualityToString,
 } from "@/stores/player/utils/qualities";
 import { useQualityStore } from "@/stores/quality";
+import { canPlayHlsNatively } from "@/utils/detectFeatures";
 
 const alwaysVisibleQualities: Record<SourceQuality, boolean> = {
   unknown: false,
@@ -22,8 +24,21 @@ const alwaysVisibleQualities: Record<SourceQuality, boolean> = {
   "1080": true,
 };
 
+function useIsIosHls() {
+  const sourceType = usePlayerStore((s) => s.source?.type);
+  const result = useMemo(() => {
+    const videoEl = document.createElement("video");
+    if (sourceType !== "hls") return false;
+    if (Hls.isSupported()) return false;
+    if (!canPlayHlsNatively(videoEl)) return false;
+    return true;
+  }, [sourceType]);
+  return result;
+}
+
 export function QualityView({ id }: { id: string }) {
   const router = useOverlayRouter(id);
+  const isIosHls = useIsIosHls();
   const availableQualities = usePlayerStore((s) => s.qualities);
   const currentQuality = usePlayerStore((s) => s.currentQuality);
   const switchQuality = usePlayerStore((s) => s.switchQuality);
@@ -61,7 +76,7 @@ export function QualityView({ id }: { id: string }) {
       <Menu.BackLink onClick={() => router.navigate("/")}>
         {t("player.menus.quality.title")}
       </Menu.BackLink>
-      <Menu.Section>
+      <Menu.Section className="flex flex-col pb-4">
         {visibleQualities.map((v) => (
           <SelectableLink
             key={v}
@@ -81,7 +96,13 @@ export function QualityView({ id }: { id: string }) {
           {t("player.menus.quality.automaticLabel")}
         </Menu.Link>
         <Menu.SmallText>
-          <Trans i18nKey="player.menus.quality.hint">
+          <Trans
+            i18nKey={
+              isIosHls
+                ? "player.menus.quality.iosNoQuality"
+                : "player.menus.quality.hint"
+            }
+          >
             <Menu.Anchor onClick={() => router.navigate("/source")}>
               text
             </Menu.Anchor>

src/components/player/internals/ContextMenu/Cards.tsx

@@ -1,7 +1,7 @@
 export function Card(props: { children: React.ReactNode }) {
   return (
     <div className="h-full grid grid-rows-[1fr]">
-      <div className="px-6 h-full overflow-y-auto overflow-x-hidden">
+      <div className="px-6 h-full flex flex-col justify-start overflow-y-auto overflow-x-hidden">
         {props.children}
       </div>
     </div>

src/components/utils/Lightbar.css

@@ -1,6 +1,5 @@
 .lightbar, .lightbar-visual {
   position: absolute;
-  top: 0;
   width: 500vw;
   height: 800px;
   pointer-events: none;

src/components/utils/Lightbar.tsx

@@ -1,4 +1,3 @@
-import classNames from "classnames";
 import { useEffect, useRef } from "react";
 import "./Lightbar.css";
 
@@ -162,15 +161,14 @@ function ParticlesCanvas() {
 
 export function Lightbar(props: { className?: string }) {
   return (
-    <div
-      className={classNames(
-        "grid grid-cols-[100%] w-full overflow-x-hidden",
-        props.className
-      )}
-    >
-      <div className="lightbar">
-        <ParticlesCanvas />
-        <div className="lightbar-visual" />
+    <div className="absolute inset-0 w-full h-screen overflow-hidden -mt-64">
+      <div className="max-w-screen w-full h-screen relative pt-64">
+        <div className={props.className}>
+          <div className="lightbar">
+            <ParticlesCanvas />
+            <div className="lightbar-visual" />
+          </div>
+        </div>
       </div>
     </div>
   );