0ct0pu5/homepage
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 { 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";
@ -27,24 +28,35 @@ function ticksToString(ticks) {
}
function SingleSessionEntry({ playCommand, session }) {
console.log(session);
const {
NowPlayingItem: { Name, SeriesName, RunTimeTicks },
PlayState: { PositionTicks, IsPaused, IsMuted },
} = session;
const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {
IsVideoDirect: true,
VideoDecoderIsHardware: true,
VideoEncoderIsHardware: true,
};
const percent = (PositionTicks / RunTimeTicks) * 100;
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-xs z-10 self-center ml-2">
<span>
<div className="grow text-xs z-10 self-center ml-2 relative w-full h-4 mr-2">
<div className="absolute w-full whitespace-nowrap text-ellipsis overflow-hidden">
{Name}
{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 className="grow" />
<div className="self-center text-xs flex justify-end mr-1">{IsMuted && <BsVolumeMuteFill />}</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">
@ -73,7 +85,12 @@ function SingleSessionEntry({ playCommand, session }) {
)}
</div>
<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>
</>
);
@ -84,6 +101,9 @@ function SessionEntry({ playCommand, session }) {
NowPlayingItem: { Name, SeriesName, RunTimeTicks },
PlayState: { PositionTicks, IsPaused, IsMuted },
} = session;
const { IsVideoDirect, VideoDecoderIsHardware, VideoEncoderIsHardware } = session?.TranscodingInfo || {};
const percent = (PositionTicks / RunTimeTicks) * 100;
return (
@ -111,14 +131,20 @@ function SessionEntry({ playCommand, session }) {
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}
{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 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>
);
}

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

@ -1,7 +1,8 @@
/* eslint-disable camelcase */
import useSWR from "swr";
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";
@ -27,16 +28,19 @@ function millisecondsToString(milliseconds) {
}
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 (
<>
<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">
<span>{full_title}</span>
<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="self-center text-xs flex justify-end mr-2">{year || grandparent_year}</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">
@ -56,7 +60,9 @@ function SingleSessionEntry({ session }) {
</div>
<div className="grow " />
<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>
</>
@ -64,7 +70,7 @@ function SingleSessionEntry({ 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 (
<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" && (
<BsFillPlayFill className="inline-block w-4 h-4 cursor-pointer -mt-[1px] mr-1 opacity-80" />
)}
<span>{full_title}</span>
</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="self-center text-xs flex justify-end mr-2">{millisecondsToString(view_offset)}</div>
</div>