Merge branch 'master' into Hardware-Selection-Guide

jellyfin · Sep 20, 2023 · bd29d5a · bd29d5a
2 parents 0459c9b + a34a16b
commit bd29d5a
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 57 deletions.
diff --git a/docs/general/clients/css-customization.md b/docs/general/clients/css-customization.md
@@ -731,45 +731,45 @@ Material Icons:
 - Outlined:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Outline.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Outline.css");
   ```
 
 - Rounded:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");
   ```
 
 - Sharp:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Sharp.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Sharp.css");
   ```
 
 Fontawesome Icons:
 
 - Solid:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/solid.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/solid.css");
   ```
 
 - Regular:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/regular.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/regular.css");
   ```
 
 - Light:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/light.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/light.css");
   ```
 
 - duotone:
 
   ```css
-  @import url(https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/duotone.css");
+  @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/Font%20Awesome/duotone.css");
   ```
 
 ## Community Links

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,8 +64,8 @@
     "@types/react": "17.0.65",
     "@types/react-helmet": "6.1.6",
     "@types/react-router-dom": "5.3.3",
-    "@typescript-eslint/eslint-plugin": "6.6.0",
-    "@typescript-eslint/parser": "6.6.0",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
     "eslint": "8.49.0",
     "eslint-config-prettier": "8.10.0",
     "eslint-config-standard": "17.1.0",

diff --git a/src/components/clients/ClientDetails.tsx b/src/components/clients/ClientDetails.tsx
@@ -27,6 +27,7 @@ const ClientDetails = ({ client }: { client: Client }) => (
   <DetailsCard
     title={client.name}
     description={client.description}
+    smallDescription={client.smallDescription}
     badges={
       <>
         <ClientTypeBadge clientType={client.clientType} />

diff --git a/src/components/common/DetailsCard.scss b/src/components/common/DetailsCard.scss
@@ -46,6 +46,9 @@
 .details-card__footer .button:first-child {
   margin-left: 0;
 }
+.details-card .card__body .card__body__helptext {
+  color: rgb(157, 148, 136);
+}
 
 @media (max-width: 420px) {
   .details-card__header {

diff --git a/src/components/common/DetailsCard.tsx b/src/components/common/DetailsCard.tsx
@@ -6,6 +6,7 @@ type DetailsCardProps = {
   id?: string;
   title: string;
   description: ReactNode;
+  smallDescription?: ReactNode;
   badges?: ReactNode;
   icons?: ReactNode;
   primaryButtons?: Array<ReactNode>;
@@ -17,6 +18,7 @@ const DetailsCard: FunctionComponent<DetailsCardProps> = ({
   id,
   title,
   description,
+  smallDescription,
   badges = [],
   icons = [],
   primaryButtons = [],
@@ -31,7 +33,10 @@ const DetailsCard: FunctionComponent<DetailsCardProps> = ({
       </div>
       <div className='details-card__icons'>{icons}</div>
     </div>
-    <div className='card__body padding-top--sm'>{description}</div>
+    <div className='card__body padding-top--sm'>
+      <p>{description}</p>
+      {smallDescription && <p className='card__body__helptext'>{smallDescription}</p>}
+    </div>
     <div className='card__footer details-card__footer container'>
       <div className='row'>
         <div className='details-card__footer__buttons col'>

diff --git a/src/data/clients.ts b/src/data/clients.ts
@@ -27,6 +27,7 @@ export type Client = {
   id: string;
   name: string;
   description: string;
+  smallDescription?: string;
   clientType: ClientType;
   deviceTypes: Array<DeviceType>;
   licenseType: LicenseType;
@@ -534,6 +535,8 @@ export const Clients: Array<Client> = [
     id: 'jellyfin-roku',
     name: 'Jellyfin for Roku',
     description: 'The official Jellyfin app for Roku devices.',
+    smallDescription:
+      'Due to a technical limitation of the Roku store, the Jellyfin app for Roku may state that a cable or satellite subscription is required. However, no subscription of any form is required to use the Jellyfin server or any official client.',
     clientType: ClientType.Official,
     deviceTypes: [DeviceType.TV],
     licenseType: LicenseType.OpenSource,