Karl/homepage
1
0
Fork 0
mirror of https://github.com/karl0ss/homepage.git synced 2025-04-29 12:03:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

show transcoding info on streaming widgets

Browse Source
This commit is contained in:
Ben Phelps 2022-09-15 19:48:23 +03:00
parent 9a959bab16
commit e2bc541089
2 changed files with 62 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/services/widgets/service/emby.jsx
View File

@ -1,6 +1,7 @@
import useSWR from "swr"; import useSWR from "swr";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill } from "react-icons/bs"; import { BsVolumeMuteFill, BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
import { MdOutlineSmartDisplay } from "react-icons/md";
import Widget from "../widget"; import Widget from "../widget";
@ -27,24 +28,35 @@ function ticksToString(ticks) {
} }
function SingleSessionEntry({ playCommand, session }) { function SingleSessionEntry({ playCommand, session }) {
console.log(session);
const { const {
NowPlayingItem: { Name, SeriesName, RunTimeTicks }, NowPlayingItem: { Name, SeriesName, RunTimeTicks },
PlayState: { PositionTicks, IsPaused, IsMuted }, PlayState: { PositionTicks, IsPaused, IsMuted },
} = session; } = session;
const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {
IsVideoDirect: true,
VideoDecoderIsHardware: true,
VideoEncoderIsHardware: true,
};
const percent = (PositionTicks / RunTimeTicks) * 100; const percent = (PositionTicks / RunTimeTicks) * 100;
return ( return (
<> <>
<div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex"> <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
<div className="text-xs z-10 self-center ml-2"> <div className="grow text-xs z-10 self-center ml-2 relative w-full h-4 mr-2">
<span> <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
{Name} {Name}
{SeriesName && ` - ${SeriesName}`} {SeriesName && ` - ${SeriesName}`}
</span> </div>
</div>
<div className="self-center text-xs flex justify-end mr-1">
{IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
{!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
{!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && (
<BsFillCpuFill className="opacity-50" />
)}
</div> </div>
<div className="grow" />
<div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
</div> </div>
<div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex"> <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
@ -73,7 +85,12 @@ function SingleSessionEntry({ playCommand, session }) {
)} )}
</div> </div>
<div className="grow " /> <div className="grow " />
<div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div> <div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
<div className="self-center text-xs flex justify-end mr-2 z-10">
{ticksToString(PositionTicks)}
<span className="mx-0.5 text-[8px]">/</span>
{ticksToString(RunTimeTicks)}
</div>
</div> </div>
</> </>
); );
@ -84,6 +101,9 @@ function SessionEntry({ playCommand, session }) {
NowPlayingItem: { Name, SeriesName, RunTimeTicks }, NowPlayingItem: { Name, SeriesName, RunTimeTicks },
PlayState: { PositionTicks, IsPaused, IsMuted }, PlayState: { PositionTicks, IsPaused, IsMuted },
} = session; } = session;
const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {};
const percent = (PositionTicks / RunTimeTicks) * 100; const percent = (PositionTicks / RunTimeTicks) * 100;
return ( return (
@ -111,14 +131,20 @@ function SessionEntry({ playCommand, session }) {
className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80"
/> />
)} )}
<span> </div>
<div className="grow text-xs z-10 self-center relative w-full h-4">
<div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
{Name} {Name}
{SeriesName && ` - ${SeriesName}`} {SeriesName && ` - ${SeriesName}`}
</span> </div>
</div>
<div className="self-center text-xs flex justify-end mr-1 z-10">{IsMuted && <BsVolumeMuteFill />}</div>
<div className="self-center text-xs flex justify-end mr-1 z-10">{ticksToString(PositionTicks)}</div>
<div className="self-center items-center text-xs flex justify-end mr-2 z-10">
{IsVideoDirect && <MdOutlineSmartDisplay className="opacity-50" />}
{!IsVideoDirect && (!VideoDecoderIsHardware || !VideoEncoderIsHardware) && <BsCpu className="opacity-50" />}
{!IsVideoDirect && VideoDecoderIsHardware && VideoEncoderIsHardware && <BsFillCpuFill className="opacity-50" />}
</div> </div>
<div className="grow " />
<div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</div>
<div className="self-center text-xs flex justify-end mr-2">{ticksToString(PositionTicks)}</div>
</div> </div>
); );
} }

32
src/components/services/widgets/service/tautulli.jsx
View File

@ -1,7 +1,8 @@
/* eslint-disable camelcase */ /* eslint-disable camelcase */
import useSWR from "swr"; import useSWR from "swr";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { BsFillPlayFill, BsPauseFill } from "react-icons/bs"; import { BsFillPlayFill, BsPauseFill, BsCpu, BsFillCpuFill } from "react-icons/bs";
import { MdOutlineSmartDisplay } from "react-icons/md";
import Widget from "../widget"; import Widget from "../widget";
@ -27,16 +28,19 @@ function millisecondsToString(milliseconds) {
} }
function SingleSessionEntry({ session }) { function SingleSessionEntry({ session }) {
const { full_title, duration, view_offset, progress_percent, state, year, grandparent_year } = session; const { full_title, duration, view_offset, progress_percent, state, video_decision, audio_decision } = session;
return ( return (
<> <>
<div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex"> <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
<div className="text-xs z-10 self-center ml-2"> <div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
<span>{full_title}</span> <div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{full_title}</div>
</div>
<div className="self-center text-xs flex justify-end mr-1">
{video_decision === "copy" && audio_decision === "copy" && <MdOutlineSmartDisplay className="opacity-50" />}
{video_decision !== "copy" && audio_decision !== "copy" && <BsFillCpuFill className="opacity-50" />}
{video_decision === "copy" && audio_decision !== "copy" && <BsCpu className="opacity-50" />}
</div> </div>
<div className="grow" />
<div className="self-center text-xs flex justify-end mr-2">{year || grandparent_year}</div>
</div> </div>
<div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex"> <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
@ -56,7 +60,9 @@ function SingleSessionEntry({ session }) {
</div> </div>
<div className="grow " /> <div className="grow " />
<div className="self-center text-xs flex justify-end mr-2"> <div className="self-center text-xs flex justify-end mr-2">
{millisecondsToString(view_offset)} / {millisecondsToString(duration)} {millisecondsToString(view_offset)}
<span className="mx-0.5 text-[8px]">/</span>
{millisecondsToString(duration)}
</div> </div>
</div> </div>
</> </>
@ -64,7 +70,7 @@ function SingleSessionEntry({ session }) {
} }
function SessionEntry({ session }) { function SessionEntry({ session }) {
const { full_title, view_offset, progress_percent, state } = session; const { full_title, view_offset, progress_percent, state, video_decision, audio_decision } = session;
return ( return (
<div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex"> <div className="text-theme-700 dark:text-theme-200 relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1 flex">
@ -81,8 +87,16 @@ function SessionEntry({ session }) {
{state !== "paused" && ( {state !== "paused" && (
<BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" /> <BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
)} )}
<span>{full_title}</span>
</div> </div>
<div className="text-xs z-10 self-center ml-2 relative w-full h-4 grow mr-2">
<div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">{full_title}</div>
</div>
<div className="self-center text-xs flex justify-end mr-1">
{video_decision === "copy" && audio_decision === "copy" && <MdOutlineSmartDisplay className="opacity-50" />}
{video_decision !== "copy" && audio_decision !== "copy" && <BsFillCpuFill className="opacity-50" />}
{video_decision === "copy" && audio_decision !== "copy" && <BsCpu className="opacity-50" />}
</div>
<div className="grow " /> <div className="grow " />
<div className="self-center text-xs flex justify-end mr-2">{millisecondsToString(view_offset)}</div> <div className="self-center text-xs flex justify-end mr-2">{millisecondsToString(view_offset)}</div>
</div> </div>