Merge pull request #663 from JPVenson/master

Added roku disclaimer in new Subtext to clients
jellyfin · Sep 18, 2023 · 0a2f5b1 · 0a2f5b1
2 parents 6999e9b + c97347b
commit 0a2f5b1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
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,