Merge pull request #1150 from movie-web/fix/#962

decrease amount of margin of edit button on small screens

src/assets/locales/en.json

@@ -278,7 +278,8 @@
         "loadingError": "Error loading season",
         "loadingList": "Loading...",
         "loadingTitle": "Loading...",
-        "unairedEpisodes": "One or more episodes in this season have been disabled because they haven't been aired yet."
+        "unairedEpisodes": "One or more episodes in this season have been disabled because they haven't been aired yet.",
+        "seasons": "Seasons"
       },
       "playback": {
         "speedLabel": "Playback speed",

src/components/buttons/EditButton.tsx

@@ -25,7 +25,7 @@ export function EditButton(props: EditButtonProps) {
     >
       <span ref={parent}>
         {props.editing ? (
-          <span className="mx-4 whitespace-nowrap">
+          <span className="mx-2 sm:mx-4 whitespace-nowrap">
             {t("home.mediaList.stopEditing")}
           </span>
         ) : (

src/components/buttons/IconPatch.tsx

@@ -2,7 +2,7 @@ import { Icon, Icons } from "@/components/Icon";
 
 export interface IconPatchProps {
   active?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onClick?: () => void;
   clickable?: boolean;
   className?: string;
   icon: Icons;

src/components/media/MediaCard.tsx

@@ -10,7 +10,6 @@ import { MediaItem } from "@/utils/mediaTypes";
 
 import { IconPatch } from "../buttons/IconPatch";
 import { Icons } from "../Icon";
-import { MediaCardBookmarkButton } from "../player/Player";
 
 export interface MediaCardProps {
   media: MediaItem;
@@ -23,7 +22,6 @@ export interface MediaCardProps {
   };
   percentage?: number;
   closable?: boolean;
-  shouldShowBookMark?: boolean;
   onClose?: () => void;
 }
 
@@ -47,7 +45,6 @@ function MediaCardContent({
   series,
   percentage,
   closable,
-  shouldShowBookMark = true,
   onClose,
 }: MediaCardProps) {
   const { t } = useTranslation();
@@ -156,19 +153,6 @@ function MediaCardContent({
               icon={Icons.X}
             />
           </div>
-
-          {shouldShowBookMark && (
-            <div
-              className={classNames(
-                `absolute left-2 top-2 rounded-md transition-opacity opacity-0 group-hover:opacity-100 duration-300`,
-                {
-                  "opacity-100": closable,
-                },
-              )}
-            >
-              <MediaCardBookmarkButton media={media} />
-            </div>
-          )}
         </div>
         <h1 className="mb-1 line-clamp-3 max-h-[4.5rem] text-ellipsis break-words font-bold text-white">
           <span>{media.title}</span>

src/components/media/WatchedMediaCard.tsx

@@ -22,7 +22,6 @@ function formatSeries(series?: ShowProgressResult | null) {
 export interface WatchedMediaCardProps {
   media: MediaItem;
   closable?: boolean;
-  shouldShowBookMark?: boolean;
   onClose?: () => void;
 }
 
@@ -47,7 +46,6 @@ export function WatchedMediaCard(props: WatchedMediaCardProps) {
       percentage={percentage}
       onClose={props.onClose}
       closable={props.closable}
-      shouldShowBookMark={props.shouldShowBookMark}
     />
   );
 }

src/components/player/atoms/Episodes.tsx

@@ -212,9 +212,16 @@ function EpisodesView({
 
   return (
     <Menu.CardWithScrollable>
-      <Menu.BackLink onClick={goBack}>
-        {loadingState?.value?.season.title ||
-          t("player.menus.episodes.loadingTitle")}
+      <Menu.BackLink
+        onClick={goBack}
+        rightSide={
+          <span>
+            {loadingState?.value?.season.title ||
+              t("player.menus.episodes.loadingTitle")}
+          </span>
+        }
+      >
+        {t("player.menus.episodes.seasons")}
       </Menu.BackLink>
       {content}
     </Menu.CardWithScrollable>

src/components/player/internals/BookmarkButton.tsx

@@ -1,10 +1,8 @@
 import { useCallback } from "react";
 
-import { IconPatch } from "@/components/buttons/IconPatch";
 import { Icons } from "@/components/Icon";
 import { useBookmarkStore } from "@/stores/bookmarks";
 import { usePlayerStore } from "@/stores/player/store";
-import { MediaItem } from "@/utils/mediaTypes";
 
 import { VideoPlayerButton } from "./Button";
 
@@ -30,39 +28,3 @@ export function BookmarkButton() {
     />
   );
 }
-
-export function MediaCardBookmarkButton(props: { media: MediaItem }) {
-  const addBookmark = useBookmarkStore((s) => s.addBookmark);
-  const removeBookmark = useBookmarkStore((s) => s.removeBookmark);
-  const bookmarks = useBookmarkStore((s) => s.bookmarks);
-  const isBookmarked = !!bookmarks[props.media.id];
-
-  const toggleBookmark = useCallback(
-    (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      event.preventDefault();
-      if (!props.media.year) return;
-      if (isBookmarked) {
-        removeBookmark(props.media.id);
-      } else {
-        addBookmark({
-          tmdbId: props.media.id,
-          title: props.media.title,
-          releaseYear: props.media.year,
-          type: props.media.type,
-          poster: props.media.poster,
-        });
-      }
-    },
-    [isBookmarked, props.media, addBookmark, removeBookmark],
-  );
-
-  if (!props.media.year) return null;
-
-  return (
-    <IconPatch
-      clickable
-      onClick={toggleBookmark}
-      icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
-    />
-  );
-}

src/pages/parts/home/BookmarksPart.tsx

@@ -58,7 +58,6 @@ export function BookmarksPart() {
             media={v}
             closable={editing}
             onClose={() => removeBookmark(v.id)}
-            shouldShowBookMark={false}
           />
         ))}
       </MediaGrid>