Fixed MediaSlider youtube player volume control not working + added Login with SSO checkbox

Author: Yelo420

src/components/Login.tsx

@@ -16,7 +16,7 @@ export function Login() {
   const [server, setServer] = useState(window.location.origin);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
-  const [remember, setRemember] = useState(true);
+  const [useSso, setUseSso] = useState(false);
 
   // Refs for focus trap
   const serverRef = useRef<HTMLInputElement | null>(null);
@@ -45,11 +45,11 @@ export function Login() {
     e.preventDefault();
     try {
       const normalized = normalizeServer(server);
-      await loginBasic({ server: normalized, username, password });
-      if (!remember) {
-        // If user disabled remember, clear stored refresh token
-        localStorage.removeItem("app_refresh_token");
+      if (useSso) {
+        // For now just disable basic login when SSO selected (future: launch popup flow)
+        return;
       }
+      await loginBasic({ server: normalized, username, password });
       navigate("/library", { replace: true });
     } catch {
       // error handled in context
@@ -115,6 +115,7 @@ export function Login() {
           onChange={(e) => setUsername(e.target.value)}
           ref={userRef}
           tabIndex={2}
+          disabled={useSso}
         />
       </Field>
       <Field>
@@ -128,29 +129,27 @@ export function Login() {
           onChange={(e) => setPassword(e.target.value)}
           ref={passRef}
           tabIndex={3}
+          disabled={useSso}
         />
       </Field>
-      <div className="flex items-center justify-between hidden">
-        <CheckboxField>
-          <Checkbox
-            name="remember"
-            checked={remember}
-            onChange={(ev: any) => {
-              const checked = (ev?.target as HTMLInputElement | undefined)
-                ?.checked;
-              if (typeof checked === "boolean") setRemember(checked);
-            }}
-          />
-          <Label>Remember me</Label>
-        </CheckboxField>
-      </div>
+      <CheckboxField className="cursor-pointer select-none">
+        <Checkbox
+          id="login-sso"
+          name="useSso"
+          color="indigo"
+          className="cursor-pointer"
+          checked={useSso}
+          onChange={(checked: boolean) => setUseSso(!!checked)}
+        />
+        <Label htmlFor="login-sso" className="cursor-pointer">Login with SSO</Label>
+      </CheckboxField>
       {error && (
         <div className="text-sm text-red-500 -mt-4" role="alert">
           {error}
         </div>
       )}
       <Button type="submit" className="w-full" disabled={loading} tabIndex={4} ref={submitRef}>
-        {loading ? "Authenticating…" : "Login"}
+        {loading ? (useSso ? 'Preparing SSO…' : 'Authenticating…') : (useSso ? 'Continue with SSO' : 'Login')}
       </Button>
       <Text tabIndex={-1} aria-hidden="true">
         Don’t have an account? {""}

src/components/MediaSlider.tsx

@@ -211,19 +211,19 @@ export const MediaSlider: React.FC<MediaSliderProps> = ({
         </>
       )}
 
-      <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2 flex items-center justify-between text-[11px] text-white">
-        <div>
+      <div className={
+        `absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2 flex items-center justify-between text-[11px] text-white` +
+        (isYT ? ' pointer-events-none' : '')
+      }>
+        <div className={isYT ? 'pointer-events-none' : ''}>
           Media {index + 1} / {list.length}
-          {current?.originalUrl && (
-            <> {" "}- <a href={current.originalUrl} target="_blank" rel="noopener noreferrer" className="underline hover:text-indigo-300">source</a></>
-          )}
         </div>
         <div className="flex items-center gap-2">
-          {isYT && !ytId && <span className="text-rose-300">Unrecognized YouTube URL</span>}
+          {isYT && !ytId && <span className="text-rose-300 pointer-events-none">Unrecognized YouTube URL</span>}
           <button
             type="button"
             onClick={toggleFullscreen}
-            className="p-1.5 rounded-md bg-white/10 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            className="p-1.5 rounded-md bg-white/10 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-indigo-500 pointer-events-auto"
             aria-label="Toggle fullscreen"
             title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
             aria-pressed={isFullscreen}