Fix ends at not always accounting for playback position (#6965)

* fix: "Ends At" not always accounting for playback position

fixes #6964

* Update contributors

* Remove redundant `?? 0`

* Remove redundant assignments

CONTRIBUTORS.md

@@ -102,6 +102,7 @@
 - [Free O'Toole](https://github.com/freeotoole)
 - [TheBosZ](https://github.com/thebosz)
 - [qm3jp](https://github.com/qm3jp)
+- [johnnyg](https://github.com/johnnyg)
 
 ## Emby Contributors
 

src/components/mediainfo/EndsAt.tsx

@@ -1,28 +1,26 @@
 import React, { type FC } from 'react';
 import classNames from 'classnames';
 import Box from '@mui/material/Box';
-import datetime from 'scripts/datetime';
-import globalize from 'lib/globalize';
+import mediainfo from './mediainfo';
 
 interface EndsAtProps {
     className?: string;
-    runTimeTicks: number
+    runTimeTicks: number;
+    positionTicks?: number;
 }
 
-const EndsAt: FC<EndsAtProps> = ({ runTimeTicks, className }) => {
+const EndsAt: FC<EndsAtProps> = ({ runTimeTicks, positionTicks, className }) => {
     const cssClass = classNames(
         'mediaInfoItem',
         'endsAt',
         className
     );
 
-    const endTime = new Date().getTime() + (runTimeTicks / 10000);
-    const endDate = new Date(endTime);
-    const displayTime = datetime.getDisplayTime(endDate);
+    const displayTime = mediainfo.getEndsAtFromPosition(runTimeTicks, positionTicks, 1, true);
 
     return (
         <Box className={cssClass}>
-            {globalize.translate('EndsAtValue', displayTime)}
+            {displayTime}
         </Box>
     );
 };

src/components/mediainfo/PrimaryMediaInfo.tsx

@@ -71,6 +71,7 @@ const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
         HasSubtitles,
         MediaType,
         RunTimeTicks,
+        PlaybackPositionTicks,
         CommunityRating,
         CriticRating
     } = item;
@@ -107,7 +108,7 @@ const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
                 && MediaType === ItemMediaKind.Video
                 && RunTimeTicks
                 && !StartDate && (
-                <EndsAt className={infoclass} runTimeTicks={RunTimeTicks} />
+                <EndsAt className={infoclass} runTimeTicks={RunTimeTicks} positionTicks={PlaybackPositionTicks} />
             )}
 
             {getMissingIndicator?.()}

src/components/mediainfo/mediainfo.js

@@ -321,11 +321,8 @@ export function getMediaInfoHtml(item, options = {}) {
 
 export function getEndsAt(item) {
     if (item.MediaType === 'Video' && item.RunTimeTicks && !item.StartDate) {
-        let endDate = new Date().getTime() + (item.RunTimeTicks / 10000);
-        endDate = new Date(endDate);
-
-        const displayTime = datetime.getDisplayTime(endDate);
-        return globalize.translate('EndsAtValue', displayTime);
+        const positionTicks = item.UserData?.PlaybackPositionTicks;
+        return getEndsAtFromPosition(item.RunTimeTicks, positionTicks, 1, true);
     }
 
     return null;