Metadata attribution for TheTVDB

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.css

@@ -35,7 +35,9 @@
 }
 
 .content {
+  display: flex;
   flex: 0 1 100%;
+  flex-direction: column;
   overflow: hidden;
 }
 
@@ -94,4 +96,8 @@
     justify-content: space-between;
     overflow: hidden;
   }
+
+  .overview {
+    margin-bottom: 20px;
+  }
 }

frontend/src/AddSeries/AddNewSeries/AddNewSeriesSearchResult.js

@@ -4,6 +4,7 @@ import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
+import MetadataAttribution from 'Components/MetadataAttribution';
 import { icons, kinds, sizes } from 'Helpers/Props';
 import SeriesPoster from 'Series/SeriesPoster';
 import AddNewSeriesModal from './AddNewSeriesModal';
@@ -188,6 +189,8 @@ class AddNewSeriesSearchResult extends Component {
             <div className={styles.overview}>
               {overview}
             </div>
+
+            <MetadataAttribution />
           </div>
         </div>
 

frontend/src/App/AppRoutes.js

@@ -20,6 +20,7 @@ import ImportListSettingsConnector from 'Settings/ImportLists/ImportListSettings
 import IndexerSettingsConnector from 'Settings/Indexers/IndexerSettingsConnector';
 import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementConnector';
 import MetadataSettings from 'Settings/Metadata/MetadataSettings';
+import MetadataSourceSettings from 'Settings/MetadataSource/MetadataSourceSettings';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import Profiles from 'Settings/Profiles/Profiles';
 import QualityConnector from 'Settings/Quality/QualityConnector';
@@ -192,6 +193,11 @@ function AppRoutes(props) {
         component={MetadataSettings}
       />
 
+      <Route
+        path="/settings/metadatasource"
+        component={MetadataSourceSettings}
+      />
+
       <Route
         path="/settings/tags"
         component={TagSettings}

frontend/src/Components/MetadataAttribution.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+}
+
+.attribution {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: auto;
+  color: var(--mediumGray);
+  font-size: $defaultFontSize;
+
+  &:hover {
+    color: var(--darkGray);
+    text-decoration: none;
+  }
+}

frontend/src/Components/MetadataAttribution.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import styles from './MetadataAttribution.css';
+
+export default function MetadataAttribution() {
+  return (
+    <div className={styles.container}>
+      <Link
+        className={styles.attribution}
+        to="/settings/metadatasource"
+      >
+        Metadata is provided by TheTVDB
+      </Link>
+    </div>
+  );
+}

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -127,6 +127,10 @@ const links = [
         title: 'Metadata',
         to: '/settings/metadata'
       },
+      {
+        title: 'Metadata Source',
+        to: '/settings/metadatasource'
+      },
       {
         title: 'Tags',
         to: '/settings/tags'
@@ -501,7 +505,7 @@ class PageSidebar extends Component {
                               key={child.to}
                               title={child.title}
                               to={child.to}
-                              isActive={pathname.startsWith(child.to)}
+                              isActive={pathname === child.to}
                               isParentItem={false}
                               isChildItem={true}
                               statusComponent={child.statusComponent}

frontend/src/Series/Details/SeriesDetails.css

@@ -138,7 +138,7 @@
 }
 
 .overview {
-  flex: 1 0 auto;
+  flex: 1 0 0;
   margin-top: 8px;
   min-height: 0;
   font-size: $intermediateFontSize;

frontend/src/Series/Details/SeriesDetails.js

@@ -8,6 +8,7 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Measure from 'Components/Measure';
+import MetadataAttribution from 'Components/MetadataAttribution';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
@@ -579,11 +580,13 @@ class SeriesDetails extends Component {
                 <Measure onMeasure={this.onMeasure}>
                   <div className={styles.overview}>
                     <TextTruncate
-                      line={Math.floor(overviewHeight / (defaultFontSize * lineHeight))}
+                      line={Math.floor(overviewHeight / (defaultFontSize * lineHeight)) - 1}
                       text={overview}
                     />
                   </div>
                 </Measure>
+
+                <MetadataAttribution />
               </div>
             </div>
           </div>

frontend/src/Settings/MetadataSource/MetadataSourceSettings.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import TheTvdb from './TheTvdb';
+
+function MetadataSourceSettings() {
+  return (
+    <PageContent title="Metadata Source Settings">
+      <SettingsToolbarConnector
+        showSave={false}
+      />
+
+      <PageContentBody>
+        <TheTvdb />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default MetadataSourceSettings;

frontend/src/Settings/MetadataSource/TheTvdb.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+}
+
+.info {
+  margin-left: 30px;
+}
+
+.title {
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 36px;
+}
+
+.image {
+  width: 213px;
+  height: 123px;
+}

frontend/src/Settings/MetadataSource/TheTvdb.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from 'Components/Link/Link';
+import styles from './TheTvdb.css';
+
+function TheTvdb(props) {
+  return (
+    <div className={styles.container}>
+      <img
+        className={styles.image}
+        src={`${window.Sonarr.urlBase}/Content/Images/thetvdb.png`}
+      />
+
+      <div className={styles.info}>
+        <div className={styles.title}>
+          TheTVDB
+        </div>
+
+        <div>
+          Series and episode information is provided by TheTVDB.com. <Link to="https://www.thetvdb.com/subscribe">Please consider supporting them.</Link>
+        </div>
+      </div>
+
+    </div>
+  );
+}
+
+export default TheTvdb;

frontend/src/Settings/Settings.js

@@ -108,6 +108,13 @@ function Settings() {
           Metadata
         </Link>
 
+        <Link
+          className={styles.link}
+          to="/settings/metadatasource"
+        >
+          Metadata Source
+        </Link>
+
         <div className={styles.summary}>
           Create metadata files when episodes are imported or series are refreshed
         </div>

frontend/src/Styles/Themes/dark.js

@@ -1,5 +1,6 @@
 const sonarrBlue = '#35c5f4';
 const darkGray = '#888';
+const mediumGray = '#999';
 const gray = '#adadad';
 const black = '#000';
 const white = '#fff';
@@ -29,6 +30,7 @@ module.exports = {
   darkGray,
   gray,
   lightGray,
+  mediumGray,
 
   // Theme Colors
 

frontend/src/Styles/Themes/light.js

@@ -1,6 +1,7 @@
 const sonarrBlue = '#35c5f4';
 const sonarrAlternateBlue = '#2193b5';
 const darkGray = '#888';
+const mediumGray = '#999';
 const gray = '#adadad';
 const black = '#000';
 const white = '#fff';
@@ -31,6 +32,7 @@ module.exports = {
   darkGray,
   gray,
   lightGray,
+  mediumGray,
 
   // Theme Colors