Skip to content

Commit 96d7268

Browse files
CyferShepardCyferShepard
authored
Merge pull request #452 from brikim/feature/SessionCardUpdates
Session Card Updates - Provide more information
2 parents b81237a + b140db9 commit 96d7268

File tree

4 files changed

+254
-109
lines changed

4 files changed

+254
-109
lines changed

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

Lines changed: 169 additions & 96 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
@@ -128,8 +128,8 @@ function SessionCard(props) {
128128
<Col className="w-100 h-100 m-0 px-0">
129129
<Card.Body className="w-100 h-100 p-1 pb-2">
130130
<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">
131+
<Row className="mt-2 d-flex justify-content-start session-details" style={{ fontSize: "0.7em" }}>
132+
<Col className="col-auto">
133133
<Row>
134134
<Col className="col-auto session-details-title text-end text-uppercase">
135135
<Trans i18nKey="ACTIVITY_TABLE.DEVICE" />
@@ -176,6 +176,31 @@ function SessionCard(props) {
176176
</Tooltip>
177177
</Col>
178178
</Row>
179+
{props.data.session.NowPlayingItem.ContainerStream !== "" && (
180+
<Row className="mt-2">
181+
<Col className="col-auto session-details-title text-end text-uppercase">
182+
<Trans i18nKey="CONTAINER" />
183+
</Col>
184+
<Col
185+
className="col-auto ellipse"
186+
style={{
187+
maxWidth: "270px",
188+
}}
189+
>
190+
<Tooltip title={props.data.session.NowPlayingItem.ContainerStream}>
191+
<span
192+
style={{
193+
display: "-webkit-box",
194+
WebkitBoxOrient: "vertical",
195+
WebkitLineClamp: 1,
196+
}}
197+
>
198+
{props.data.session.NowPlayingItem.ContainerStream}
199+
</span>
200+
</Tooltip>
201+
</Col>
202+
</Row>
203+
)}
179204
{props.data.session.NowPlayingItem.VideoStream !== "" && (
180205
<Row>
181206
<Col className="col-auto session-details-title text-end text-uppercase">
@@ -184,7 +209,7 @@ function SessionCard(props) {
184209
<Col
185210
className="col-auto ellipse"
186211
style={{
187-
maxWidth: "200px",
212+
maxWidth: "270px",
188213
}}
189214
>
190215
<Tooltip title={props.data.session.NowPlayingItem.VideoStream}>
@@ -201,6 +226,29 @@ function SessionCard(props) {
201226
</Col>
202227
</Row>
203228
)}
229+
{props.data.session.NowPlayingItem.VideoBitrateStream !== "" && (
230+
<Row>
231+
<Col className="col-auto session-details-title text-end text-uppercase" />
232+
<Col
233+
className="col-auto ellipse"
234+
style={{
235+
maxWidth: "270px",
236+
}}
237+
>
238+
<Tooltip title={props.data.session.NowPlayingItem.VideoBitrateStream}>
239+
<span
240+
style={{
241+
display: "-webkit-box",
242+
WebkitBoxOrient: "vertical",
243+
WebkitLineClamp: 1,
244+
}}
245+
>
246+
{props.data.session.NowPlayingItem.VideoBitrateStream}
247+
</span>
248+
</Tooltip>
249+
</Col>
250+
</Row>
251+
)}
204252
{props.data.session.NowPlayingItem.AudioStream !== "" && (
205253
<Row>
206254
<Col className="col-auto session-details-title text-end text-uppercase">
@@ -209,7 +257,7 @@ function SessionCard(props) {
209257
<Col
210258
className="col-auto ellipse"
211259
style={{
212-
maxWidth: "200px",
260+
maxWidth: "270px",
213261
}}
214262
>
215263
<Tooltip title={props.data.session.NowPlayingItem.AudioStream}>
@@ -226,6 +274,29 @@ function SessionCard(props) {
226274
</Col>
227275
</Row>
228276
)}
277+
{props.data.session.NowPlayingItem.AudioBitrateStream !== "" && (
278+
<Row>
279+
<Col className="col-auto session-details-title text-end text-uppercase" />
280+
<Col
281+
className="col-auto ellipse"
282+
style={{
283+
maxWidth: "270px",
284+
}}
285+
>
286+
<Tooltip title={props.data.session.NowPlayingItem.AudioBitrateStream}>
287+
<span
288+
style={{
289+
display: "-webkit-box",
290+
WebkitBoxOrient: "vertical",
291+
WebkitLineClamp: 1,
292+
}}
293+
>
294+
{props.data.session.NowPlayingItem.AudioBitrateStream}
295+
</span>
296+
</Tooltip>
297+
</Col>
298+
</Row>
299+
)}
229300
{props.data.session.NowPlayingItem.SubtitleStream !== "" && (
230301
<Row>
231302
<Col className="col-auto session-details-title text-end text-uppercase">
@@ -234,7 +305,7 @@ function SessionCard(props) {
234305
<Col
235306
className="col-auto ellipse"
236307
style={{
237-
maxWidth: "200px",
308+
maxWidth: "270px",
238309
}}
239310
>
240311
<Tooltip title={props.data.session.NowPlayingItem.SubtitleStream}>
@@ -252,11 +323,16 @@ function SessionCard(props) {
252323
</Row>
253324
)}
254325

255-
<Row>
326+
<Row className="mt-2">
256327
<Col className="col-auto session-details-title text-end text-uppercase">
257328
<Trans i18nKey="ACTIVITY_TABLE.IP_ADDRESS" />
258329
</Col>
259-
<Col className="col-auto ellipse">
330+
<Col
331+
className="col-auto ellipse"
332+
style={{
333+
maxWidth: "270px",
334+
}}
335+
>
260336
{isRemoteSession(props.data.session.RemoteEndPoint) &&
261337
(window.env.JS_GEOLITE_ACCOUNT_ID ?? import.meta.env.JS_GEOLITE_ACCOUNT_ID) ? (
262338
<Link
@@ -283,94 +359,20 @@ function SessionCard(props) {
283359
</Row>
284360

285361
<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>
362+
<Col>
363+
<Card.Text className="text-end">
364+
<Tooltip
365+
title={`Ends at ${getETAFromTicks(
366+
props.data.session.NowPlayingItem.RunTimeTicks - props.data.session.PlayState.PositionTicks
367+
)}`}
368+
>
369+
<span>
370+
{ticksToTimeString(props.data.session.PlayState.PositionTicks)}/
371+
{ticksToTimeString(props.data.session.NowPlayingItem.RunTimeTicks)}
372+
</span>
373+
</Tooltip>
374+
</Card.Text>
375+
</Col>
374376
</Row>
375377
</Container>
376378
</Card.Body>
@@ -390,6 +392,77 @@ function SessionCard(props) {
390392
</div>
391393
</Col>
392394
</Row>
395+
<Row className="p-0 m-0 mt-1">
396+
<Col
397+
className="col-1 p-0"
398+
style={{
399+
maxWidth: "20px",
400+
marginRight: "10px",
401+
}}
402+
>
403+
<Row>{props.data.session.PlayState.IsPaused ? <PauseFillIcon /> : <PlayFillIcon />}</Row>
404+
{props.data.session.NowPlayingItem.Type === "Episode" && (
405+
<Row>
406+
<TvLineIcon color="white" />
407+
</Row>
408+
)}
409+
</Col>
410+
<Col className="col-auto p-0">
411+
{props.data.session.NowPlayingItem.Type === "Episode" ? (
412+
<Row className="d-flex flex-row justify-content-start p-0">
413+
<Card.Text>
414+
<Link to={`/libraries/item/${props.data.session.NowPlayingItem.Id}`} target="_blank" className="item-name">
415+
{props.data.session.NowPlayingItem.SeriesName
416+
? props.data.session.NowPlayingItem.SeriesName + " - " + props.data.session.NowPlayingItem.Name
417+
: props.data.session.NowPlayingItem.Name}
418+
</Link>
419+
</Card.Text>
420+
</Row>
421+
) : props.data.session.NowPlayingItem.Type === "Audio" && props.data.session.NowPlayingItem.Artists.length > 0 ? (
422+
<Col className="col-auto p-0">
423+
<Card.Text>{props.data.session.NowPlayingItem.Artists[0]}</Card.Text>
424+
</Col>
425+
) : (
426+
<></>
427+
)}
428+
<Row className="d-flex flex-row justify-content-start p-0">
429+
{props.data.session.NowPlayingItem.Type === "Episode" ? (
430+
<Card.Text>
431+
{"S" +
432+
props.data.session.NowPlayingItem.ParentIndexNumber +
433+
" - E" +
434+
props.data.session.NowPlayingItem.IndexNumber}
435+
</Card.Text>
436+
) : (
437+
<Card.Text>
438+
<Link to={`/libraries/item/${props.data.session.NowPlayingItem.Id}`} target="_blank" className="item-name">
439+
{props.data.session.NowPlayingItem.SeriesName
440+
? props.data.session.NowPlayingItem.SeriesName + " - " + props.data.session.NowPlayingItem.Name
441+
: props.data.session.NowPlayingItem.Name}
442+
</Link>
443+
</Card.Text>
444+
)}
445+
</Row>
446+
</Col>
447+
<Col className="d-flex justify-content-end text-end me-0 pe-0">
448+
<Card.Text>
449+
<Tooltip title={props.data.session.UserName}>
450+
<Link to={`/users/${props.data.session.UserId}`} className="item-name" style={{ maxWidth: "15ch" }}>
451+
{props.data.session.UserName}
452+
</Link>
453+
</Tooltip>
454+
</Card.Text>
455+
{props.data.session.UserPrimaryImageTag !== undefined ? (
456+
<img
457+
className="session-card-user-image"
458+
src={baseUrl + "/proxy/Users/Images/Primary?id=" + props.data.session.UserId + "&quality=50"}
459+
alt=""
460+
/>
461+
) : (
462+
<AccountCircleFillIcon className="session-card-user-image" />
463+
)}
464+
</Col>
465+
</Row>
393466
</div>
394467
</Card>
395468
);

0 commit comments

Comments
 (0)