Merge branch 'dev' into mediasession

src/assets/locales/en.json

@@ -128,15 +128,11 @@
       },
       "morning": {
         "default": "What would you like to watch this morning?",
-        "extra": [
-          "I hear Before Sunrise is good"
-        ]
+        "extra": ["I hear Before Sunrise is good"]
       },
       "night": {
         "default": "What would you like to watch tonight?",
-        "extra": [
-          "Tired? I hear The Exorcist is good."
-        ]
+        "extra": ["Tired? I hear The Exorcist is good."]
       }
     }
   },
@@ -243,7 +239,7 @@
     "menus": {
       "downloads": {
         "disclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided.",
-        "downloadPlaylist": "Download playlist",
+        "copyHlsPlaylist": "Copy HLS playlist link",
         "downloadSubtitle": "Download current subtitle",
         "downloadVideo": "Download video",
         "hlsDisclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided.<br /><br />Please note that you are downloading an HLS playlist, <bold>it is not recommended to download if you are not familiar with advanced streaming formats</bold>. Try different sources for different formats.",

src/components/buttons/Button.tsx

@@ -7,7 +7,9 @@ import { Spinner } from "@/components/layout/Spinner";
 
 interface Props {
   icon?: Icons;
-  onClick?: () => void;
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>,
+  ) => void;
   children?: ReactNode;
   theme?: "white" | "purple" | "secondary" | "danger";
   padding?: string;
@@ -21,11 +23,19 @@ interface Props {
 export function Button(props: Props) {
   const navigate = useNavigate();
   const { onClick, href, loading } = props;
-  const cb = useCallback(() => {
+  const cb = useCallback(
+    (
+      event: React.MouseEvent<
+        HTMLAnchorElement | HTMLButtonElement,
+        MouseEvent
+      >,
+    ) => {
       if (loading) return;
-    if (href) navigate(href);
-    else onClick?.();
-  }, [onClick, href, navigate, loading]);
+      if (href && !onClick) navigate(href);
+      else onClick?.(event);
+    },
+    [onClick, href, navigate, loading],
+  );
 
   let colorClasses = "bg-white hover:bg-gray-200 text-black";
   if (props.theme === "purple")
@@ -80,6 +90,7 @@ export function Button(props: Props) {
         target="_blank"
         rel="noreferrer"
         download={props.download}
+        onClick={cb}
       >
         {content}
       </a>

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

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { useCopyToClipboard } from "react-use";
 
 import { Button } from "@/components/buttons/Button";
 import { Icon, Icons } from "@/components/Icon";
@@ -43,6 +44,7 @@ export function DownloadView({ id }: { id: string }) {
   const router = useOverlayRouter(id);
   const { t } = useTranslation();
   const downloadUrl = useDownloadLink();
+  const [, copyToClipboard] = useCopyToClipboard();
 
   const sourceType = usePlayerStore((s) => s.source?.type);
   const selectedCaption = usePlayerStore((s) => s.caption?.selected);
@@ -69,7 +71,17 @@ export function DownloadView({ id }: { id: string }) {
                 <StyleTrans k="player.menus.downloads.hlsDisclaimer" />
               </Menu.Paragraph>
 
-              <Button className="w-full" href={downloadUrl} theme="purple">
+              <Button
+                className="w-full"
+                theme="purple"
+                href={downloadUrl}
+                onClick={(event) => {
+                  // Allow context menu & left click to copy
+                  event.preventDefault();
+
+                  copyToClipboard(downloadUrl);
+                }}
+              >
                 {t("player.menus.downloads.downloadPlaylist")}
               </Button>
               <Button

src/pages/parts/settings/ThemePart.tsx

@@ -104,7 +104,7 @@ function ThemePreview(props: {
         <span className="font-medium text-white">{props.name}</span>
         <span
           className={classNames(
-            "inline-block px-3 text-sm transition-opacity duration-150 rounded-full bg-[#27182F] text-white",
+            "inline-block px-3 py-1 leading-tight text-sm transition-opacity duration-150 rounded-full bg-pill-activeBackground text-white/85",
             props.active ? "opacity-100" : "opacity-0 pointer-events-none",
           )}
         >

themes/default.ts

@@ -97,6 +97,8 @@ export const defaultTheme = {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
         highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
       
       // meta data for the theme itself

themes/list/blue.ts

@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {

themes/list/gray.ts

@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {

themes/list/red.ts

@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {

themes/list/teal.ts

@@ -63,7 +63,9 @@ export default createTheme({
       pill: {
         background: tokens.shade.c300,
         backgroundHover: tokens.shade.c200,
-        highlight: tokens.blue.c200
+        highlight: tokens.blue.c200,
+
+        activeBackground: tokens.shade.c300,
       },
 
       global: {