Skip to content

Commit b3d4e03

Browse files
CyferShepardCyferShepard
committed
Merge branch 'unstable' of https://github.com/CyferShepard/Jellystat into unstable
2 parents 1acb8c2 + bc51234 commit b3d4e03

4 files changed

Lines changed: 256 additions & 110 deletions

File tree

‎src/pages/components/sessions/session-card.jsx‎

Lines changed: 171 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ import Container from "react-bootstrap/Container";
99
import AccountCircleFillIcon from "remixicon-react/AccountCircleFillIcon";
1010
import PlayFillIcon from "remixicon-react/PlayFillIcon";
1111
import PauseFillIcon from "remixicon-react/PauseFillIcon";
12+
import TvLineIcon from "remixicon-react/TvLineIcon";
1213

1314
import { clientData } from "../../../lib/devices";
1415
import Tooltip from "@mui/material/Tooltip";
1516
import IpInfoModal from "../ip-info";
1617
import { Trans } from "react-i18next";
1718
import baseUrl from "../../../lib/baseurl";
18-
import { lineHeight } from "@mui/system";
1919

2020
function ticksToTimeString(ticks) {
2121
// Convert ticks to seconds
@@ -39,9 +39,10 @@ function getETAFromTicks(ticks) {
3939
// Calculate ETA
4040
const etaMillis = currentDate + ticks / 10000;
4141
const eta = new Date(etaMillis);
42+
const twelve_hr = JSON.parse(localStorage.getItem("12hr"));
4243

4344
// Return formated string in user locale
44-
return eta.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
45+
return eta.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", hour12: twelve_hr });
4546
}
4647

4748
function SessionCard(props) {
@@ -128,8 +129,8 @@ function SessionCard(props) {
128129
<Col className="w-100 h-100 m-0 px-0">
129130
<Card.Body className="w-100 h-100 p-1 pb-2">
130131
<Container className="h-100 d-flex flex-column justify-content-between g-0">
131-
<Row className="d-flex justify-content-start session-details" style={{ fontSize: "smaller" }}>
132-
<Col className="col-10">
132+
<Row className="mt-2 d-flex justify-content-start session-details" style={{ fontSize: "0.7em" }}>
133+
<Col className="col-auto">
133134
<Row>
134135
<Col className="col-auto session-details-title text-end text-uppercase">
135136
<Trans i18nKey="ACTIVITY_TABLE.DEVICE" />
@@ -176,6 +177,31 @@ function SessionCard(props) {
176177
</Tooltip>
177178
</Col>
178179
</Row>
180+
{props.data.session.NowPlayingItem.ContainerStream !== "" && (
181+
<Row className="mt-2">
182+
<Col className="col-auto session-details-title text-end text-uppercase">
183+
<Trans i18nKey="CONTAINER" />
184+
</Col>
185+
<Col
186+
className="col-auto ellipse"
187+
style={{
188+
maxWidth: "270px",
189+
}}
190+
>
191+
<Tooltip title={props.data.session.NowPlayingItem.ContainerStream}>
192+
<span
193+
style={{
194+
display: "-webkit-box",
195+
WebkitBoxOrient: "vertical",
196+
WebkitLineClamp: 1,
197+
}}
198+
>
199+
{props.data.session.NowPlayingItem.ContainerStream}
200+
</span>
201+
</Tooltip>
202+
</Col>
203+
</Row>
204+
)}
179205
{props.data.session.NowPlayingItem.VideoStream !== "" && (
180206
<Row>
181207
<Col className="col-auto session-details-title text-end text-uppercase">
@@ -184,7 +210,7 @@ function SessionCard(props) {
184210
<Col
185211
className="col-auto ellipse"
186212
style={{
187-
maxWidth: "200px",
213+
maxWidth: "270px",
188214
}}
189215
>
190216
<Tooltip title={props.data.session.NowPlayingItem.VideoStream}>
@@ -201,6 +227,29 @@ function SessionCard(props) {
201227
</Col>
202228
</Row>
203229
)}
230+
{props.data.session.NowPlayingItem.VideoBitrateStream !== "" && (
231+
<Row>
232+
<Col className="col-auto session-details-title text-end text-uppercase" />
233+
<Col
234+
className="col-auto ellipse"
235+
style={{
236+
maxWidth: "270px",
237+
}}
238+
>
239+
<Tooltip title={props.data.session.NowPlayingItem.VideoBitrateStream}>
240+
<span
241+
style={{
242+
display: "-webkit-box",
243+
WebkitBoxOrient: "vertical",
244+
WebkitLineClamp: 1,
245+
}}
246+
>
247+
{props.data.session.NowPlayingItem.VideoBitrateStream}
248+
</span>
249+
</Tooltip>
250+
</Col>
251+
</Row>
252+
)}
204253
{props.data.session.NowPlayingItem.AudioStream !== "" && (
205254
<Row>
206255
<Col className="col-auto session-details-title text-end text-uppercase">
@@ -209,7 +258,7 @@ function SessionCard(props) {
209258
<Col
210259
className="col-auto ellipse"
211260
style={{
212-
maxWidth: "200px",
261+
maxWidth: "270px",
213262
}}
214263
>
215264
<Tooltip title={props.data.session.NowPlayingItem.AudioStream}>
@@ -226,6 +275,29 @@ function SessionCard(props) {
226275
</Col>
227276
</Row>
228277
)}
278+
{props.data.session.NowPlayingItem.AudioBitrateStream !== "" && (
279+
<Row>
280+
<Col className="col-auto session-details-title text-end text-uppercase" />
281+
<Col
282+
className="col-auto ellipse"
283+
style={{
284+
maxWidth: "270px",
285+
}}
286+
>
287+
<Tooltip title={props.data.session.NowPlayingItem.AudioBitrateStream}>
288+
<span
289+
style={{
290+
display: "-webkit-box",
291+
WebkitBoxOrient: "vertical",
292+
WebkitLineClamp: 1,
293+
}}
294+
>
295+
{props.data.session.NowPlayingItem.AudioBitrateStream}
296+
</span>
297+
</Tooltip>
298+
</Col>
299+
</Row>
300+
)}
229301
{props.data.session.NowPlayingItem.SubtitleStream !== "" && (
230302
<Row>
231303
<Col className="col-auto session-details-title text-end text-uppercase">
@@ -234,7 +306,7 @@ function SessionCard(props) {
234306
<Col
235307
className="col-auto ellipse"
236308
style={{
237-
maxWidth: "200px",
309+
maxWidth: "270px",
238310
}}
239311
>
240312
<Tooltip title={props.data.session.NowPlayingItem.SubtitleStream}>
@@ -252,11 +324,16 @@ function SessionCard(props) {
252324
</Row>
253325
)}
254326

255-
<Row>
327+
<Row className="mt-2">
256328
<Col className="col-auto session-details-title text-end text-uppercase">
257329
<Trans i18nKey="ACTIVITY_TABLE.IP_ADDRESS" />
258330
</Col>
259-
<Col className="col-auto ellipse">
331+
<Col
332+
className="col-auto ellipse"
333+
style={{
334+
maxWidth: "270px",
335+
}}
336+
>
260337
{isRemoteSession(props.data.session.RemoteEndPoint) &&
261338
(window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) ? (
262339
<Link
@@ -283,94 +360,20 @@ function SessionCard(props) {
283360
</Row>
284361

285362
<Row className="p-0 m-0">
286-
{props.data.session.NowPlayingItem.Type === "Episode" ? (
287-
<Row className="d-flex flex-row justify-content-between p-0">
288-
<Card.Text>
289-
<Link
290-
to={`/libraries/item/${props.data.session.NowPlayingItem.Id}`}
291-
target="_blank"
292-
className="item-name"
293-
>
294-
{props.data.session.NowPlayingItem.SeriesName
295-
? props.data.session.NowPlayingItem.SeriesName + " - " + props.data.session.NowPlayingItem.Name
296-
: props.data.session.NowPlayingItem.Name}
297-
</Link>
298-
</Card.Text>
299-
</Row>
300-
) : props.data.session.NowPlayingItem.Type === "Audio" &&
301-
props.data.session.NowPlayingItem.Artists.length > 0 ? (
302-
<Col className="col-auto p-0">
303-
<Card.Text>{props.data.session.NowPlayingItem.Artists[0]}</Card.Text>
304-
</Col>
305-
) : (
306-
<></>
307-
)}
308-
<Row className="d-flex flex-row justify-content-between p-0 m-0">
309-
{props.data.session.NowPlayingItem.Type === "Episode" ? (
310-
<Col className="col-auto p-0">
311-
<Card.Text>
312-
{"S" +
313-
props.data.session.NowPlayingItem.ParentIndexNumber +
314-
" - E" +
315-
props.data.session.NowPlayingItem.IndexNumber}
316-
</Card.Text>
317-
</Col>
318-
) : (
319-
<Col className="p-0">
320-
<Card.Text>
321-
<Link
322-
to={`/libraries/item/${props.data.session.NowPlayingItem.Id}`}
323-
target="_blank"
324-
className="item-name"
325-
>
326-
{props.data.session.NowPlayingItem.SeriesName
327-
? props.data.session.NowPlayingItem.SeriesName + " - " + props.data.session.NowPlayingItem.Name
328-
: props.data.session.NowPlayingItem.Name}
329-
</Link>
330-
</Card.Text>
331-
</Col>
332-
)}
333-
334-
<Col className="d-flex flex-row justify-content-end text-end col-auto">
335-
{props.data.session.UserPrimaryImageTag !== undefined ? (
336-
<img
337-
className="session-card-user-image"
338-
src={baseUrl + "/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
339-
alt=""
340-
/>
341-
) : (
342-
<AccountCircleFillIcon className="session-card-user-image" />
343-
)}
344-
<Card.Text>
345-
<Tooltip title={props.data.session.UserName}>
346-
<Link to={`/users/${props.data.session.UserId}`} className="item-name" style={{ maxWidth: "15ch" }}>
347-
{props.data.session.UserName}
348-
</Link>
349-
</Tooltip>
350-
</Card.Text>
351-
</Col>
352-
</Row>
353-
354-
<Row className="p-0 m-0">
355-
<Col className="col-auto p-0">
356-
{props.data.session.PlayState.IsPaused ? <PauseFillIcon /> : <PlayFillIcon />}
357-
</Col>
358-
359-
<Col>
360-
<Card.Text className="text-end">
361-
<Tooltip
362-
title={`Ends at ${getETAFromTicks(
363-
props.data.session.NowPlayingItem.RunTimeTicks - props.data.session.PlayState.PositionTicks
364-
)}`}
365-
>
366-
<span>
367-
{ticksToTimeString(props.data.session.PlayState.PositionTicks)}/
368-
{ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
369-
</span>
370-
</Tooltip>
371-
</Card.Text>
372-
</Col>
373-
</Row>
363+
<Col>
364+
<Card.Text className="text-end">
365+
<Tooltip
366+
title={`Ends at ${getETAFromTicks(
367+
props.data.session.NowPlayingItem.RunTimeTicks - props.data.session.PlayState.PositionTicks
368+
)}`}
369+
>
370+
<span>
371+
{ticksToTimeString(props.data.session.PlayState.PositionTicks)}/
372+
{ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
373+
</span>
374+
</Tooltip>
375+
</Card.Text>
376+
</Col>
374377
</Row>
375378
</Container>
376379
</Card.Body>
@@ -390,6 +393,77 @@ function SessionCard(props) {
390393
</div>
391394
</Col>
392395
</Row>
396+
<Row className="p-0 m-0 mt-1">
397+
<Col
398+
className="col-1 p-0"
399+
style={{
400+
maxWidth: "20px",
401+
marginRight: "10px",
402+
}}
403+
>
404+
<Row>{props.data.session.PlayState.IsPaused ? <PauseFillIcon /> : <PlayFillIcon />}</Row>
405+
{props.data.session.NowPlayingItem.Type === "Episode" && (
406+
<Row>
407+
<TvLineIcon color="white" />
408+
</Row>
409+
)}
410+
</Col>
411+
<Col className="col-auto p-0">
412+
{props.data.session.NowPlayingItem.Type === "Episode" ? (
413+
<Row className="d-flex flex-row justify-content-start p-0">
414+
<Card.Text>
415+
<Link to={`/libraries/item/${props.data.session.NowPlayingItem.Id}`} target="_blank" className="item-name">
416+
{props.data.session.NowPlayingItem.SeriesName
417+
? props.data.session.NowPlayingItem.SeriesName + " - " + props.data.session.NowPlayingItem.Name
418+
: props.data.session.NowPlayingItem.Name}
419+
</Link>
420+
</Card.Text>
421+
</Row>
422+
) : props.data.session.NowPlayingItem.Type === "Audio" && props.data.session.NowPlayingItem.Artists.length > 0 ? (
423+
<Col className="col-auto p-0">
424+
<Card.Text>{props.data.session.NowPlayingItem.Artists[0]}</Card.Text>
425+
</Col>
426+
) : (
427+
<></>
428+
)}
429+
<Row className="d-flex flex-row justify-content-start p-0">
430+
{props.data.session.NowPlayingItem.Type === "Episode" ? (
431+
<Card.Text>
432+
{"S" +
433+
props.data.session.NowPlayingItem.ParentIndexNumber +
434+
" - E" +
435+
props.data.session.NowPlayingItem.IndexNumber}
436+
</Card.Text>
437+
) : (
438+
<Card.Text>
439+
<Link to={`/libraries/item/${props.data.session.NowPlayingItem.Id}`} target="_blank" className="item-name">
440+
{props.data.session.NowPlayingItem.SeriesName
441+
? props.data.session.NowPlayingItem.SeriesName + " - " + props.data.session.NowPlayingItem.Name
442+
: props.data.session.NowPlayingItem.Name}
443+
</Link>
444+
</Card.Text>
445+
)}
446+
</Row>
447+
</Col>
448+
<Col className="d-flex justify-content-end text-end me-0 pe-0">
449+
<Card.Text>
450+
<Tooltip title={props.data.session.UserName}>
451+
<Link to={`/users/${props.data.session.UserId}`} className="item-name" style={{ maxWidth: "15ch" }}>
452+
{props.data.session.UserName}
453+
</Link>
454+
</Tooltip>
455+
</Card.Text>
456+
{props.data.session.UserPrimaryImageTag !== undefined ? (
457+
<img
458+
className="session-card-user-image"
459+
src={baseUrl + "/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
460+
alt=""
461+
/>
462+
) : (
463+
<AccountCircleFillIcon className="session-card-user-image" />
464+
)}
465+
</Col>
466+
</Row>
393467
</div>
394468
</Card>
395469
);

0 commit comments

Comments
 (0)