From 894cf1bcc9cf8f6fc02dc2bf311c6caec3a19bd9 Mon Sep 17 00:00:00 2001 From: Thegan Govender Date: Fri, 28 Apr 2023 01:36:15 +0200 Subject: [PATCH] Added Media Listing to libraries Added Media Listing to libraries Minor css changes to item cards and image constraints Minor css changes to stat cards Added api endpoint to show all items per library --- backend/api.js | 9 +-- .../components/activity/activity-table.js | 2 +- .../item-info/more-items/more-items-card.js | 3 +- src/pages/components/library-info.js | 3 +- src/pages/components/library/library-items.js | 75 +++++++++++++++++++ .../libraryStatCard/library-stat-component.js | 6 +- .../components/statCards/ItemStatComponent.js | 2 +- .../components/statCards/most_active_users.js | 8 +- src/pages/css/lastplayed.css | 13 +++- src/pages/css/library/media-items.css | 33 ++++++++ src/pages/css/statCard.css | 1 - 11 files changed, 131 insertions(+), 24 deletions(-) create mode 100644 src/pages/components/library/library-items.js create mode 100644 src/pages/css/library/media-items.css diff --git a/backend/api.js b/backend/api.js index c417bea..522c6a6 100644 --- a/backend/api.js +++ b/backend/api.js @@ -69,12 +69,11 @@ router.get("/getLibraries", async (req, res) => { router.post("/getLibraryItems", async (req, res) => { try{ - const Id = req.headers['id']; - + const {libraryid} = req.body; + console.log(`ENDPOINT CALLED: /getLibraryItems: `+libraryid); const { rows } = await db.query( - `SELECT * FROM jf_library_items where "ParentId"='${Id}'` + `SELECT * FROM jf_library_items where "ParentId"='${libraryid}'` ); - console.log({ Id: Id }); res.send(rows); @@ -83,7 +82,7 @@ router.post("/getLibraryItems", async (req, res) => { console.log(error); } - console.log(`ENDPOINT CALLED: /getLibraryItems: `); + }); router.post("/getSeasons", async (req, res) => { diff --git a/src/pages/components/activity/activity-table.js b/src/pages/components/activity/activity-table.js index b7e171e..e839ebc 100644 --- a/src/pages/components/activity/activity-table.js +++ b/src/pages/components/activity/activity-table.js @@ -61,7 +61,7 @@ function Row(data) { size="small" onClick={() => {if(row.results.length>1){setOpen(!open);}}} > - {!open ? : } + {!open ? 1 ?1 : 0} cursor={row.results.length>1 ? "pointer":"default"}/> : } {row.UserName} diff --git a/src/pages/components/item-info/more-items/more-items-card.js b/src/pages/components/item-info/more-items/more-items-card.js index b35e86d..6a30c30 100644 --- a/src/pages/components/item-info/more-items/more-items-card.js +++ b/src/pages/components/item-info/more-items/more-items-card.js @@ -12,13 +12,14 @@ function MoreItemCards(props) { const [loaded, setLoaded] = useState(false); const [fallback, setFallback] = useState(false); return ( -
+
{props.data.ImageBlurHashes && !loaded ? : null} {fallback ? - +
diff --git a/src/pages/components/library/library-items.js b/src/pages/components/library/library-items.js new file mode 100644 index 0000000..36b82fb --- /dev/null +++ b/src/pages/components/library/library-items.js @@ -0,0 +1,75 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; + + +import MoreItemCards from "../item-info/more-items/more-items-card"; + + +import Config from "../../../lib/config"; +import "../../css/library/media-items.css"; + +function LibraryItems(props) { + const [data, setData] = useState(); + const [config, setConfig] = useState(); + + + useEffect(() => { + + const fetchConfig = async () => { + try { + const newConfig = await Config(); + setConfig(newConfig); + } catch (error) { + console.log(error); + } + }; + + const fetchData = async () => { + try { + const itemData = await axios.post(`/api/getLibraryItems`, { + libraryid: props.LibraryId, + }, { + headers: { + Authorization: `Bearer ${config.token}`, + "Content-Type": "application/json", + }, + }); + setData(itemData.data); + console.log(itemData.data); + } catch (error) { + console.log(error); + } + }; + + + if (!config) { + fetchConfig(); + }else{ + fetchData(); + } + + + const intervalId = setInterval(fetchData, 60000 * 5); + return () => clearInterval(intervalId); + }, [config, props.LibraryId]); + + + if (!data || !config) { + return <>; + } + + return ( +
+

Media

+
+ {data.map((item) => ( + + ))} + +
+ +
+ ); +} + +export default LibraryItems; diff --git a/src/pages/components/libraryStatCard/library-stat-component.js b/src/pages/components/libraryStatCard/library-stat-component.js index 2717899..afc0e71 100644 --- a/src/pages/components/libraryStatCard/library-stat-component.js +++ b/src/pages/components/libraryStatCard/library-stat-component.js @@ -14,15 +14,15 @@ function LibraryStatComponent(props) { }; const cardBgStyle = { - backdropFilter: 'blur(5px)', + // backdropFilter: 'blur(5px)', backgroundColor: 'rgb(0, 0, 0, 0.6)', height:'100%', }; return ( - -
+ +
diff --git a/src/pages/components/statCards/ItemStatComponent.js b/src/pages/components/statCards/ItemStatComponent.js index f9e8a77..85482b7 100644 --- a/src/pages/components/statCards/ItemStatComponent.js +++ b/src/pages/components/statCards/ItemStatComponent.js @@ -21,7 +21,7 @@ function ItemStatComponent(props) { }; const cardBgStyle = { - backdropFilter: 'blur(5px)', + backdropFilter: props.base_url ? 'blur(5px)' : 'blur(0px)', backgroundColor: 'rgb(0, 0, 0, 0.6)', height:'100%', }; diff --git a/src/pages/components/statCards/most_active_users.js b/src/pages/components/statCards/most_active_users.js index 8d4f3f7..e8109d3 100644 --- a/src/pages/components/statCards/most_active_users.js +++ b/src/pages/components/statCards/most_active_users.js @@ -64,19 +64,13 @@ function MostActiveUsers(props) { }, [data, config, days,props.days]); - - // const handleImageError = () => { - // setImgError(true); - // }; - - if (!data || data.length === 0) { return <>; } return ( - } data={data} heading={"MOST ACTIVE USERS"} units={"Plays"}/> + } data={data} heading={"MOST ACTIVE USERS"} units={"Plays"}/> ); } diff --git a/src/pages/css/lastplayed.css b/src/pages/css/lastplayed.css index 1d0f709..81e3d42 100644 --- a/src/pages/css/lastplayed.css +++ b/src/pages/css/lastplayed.css @@ -8,10 +8,8 @@ color: white; margin-bottom: 20px; min-height: 300px; - - - } + .last-played-container::-webkit-scrollbar { width: 5px; /* set scrollbar width */ } @@ -42,6 +40,7 @@ width: 150px; border-radius: 8px; + background-color: #1e1c22; } @@ -49,13 +48,19 @@ .episode{ width: 220px !important; height: 128px !important; + } +.episode-card{ + width: 220px !important; + + +} .last-card-banner { width: 150px; - height: 224px; + height: 220px; transition: opacity 0.2s ease-in-out; } diff --git a/src/pages/css/library/media-items.css b/src/pages/css/library/media-items.css new file mode 100644 index 0000000..08d60cd --- /dev/null +++ b/src/pages/css/library/media-items.css @@ -0,0 +1,33 @@ +.media-items-container { + + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 150px)); + grid-gap: 20px; + + background-color: rgb(100, 100, 100,0.2); + padding: 20px; + border-radius: 8px; + color: white; + margin-bottom: 20px; + min-height: 300px; +} + +.media-items-container::-webkit-scrollbar { + width: 5px; /* set scrollbar width */ + } + + .media-items-container::-webkit-scrollbar-track { + background-color: transparent; /* set track color */ + } + + .media-items-container::-webkit-scrollbar-thumb { + background-color: #8888884d; /* set thumb color */ + border-radius: 5px; /* round corners */ + width: 5px; + } + + + + .media-items-container::-webkit-scrollbar-thumb:hover { + background-color: #88888883; /* set thumb color */ + } \ No newline at end of file diff --git a/src/pages/css/statCard.css b/src/pages/css/statCard.css index 13e89a2..69054cd 100644 --- a/src/pages/css/statCard.css +++ b/src/pages/css/statCard.css @@ -12,7 +12,6 @@ color: white; max-width: 500px; max-height: 180px; - border-radius: 8px !important; } .stat-card-banner