fix ux issues

CHANGELOG.md

@@ -5,9 +5,11 @@ All notable changes to this project will be documented in this file.
 ## 0.1.4
 
 - ⚡️ Added ability to resolve hidden media
-  - Before this update, media absent from your Anilist collection would not appear in your library even if it was successfully scanned.
+  - Before this update, media absent from your Anilist collection would not appear in your library even if they were successfully scanned.
 - 🦺 Fixed crash caused by manually matching media
 - 🦺 Fixed client-side crash caused by an empty Anilist collection
+- 🦺 Fixed rate limit issue when adding media to Anilist collection during scanning
+- 🦺 Fixed some UX issues
 - ⬆️ Updated dependencies
 
 ## 0.1.3

cmd/main.go

@@ -8,13 +8,15 @@ import (
 	"github.com/seanime-app/seanime/internal/handlers"
 )
 
-var development = true
+var development = false
+var version = "0.1.4"
 
 func main() {
 
 	fmt.Println()
 	myFigure := figure.NewFigure("Seanime", "big", true)
 	myFigure.Print()
+	fmt.Printf("						v%s\n", version)
 	fmt.Println()
 	fmt.Println("(alpha version, use at your own risk)")
 	fmt.Println()

seanime-web/src/app/(main)/entry/_containers/episode-section/episode-item.tsx

@@ -1,21 +1,21 @@
-import { LocalFileType, MediaEntryEpisode } from "@/lib/server/types"
-import { BaseMediaFragment } from "@/lib/anilist/gql/graphql"
-import { createIsolation } from "jotai-scope"
 import { EpisodeListItem } from "@/components/shared/episode-list-item"
-import { DropdownMenu } from "@/components/ui/dropdown-menu"
-import { BiDotsHorizontal } from "@react-icons/all-files/bi/BiDotsHorizontal"
 import { IconButton } from "@/components/ui/button"
-import { atom } from "jotai"
-import { VscVerified } from "@react-icons/all-files/vsc/VscVerified"
-import { BiLockOpenAlt } from "@react-icons/all-files/bi/BiLockOpenAlt"
-import { createTypesafeFormSchema, Field, TypesafeForm } from "@/components/ui/typesafe-form"
-import React, { memo } from "react"
-import { Modal } from "@/components/ui/modal"
-import { RiEyeCloseLine } from "@react-icons/all-files/ri/RiEyeCloseLine"
-import Image from "next/image"
 import { Divider } from "@/components/ui/divider"
+import { DropdownMenu } from "@/components/ui/dropdown-menu"
+import { Modal } from "@/components/ui/modal"
+import { createTypesafeFormSchema, Field, TypesafeForm } from "@/components/ui/typesafe-form"
+import { BaseMediaFragment } from "@/lib/anilist/gql/graphql"
 import { useUpdateLocalFile } from "@/lib/server/hooks/library"
+import { LocalFileType, MediaEntryEpisode } from "@/lib/server/types"
 import { AiFillWarning } from "@react-icons/all-files/ai/AiFillWarning"
+import { BiDotsHorizontal } from "@react-icons/all-files/bi/BiDotsHorizontal"
+import { BiLockOpenAlt } from "@react-icons/all-files/bi/BiLockOpenAlt"
+import { MdInfo } from "@react-icons/all-files/md/MdInfo"
+import { VscVerified } from "@react-icons/all-files/vsc/VscVerified"
+import { atom } from "jotai"
+import { createIsolation } from "jotai-scope"
+import Image from "next/image"
+import React, { memo } from "react"
 import toast from "react-hot-toast"
 
 export const EpisodeItemIsolation = createIsolation()
@@ -172,7 +172,8 @@ function MetadataModalButton() {
 function EpisodeItemInfoModalButton() {
     const [, setIsOpen] = EpisodeItemIsolation.useAtom(__episodeItem_infoModalIsOpenAtom)
     return <IconButton
-        icon={<RiEyeCloseLine/>}
+        icon={<MdInfo />}
+        className="opacity-30 hover:opacity-100 transform-opacity"
         intent={"gray-basic"}
         size={"xs"}
         onClick={() => setIsOpen(true)}
@@ -242,4 +243,4 @@ export function EpisodeItemInfoModal(props: { episode: MediaEntryEpisode, }) {
         </>
     )
 
-}
+}

seanime-web/src/app/(main)/entry/_containers/episode-section/progress-tracking.tsx

@@ -1,15 +1,15 @@
-import { MediaEntry, MediaPlayerPlaybackStatus } from "@/lib/server/types"
 import { useWebsocketMessageListener } from "@/atoms/websocket"
-import { SeaEndpoints, WSEvents } from "@/lib/server/endpoints"
-import { useBoolean } from "@/hooks/use-disclosure"
-import { Modal } from "@/components/ui/modal"
-import { Button } from "@/components/ui/button"
-import { useMemo, useState } from "react"
 import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { cn } from "@/components/ui/core"
+import { Modal } from "@/components/ui/modal"
+import { useBoolean } from "@/hooks/use-disclosure"
+import { SeaEndpoints, WSEvents } from "@/lib/server/endpoints"
 import { useSeaMutation } from "@/lib/server/queries/utils"
-import toast from "react-hot-toast"
+import { MediaEntry, MediaPlayerPlaybackStatus } from "@/lib/server/types"
 import { useQueryClient } from "@tanstack/react-query"
-import { cn } from "@/components/ui/core"
+import { useMemo, useState } from "react"
+import toast from "react-hot-toast"
 
 export function ProgressTracking({ entry }: { entry: MediaEntry }) {
 
@@ -18,6 +18,7 @@ export function ProgressTracking({ entry }: { entry: MediaEntry }) {
     const trackerModal = useBoolean(false)
     const isTracking = useBoolean(false)
     const isCompleted = useBoolean(false)
+    const serverSideTracking = useBoolean(false)
     const [status, setStatus] = useState<MediaPlayerPlaybackStatus | null>(null)
 
 
@@ -38,6 +39,7 @@ export function ProgressTracking({ entry }: { entry: MediaEntry }) {
         onMessage: data => {
             isTracking.on()
             trackerModal.on()
+            serverSideTracking.on()
             // Do not override previous progress tracking when we start another video (for playlists)
             if (!isCompleted.active) {
                 isCompleted.off()
@@ -66,6 +68,7 @@ export function ProgressTracking({ entry }: { entry: MediaEntry }) {
             } else {
                 toast.error(data)
             }
+            serverSideTracking.off()
             // We reset everything when the player is closed ONLY when the video was not completed
             if (!isCompleted.active) {
                 isTracking.off()
@@ -83,6 +86,9 @@ export function ProgressTracking({ entry }: { entry: MediaEntry }) {
             setStatus(null)
             isCompleted.off()
             trackerModal.off()
+            if (!serverSideTracking.active) {
+                isTracking.off()
+            }
             await qc.refetchQueries({ queryKey: ["get-media-entry", entry.mediaId] })
             await qc.refetchQueries({ queryKey: ["get-library-collection"] })
             await qc.refetchQueries({ queryKey: ["get-anilist-collection"] })
@@ -132,4 +138,4 @@ export function ProgressTracking({ entry }: { entry: MediaEntry }) {
         </>
     )
 
-}
+}

seanime-web/src/components/shared/large-episode-list-item.tsx

@@ -1,8 +1,8 @@
-import React from "react"
+import { imageShimmer } from "@/components/shared/image-helpers"
 import { cn } from "@/components/ui/core"
-import Image from "next/image"
 import { AiFillPlayCircle } from "@react-icons/all-files/ai/AiFillPlayCircle"
-import { imageShimmer } from "@/components/shared/image-helpers"
+import Image from "next/image"
+import React from "react"
 
 type LargeEpisodeListItemProps = {
     title: React.ReactNode
@@ -32,6 +32,7 @@ export const LargeEpisodeListItem: React.FC<LargeEpisodeListItemProps & Omit<Rea
         <div
             className={cn(
                 "rounded-md border border-[--border] overflow-hidden aspect-[4/2] w-96 relative flex items-end flex-none group/missed-episode-item cursor-pointer",
+                "user-select-none",
                 {
                     "w-[30rem]": larger,
                 },
@@ -71,4 +72,4 @@ export const LargeEpisodeListItem: React.FC<LargeEpisodeListItemProps & Omit<Rea
         </div>
     </>
 
-}
+}

seanime-web/src/components/shared/slider.tsx

@@ -1,9 +1,9 @@
 "use client"
-import React, { useRef, useState } from "react"
+import { cn } from "@/components/ui/core"
 import { useDraggableScroll } from "@/hooks/use-draggable-scroll"
 import { MdChevronLeft } from "@react-icons/all-files/md/MdChevronLeft"
 import { MdChevronRight } from "@react-icons/all-files/md/MdChevronRight"
-import { cn } from "@/components/ui/core"
+import React, { useRef, useState } from "react"
 import { useIsomorphicLayoutEffect, useUpdateEffect } from "react-use"
 
 interface SliderProps {
@@ -20,7 +20,8 @@ export const Slider: React.FC<SliderProps> = (props) => {
     const ref = useRef<HTMLDivElement>() as React.MutableRefObject<HTMLInputElement>
     const { events } = useDraggableScroll(ref, {
         decayRate: 0.96,
-        safeDisplacement: 20,
+        safeDisplacement: 15,
+        applyRubberBandEffect: true,
     })
 
     const [isScrolledToLeft, setIsScrolledToLeft] = useState(true)