feat(all): add initial Jellyfin/Emby support

package.json

@@ -73,6 +73,7 @@
     "@babel/cli": "^7.12.17",
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
+    "@fullhuman/postcss-purgecss": "3.0.0",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",
@@ -140,7 +141,6 @@
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
-      "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
       "commit-msg": "[[ -n $HUSKY_BYPASS ]] || commitlint -E HUSKY_GIT_PARAMS"
     }
   },

server/api/jellyfin.ts

@@ -0,0 +1,246 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, { AxiosInstance } from 'axios';
+import logger from '../logger';
+
+export interface JellyfinUserResponse {
+  Name: string;
+  ServerId: string;
+  ServerName: string;
+  Id: string;
+  PrimaryImageTag?: string;
+}
+
+export interface JellyfinLoginResponse {
+  User: JellyfinUserResponse;
+  AccessToken: string;
+}
+export interface JellyfinLibrary {
+  type: 'show' | 'movie';
+  key: string;
+  title: string;
+  agent: string;
+}
+
+export interface JellyfinLibraryItem {
+  Name: string;
+  Id: string;
+  HasSubtitles: boolean;
+  Type: 'Movie' | 'Episode' | 'Season' | 'Series';
+  SeriesName?: string;
+  SeriesId?: string;
+  SeasonId?: string;
+  SeasonName?: string;
+  IndexNumber?: number;
+  ParentIndexNumber?: number;
+  MediaType: string;
+}
+
+export interface JellyfinMediaStream {
+  Codec: string;
+  Type: 'Video' | 'Audio' | 'Subtitle';
+  Height?: number;
+  Width?: number;
+  AverageFrameRate?: number;
+  RealFrameRate?: number;
+  Language?: string;
+  DisplayTitle: string;
+}
+export interface JellyfinMediaSource {
+  Protocol: string;
+  Id: string;
+  Path: string;
+  Type: string;
+  VideoType: string;
+  MediaStreams: JellyfinMediaStream[];
+}
+
+export interface JellyfinLibraryItemExtended extends JellyfinLibraryItem {
+  ProviderIds: {
+    Tmdb?: string;
+    Imdb?: string;
+    Tvdb?: string;
+  };
+  MediaSources?: JellyfinMediaSource[];
+  Width?: number;
+  Height?: number;
+  IsHD?: boolean;
+  DateCreated?: string;
+}
+class JellyfinAPI {
+  private authToken?: string;
+  private jellyfinHost: string;
+  private axios: AxiosInstance;
+
+  constructor(jellyfinHost: string, authToken?: string) {
+    this.jellyfinHost = jellyfinHost;
+    this.authToken = authToken;
+
+    let authHeaderVal = '';
+    if (this.authToken) {
+      authHeaderVal =
+        'MediaBrowser Client="Jellyfin Web", Device="Firefox", DeviceId="TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NDsgcnY6ODUuMCkgR2Vja28vMjAxMDAxMDEgRmlyZWZveC84NS4wfDE2MTI5MjcyMDM5NzM1", Version="10.8.0", Token="' +
+        authToken +
+        '"';
+    } else {
+      authHeaderVal =
+        'MediaBrowser Client="Jellyfin Web", Device="Firefox", DeviceId="TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NDsgcnY6ODUuMCkgR2Vja28vMjAxMDAxMDEgRmlyZWZveC84NS4wfDE2MTI5MjcyMDM5NzM1", Version="10.8.0"';
+    }
+
+    this.axios = axios.create({
+      baseURL: this.jellyfinHost,
+      headers: {
+        'X-Emby-Authorization': authHeaderVal,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+    });
+  }
+
+  public async login(
+    Username?: string,
+    Password?: string
+  ): Promise<JellyfinLoginResponse> {
+    try {
+      const account = await this.axios.post<JellyfinLoginResponse>(
+        '/Users/AuthenticateByName',
+        {
+          Username: Username,
+          Pw: Password,
+        }
+      );
+      return account.data;
+    } catch (e) {
+      throw new Error('Unauthorized');
+    }
+  }
+
+  public async getUser(): Promise<JellyfinUserResponse> {
+    try {
+      const account = await this.axios.get<JellyfinUserResponse>('/Users/Me');
+      return account.data;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting the account from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+
+  public async getLibraries(): Promise<JellyfinLibrary[]> {
+    try {
+      const account = await this.axios.get<any>('/Library/MediaFolders');
+
+      // eslint-disable-next-line prefer-const
+      let response: JellyfinLibrary[] = [];
+
+      account.data.Items.forEach((Item: any) => {
+        const library: JellyfinLibrary = {
+          key: Item.Id,
+          title: Item.Name,
+          type: Item.CollectionType == 'movies' ? 'movie' : 'show',
+          agent: 'jellyfin',
+        };
+
+        if (Item.Type == 'CollectionFolder') {
+          response.push(library);
+        }
+      });
+
+      return response;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting libraries from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+
+  public async getLibraryContents(id: string): Promise<JellyfinLibraryItem[]> {
+    try {
+      const contents = await this.axios.get<any>(
+        `/Users/${
+          (await this.getUser()).Id
+        }/Items?SortBy=SortName&SortOrder=Ascending&Recursive=true&StartIndex=0&ParentId=${id}`
+      );
+
+      return contents.data.Items;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+
+  public async getRecentlyAdded(id: string): Promise<JellyfinLibraryItem[]> {
+    try {
+      const contents = await this.axios.get<any>(
+        `/Users/${
+          (await this.getUser()).Id
+        }/Items/Latest?Limit=50&ParentId=${id}`
+      );
+
+      return contents.data.Items;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+
+  public async getItemData(id: string): Promise<JellyfinLibraryItemExtended> {
+    try {
+      const contents = await this.axios.get<any>(
+        `/Users/${(await this.getUser()).Id}/Items/${id}`
+      );
+
+      return contents.data;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting library content from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+
+  public async getSeasons(seriesID: string): Promise<JellyfinLibraryItem[]> {
+    try {
+      const contents = await this.axios.get<any>(`/Shows/${seriesID}/Seasons`);
+
+      return contents.data.Items;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting the list of seasons from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+
+  public async getEpisodes(
+    seriesID: string,
+    seasonID: string
+  ): Promise<JellyfinLibraryItem[]> {
+    try {
+      const contents = await this.axios.get<any>(
+        `/Shows/${seriesID}/Episodes?seasonId=${seasonID}`
+      );
+
+      return contents.data.Items;
+    } catch (e) {
+      logger.error(
+        `Something went wrong while getting the list of episodes from the Jellyfin server: ${e.message}`,
+        { label: 'Jellyfin API' }
+      );
+      throw new Error('Invalid auth token');
+    }
+  }
+}
+
+export default JellyfinAPI;

server/constants/user.ts

@@ -1,4 +1,5 @@
 export enum UserType {
   PLEX = 1,
   LOCAL = 2,
+  JELLYFIN = 3,
 }

server/entity/Media.ts

@@ -133,6 +133,12 @@ class Media {
   @Column({ nullable: true })
   public ratingKey4k?: string;
 
+  @Column({ nullable: true })
+  public jellyfinMediaID?: string;
+
+  @Column({ nullable: true })
+  public jellyfinMediaID4k?: string;
+
   public serviceUrl?: string;
   public serviceUrl4k?: string;
   public downloadStatus?: DownloadingItem[] = [];
@@ -141,6 +147,9 @@ class Media {
   public plexUrl?: string;
   public plexUrl4k?: string;
 
+  public jellyfinUrl?: string;
+  public jellyfinUrl4k?: string;
+
   constructor(init?: Partial<Media>) {
     Object.assign(this, init);
   }
@@ -156,6 +165,17 @@ class Media {
     }
   }
 
+  @AfterLoad()
+  public setJellyfinUrls(): void {
+    const jellyfinSettings = getSettings().jellyfin;
+    if (this.jellyfinMediaID) {
+      this.jellyfinUrl = `${jellyfinSettings.hostname}/web/#!/details?id=${this.jellyfinMediaID}&context=home&serverId=${jellyfinSettings.serverID}`;
+    }
+    if (this.jellyfinMediaID4k) {
+      this.jellyfinUrl4k = `${jellyfinSettings.hostname}/web/#!/details?id=${this.jellyfinMediaID4k}&context=home&serverId=${jellyfinSettings.serverID}`;
+    }
+  }
+
   @AfterLoad()
   public setServiceUrl(): void {
     if (this.mediaType === MediaType.MOVIE) {

server/entity/User.ts

@@ -47,6 +47,9 @@ export class User {
   @Column({ nullable: true })
   public plexUsername: string;
 
+  @Column({ nullable: true })
+  public jellyfinUsername: string;
+
   @Column({ nullable: true })
   public username?: string;
 
@@ -65,6 +68,12 @@ export class User {
   @Column({ nullable: true, select: false })
   public plexId?: number;
 
+  @Column({ nullable: true, select: false })
+  public jellyfinId?: string;
+
+  @Column({ nullable: true, select: false })
+  public jellyfinAuthToken?: string;
+
   @Column({ nullable: true, select: false })
   public plexToken?: string;
 

server/index.ts

@@ -120,7 +120,8 @@ app
         }).connect(sessionRespository) as Store,
       })
     );
-    const apiDocs = YAML.load(API_SPEC_PATH);
+    //const apiDocs = YAML.load(API_SPEC_PATH);
+    /*
     server.use('/api-docs', swaggerUi.serve, swaggerUi.setup(apiDocs));
     server.use(
       OpenApiValidator.middleware({
@@ -133,6 +134,7 @@ app
      * OpenAPI validator. Otherwise, they are treated as objects instead of strings
      * and response validation will fail
      */
+    /*
     server.use((_req, res, next) => {
       const original = res.json;
       res.json = function jsonp(json) {
@@ -140,6 +142,7 @@ app
       };
       next();
     });
+    */
     server.use('/api/v1', routes);
     server.get('*', (req, res) => handle(req, res));
     server.use(

server/interfaces/api/settingsInterfaces.ts

@@ -6,6 +6,7 @@ export interface SettingsAboutResponse {
 }
 
 export interface PublicSettingsResponse {
+  jfHost?: string;
   initialized: boolean;
   applicationTitle: string;
   hideAvailable: boolean;
@@ -14,6 +15,7 @@ export interface PublicSettingsResponse {
   series4kEnabled: boolean;
   region: string;
   originalLanguage: string;
+  mediaServerType: string;
 }
 
 export interface CacheItem {

server/job/jellyfinsync/index.ts

@@ -0,0 +1,657 @@
+import { getRepository } from 'typeorm';
+import { User } from '../../entity/User';
+import JellyfinAPI, { JellyfinLibraryItem } from '../../api/jellyfin';
+import TheMovieDb from '../../api/themoviedb';
+import { TmdbTvDetails } from '../../api/themoviedb/interfaces';
+import Media from '../../entity/Media';
+import { MediaStatus, MediaType } from '../../constants/media';
+import logger from '../../logger';
+import { getSettings, Library } from '../../lib/settings';
+import Season from '../../entity/Season';
+import { uniqWith } from 'lodash';
+import { v4 as uuid } from 'uuid';
+import AsyncLock from '../../utils/asyncLock';
+
+const BUNDLE_SIZE = 20;
+const UPDATE_RATE = 4 * 1000;
+
+interface SyncStatus {
+  running: boolean;
+  progress: number;
+  total: number;
+  currentLibrary: Library;
+  libraries: Library[];
+}
+
+class JobJellyfinSync {
+  private sessionId: string;
+  private tmdb: TheMovieDb;
+  private jfClient: JellyfinAPI;
+  private items: JellyfinLibraryItem[] = [];
+  private progress = 0;
+  private libraries: Library[];
+  private currentLibrary: Library;
+  private running = false;
+  private isRecentOnly = false;
+  private enable4kMovie = false;
+  private enable4kShow = false;
+  private asyncLock = new AsyncLock();
+
+  constructor({ isRecentOnly }: { isRecentOnly?: boolean } = {}) {
+    this.tmdb = new TheMovieDb();
+    this.isRecentOnly = isRecentOnly ?? false;
+  }
+
+  private async getExisting(tmdbId: number, mediaType: MediaType) {
+    const mediaRepository = getRepository(Media);
+
+    const existing = await mediaRepository.findOne({
+      where: { tmdbId: tmdbId, mediaType },
+    });
+
+    return existing;
+  }
+
+  private async processMovie(jellyfinitem: JellyfinLibraryItem) {
+    const mediaRepository = getRepository(Media);
+
+    try {
+      const metadata = await this.jfClient.getItemData(jellyfinitem.Id);
+      const newMedia = new Media();
+
+      if (!metadata.Id) {
+        logger.debug('No Id metadata for this title. Skipping', {
+          label: 'Plex Sync',
+          ratingKey: jellyfinitem.Id,
+        });
+        return;
+      }
+
+      newMedia.tmdbId = Number(metadata.ProviderIds.Tmdb ?? null);
+      newMedia.imdbId = metadata.ProviderIds.Imdb;
+      if (newMedia.imdbId && !isNaN(newMedia.tmdbId)) {
+        const tmdbMovie = await this.tmdb.getMovieByImdbId({
+          imdbId: newMedia.imdbId,
+        });
+        newMedia.tmdbId = tmdbMovie.id;
+      }
+      if (!newMedia.tmdbId) {
+        throw new Error('Unable to find TMDb ID');
+      }
+
+      const has4k = metadata.MediaSources?.some((MediaSource) => {
+        return MediaSource.MediaStreams.some((MediaStream) => {
+          return (MediaStream.Width ?? 0) > 2000;
+        });
+      });
+
+      const hasOtherResolution = metadata.MediaSources?.some((MediaSource) => {
+        return MediaSource.MediaStreams.some((MediaStream) => {
+          return (MediaStream.Width ?? 0) <= 2000;
+        });
+      });
+
+      await this.asyncLock.dispatch(newMedia.tmdbId, async () => {
+        const existing = await this.getExisting(
+          newMedia.tmdbId,
+          MediaType.MOVIE
+        );
+
+        if (existing) {
+          let changedExisting = false;
+
+          if (
+            (hasOtherResolution || (!this.enable4kMovie && has4k)) &&
+            existing.status !== MediaStatus.AVAILABLE
+          ) {
+            existing.status = MediaStatus.AVAILABLE;
+            existing.mediaAddedAt = new Date(metadata.DateCreated ?? '');
+            changedExisting = true;
+          }
+
+          if (
+            has4k &&
+            this.enable4kMovie &&
+            existing.status4k !== MediaStatus.AVAILABLE
+          ) {
+            existing.status4k = MediaStatus.AVAILABLE;
+            changedExisting = true;
+          }
+
+          if (!existing.mediaAddedAt && !changedExisting) {
+            existing.mediaAddedAt = new Date(metadata.DateCreated ?? '');
+            changedExisting = true;
+          }
+
+          if (
+            (hasOtherResolution || (has4k && !this.enable4kMovie)) &&
+            existing.jellyfinMediaID !== metadata.Id
+          ) {
+            existing.jellyfinMediaID !== metadata.Id;
+            changedExisting = true;
+          }
+
+          if (
+            has4k &&
+            this.enable4kMovie &&
+            existing.jellyfinMediaID4k !== metadata.Id
+          ) {
+            existing.jellyfinMediaID4k = metadata.Id;
+            changedExisting = true;
+          }
+
+          if (changedExisting) {
+            await mediaRepository.save(existing);
+            this.log(
+              `Request for ${metadata.Name} exists. New media types set to AVAILABLE`,
+              'info'
+            );
+          } else {
+            this.log(
+              `Title already exists and no new media types found ${metadata.Name}`
+            );
+          }
+        } else {
+          newMedia.status =
+            hasOtherResolution || (!this.enable4kMovie && has4k)
+              ? MediaStatus.AVAILABLE
+              : MediaStatus.UNKNOWN;
+          newMedia.status4k =
+            has4k && this.enable4kMovie
+              ? MediaStatus.AVAILABLE
+              : MediaStatus.UNKNOWN;
+          newMedia.mediaType = MediaType.MOVIE;
+          newMedia.mediaAddedAt = new Date(metadata.DateCreated ?? '');
+          newMedia.jellyfinMediaID =
+            hasOtherResolution || (!this.enable4kMovie && has4k)
+              ? metadata.Id
+              : undefined;
+          newMedia.jellyfinMediaID4k =
+            has4k && this.enable4kMovie ? metadata.Id : undefined;
+          await mediaRepository.save(newMedia);
+          this.log(`Saved ${metadata.Name}`);
+        }
+      });
+    } catch (e) {
+      this.log(
+        `Failed to process Jellyfin item, id: ${jellyfinitem.Id}`,
+        'error',
+        {
+          errorMessage: e.message,
+          jellyfinitem,
+        }
+      );
+    }
+  }
+
+  private async processShow(jellyfinitem: JellyfinLibraryItem) {
+    const mediaRepository = getRepository(Media);
+
+    let tvShow: TmdbTvDetails | null = null;
+
+    try {
+      const Id =
+        jellyfinitem.SeriesId ?? jellyfinitem.SeasonId ?? jellyfinitem.Id;
+      const metadata = await this.jfClient.getItemData(Id);
+
+      if (metadata.ProviderIds.Tvdb) {
+        tvShow = await this.tmdb.getShowByTvdbId({
+          tvdbId: Number(metadata.ProviderIds.Tvdb),
+        });
+      } else if (metadata.ProviderIds.Tmdb) {
+        tvShow = await this.tmdb.getTvShow({
+          tvId: Number(metadata.ProviderIds.Tmdb),
+        });
+      }
+
+      if (tvShow) {
+        await this.asyncLock.dispatch(tvShow.id, async () => {
+          if (!tvShow) {
+            // this will never execute, but typescript thinks somebody could reset tvShow from
+            // outer scope back to null before this async gets called
+            return;
+          }
+
+          // Lets get the available seasons from Plex
+          const seasons = tvShow.seasons;
+          const media = await this.getExisting(tvShow.id, MediaType.TV);
+
+          const newSeasons: Season[] = [];
+
+          const currentStandardSeasonAvailable = (
+            media?.seasons.filter(
+              (season) => season.status === MediaStatus.AVAILABLE
+            ) ?? []
+          ).length;
+          const current4kSeasonAvailable = (
+            media?.seasons.filter(
+              (season) => season.status4k === MediaStatus.AVAILABLE
+            ) ?? []
+          ).length;
+
+          //girl bye idk what's happening here! LMFAO
+          for (const season of seasons) {
+            const JellyfinSeasons = await this.jfClient.getSeasons(Id);
+            const matchedJellyfinSeason = JellyfinSeasons.find(
+              (md) => Number(md.IndexNumber) === season.season_number
+            );
+
+            const existingSeason = media?.seasons.find(
+              (es) => es.seasonNumber === season.season_number
+            );
+
+            // Check if we found the matching season and it has all the available episodes
+            if (matchedJellyfinSeason) {
+              // If we have a matched Plex season, get its children metadata so we can check details
+              const episodes = await this.jfClient.getEpisodes(
+                Id,
+                matchedJellyfinSeason.Id
+              );
+
+              //Get count of episodes that are HD and 4K
+              let totalStandard = 0;
+              let total4k = 0;
+
+              //use for loop to make sure this loop _completes_ in full
+              //before the next section
+              for (const episode of episodes) {
+                if (!this.enable4kShow) {
+                  totalStandard++;
+                } else {
+                  const ExtendedEpisodeData = await this.jfClient.getItemData(
+                    episode.Id
+                  );
+
+                  ExtendedEpisodeData.MediaSources?.some((MediaSource) => {
+                    return MediaSource.MediaStreams.some((MediaStream) => {
+                      if (MediaStream.Type == 'Video') {
+                        if (MediaStream.Width ?? 0 < 2000) {
+                          totalStandard++;
+                        }
+                      } else {
+                        total4k++;
+                      }
+                    });
+                  });
+                }
+              }
+
+              if (
+                media &&
+                (totalStandard > 0 || (total4k > 0 && !this.enable4kShow)) &&
+                media.jellyfinMediaID !== Id
+              ) {
+                media.jellyfinMediaID = Id;
+              }
+
+              if (
+                media &&
+                total4k > 0 &&
+                this.enable4kShow &&
+                media.jellyfinMediaID4k !== Id
+              ) {
+                media.jellyfinMediaID4k = Id;
+              }
+
+              if (existingSeason) {
+                // These ternary statements look super confusing, but they are simply
+                // setting the status to AVAILABLE if all of a type is there, partially if some,
+                // and then not modifying the status if there are 0 items
+                existingSeason.status =
+                  totalStandard === season.episode_count
+                    ? MediaStatus.AVAILABLE
+                    : totalStandard > 0
+                    ? MediaStatus.PARTIALLY_AVAILABLE
+                    : existingSeason.status;
+                existingSeason.status4k =
+                  this.enable4kShow && total4k === season.episode_count
+                    ? MediaStatus.AVAILABLE
+                    : this.enable4kShow && total4k > 0
+                    ? MediaStatus.PARTIALLY_AVAILABLE
+                    : existingSeason.status4k;
+              } else {
+                newSeasons.push(
+                  new Season({
+                    seasonNumber: season.season_number,
+                    // This ternary is the same as the ones above, but it just falls back to "UNKNOWN"
+                    // if we dont have any items for the season
+                    status:
+                      totalStandard === season.episode_count
+                        ? MediaStatus.AVAILABLE
+                        : totalStandard > 0
+                        ? MediaStatus.PARTIALLY_AVAILABLE
+                        : MediaStatus.UNKNOWN,
+                    status4k:
+                      this.enable4kShow && total4k === season.episode_count
+                        ? MediaStatus.AVAILABLE
+                        : this.enable4kShow && total4k > 0
+                        ? MediaStatus.PARTIALLY_AVAILABLE
+                        : MediaStatus.UNKNOWN,
+                  })
+                );
+              }
+            }
+          }
+
+          // Remove extras season. We dont count it for determining availability
+          const filteredSeasons = tvShow.seasons.filter(
+            (season) => season.season_number !== 0
+          );
+
+          const isAllStandardSeasons =
+            newSeasons.filter(
+              (season) => season.status === MediaStatus.AVAILABLE
+            ).length +
+              (media?.seasons.filter(
+                (season) => season.status === MediaStatus.AVAILABLE
+              ).length ?? 0) >=
+            filteredSeasons.length;
+
+          const isAll4kSeasons =
+            newSeasons.filter(
+              (season) => season.status4k === MediaStatus.AVAILABLE
+            ).length +
+              (media?.seasons.filter(
+                (season) => season.status4k === MediaStatus.AVAILABLE
+              ).length ?? 0) >=
+            filteredSeasons.length;
+
+          if (media) {
+            // Update existing
+            media.seasons = [...media.seasons, ...newSeasons];
+
+            const newStandardSeasonAvailable = (
+              media.seasons.filter(
+                (season) => season.status === MediaStatus.AVAILABLE
+              ) ?? []
+            ).length;
+
+            const new4kSeasonAvailable = (
+              media.seasons.filter(
+                (season) => season.status4k === MediaStatus.AVAILABLE
+              ) ?? []
+            ).length;
+
+            // If at least one new season has become available, update
+            // the lastSeasonChange field so we can trigger notifications
+            if (newStandardSeasonAvailable > currentStandardSeasonAvailable) {
+              this.log(
+                `Detected ${
+                  newStandardSeasonAvailable - currentStandardSeasonAvailable
+                } new standard season(s) for ${tvShow.name}`,
+                'debug'
+              );
+              media.lastSeasonChange = new Date();
+              media.mediaAddedAt = new Date(metadata.DateCreated ?? '');
+            }
+
+            if (new4kSeasonAvailable > current4kSeasonAvailable) {
+              this.log(
+                `Detected ${
+                  new4kSeasonAvailable - current4kSeasonAvailable
+                } new 4K season(s) for ${tvShow.name}`,
+                'debug'
+              );
+              media.lastSeasonChange = new Date();
+            }
+
+            if (!media.mediaAddedAt) {
+              media.mediaAddedAt = new Date(metadata.DateCreated ?? '');
+            }
+
+            // If the show is already available, and there are no new seasons, dont adjust
+            // the status
+            const shouldStayAvailable =
+              media.status === MediaStatus.AVAILABLE &&
+              newSeasons.filter(
+                (season) => season.status !== MediaStatus.UNKNOWN
+              ).length === 0;
+            const shouldStayAvailable4k =
+              media.status4k === MediaStatus.AVAILABLE &&
+              newSeasons.filter(
+                (season) => season.status4k !== MediaStatus.UNKNOWN
+              ).length === 0;
+
+            media.status =
+              isAllStandardSeasons || shouldStayAvailable
+                ? MediaStatus.AVAILABLE
+                : media.seasons.some(
+                    (season) => season.status !== MediaStatus.UNKNOWN
+                  )
+                ? MediaStatus.PARTIALLY_AVAILABLE
+                : MediaStatus.UNKNOWN;
+            media.status4k =
+              (isAll4kSeasons || shouldStayAvailable4k) && this.enable4kShow
+                ? MediaStatus.AVAILABLE
+                : this.enable4kShow &&
+                  media.seasons.some(
+                    (season) => season.status4k !== MediaStatus.UNKNOWN
+                  )
+                ? MediaStatus.PARTIALLY_AVAILABLE
+                : MediaStatus.UNKNOWN;
+            await mediaRepository.save(media);
+            this.log(`Updating existing title: ${tvShow.name}`);
+          } else {
+            const newMedia = new Media({
+              mediaType: MediaType.TV,
+              seasons: newSeasons,
+              tmdbId: tvShow.id,
+              tvdbId: tvShow.external_ids.tvdb_id,
+              mediaAddedAt: new Date(metadata.DateCreated ?? ''),
+              jellyfinMediaID: Id,
+              jellyfinMediaID4k: Id,
+              status: isAllStandardSeasons
+                ? MediaStatus.AVAILABLE
+                : newSeasons.some(
+                    (season) => season.status !== MediaStatus.UNKNOWN
+                  )
+                ? MediaStatus.PARTIALLY_AVAILABLE
+                : MediaStatus.UNKNOWN,
+              status4k:
+                isAll4kSeasons && this.enable4kShow
+                  ? MediaStatus.AVAILABLE
+                  : this.enable4kShow &&
+                    newSeasons.some(
+                      (season) => season.status4k !== MediaStatus.UNKNOWN
+                    )
+                  ? MediaStatus.PARTIALLY_AVAILABLE
+                  : MediaStatus.UNKNOWN,
+            });
+            await mediaRepository.save(newMedia);
+            this.log(`Saved ${tvShow.name}`);
+          }
+        });
+      } else {
+        this.log(`failed show: ${metadata.Name}`);
+      }
+    } catch (e) {
+      this.log(
+        `Failed to process Jellyfin item. Id: ${
+          jellyfinitem.SeriesId ?? jellyfinitem.SeasonId ?? jellyfinitem.Id
+        }`,
+        'error',
+        {
+          errorMessage: e.message,
+          jellyfinitem,
+        }
+      );
+    }
+  }
+
+  private async processItems(slicedItems: JellyfinLibraryItem[]) {
+    await Promise.all(
+      slicedItems.map(async (item) => {
+        if (item.Type === 'Movie') {
+          await this.processMovie(item);
+        } else if (item.Type === 'Series') {
+          await this.processShow(item);
+        }
+      })
+    );
+  }
+
+  private async loop({
+    start = 0,
+    end = BUNDLE_SIZE,
+    sessionId,
+  }: {
+    start?: number;
+    end?: number;
+    sessionId?: string;
+  } = {}) {
+    const slicedItems = this.items.slice(start, end);
+
+    if (!this.running) {
+      throw new Error('Sync was aborted.');
+    }
+
+    if (this.sessionId !== sessionId) {
+      throw new Error('New session was started. Old session aborted.');
+    }
+
+    if (start < this.items.length) {
+      this.progress = start;
+      await this.processItems(slicedItems);
+
+      await new Promise<void>((resolve, reject) =>
+        setTimeout(() => {
+          this.loop({
+            start: start + BUNDLE_SIZE,
+            end: end + BUNDLE_SIZE,
+            sessionId,
+          })
+            .then(() => resolve())
+            .catch((e) => reject(new Error(e.message)));
+        }, UPDATE_RATE)
+      );
+    }
+  }
+
+  private log(
+    message: string,
+    level: 'info' | 'error' | 'debug' | 'warn' = 'debug',
+    optional?: Record<string, unknown>
+  ): void {
+    logger[level](message, { label: 'Jellyfin Sync', ...optional });
+  }
+
+  public async run(): Promise<void> {
+    const settings = getSettings();
+
+    if (settings.main.mediaServerType != 'JELLYFIN') {
+      return;
+    }
+
+    const sessionId = uuid();
+    this.sessionId = sessionId;
+    logger.info('Jellyfin Sync Starting', {
+      sessionId,
+      label: 'Jellyfin Sync',
+    });
+    try {
+      this.running = true;
+      const userRepository = getRepository(User);
+      const admin = await userRepository.findOne({
+        select: ['id', 'jellyfinAuthToken'],
+        order: { id: 'ASC' },
+      });
+
+      if (!admin) {
+        return this.log('No admin configured. Jellyfin sync skipped.', 'warn');
+      }
+
+      this.jfClient = new JellyfinAPI(
+        settings.jellyfin.hostname ?? '',
+        admin.jellyfinAuthToken ?? ''
+      );
+
+      this.libraries = settings.jellyfin.libraries.filter(
+        (library) => library.enabled
+      );
+
+      this.enable4kMovie = settings.radarr.some((radarr) => radarr.is4k);
+      if (this.enable4kMovie) {
+        this.log(
+          'At least one 4K Radarr server was detected. 4K movie detection is now enabled',
+          'info'
+        );
+      }
+
+      this.enable4kShow = settings.sonarr.some((sonarr) => sonarr.is4k);
+      if (this.enable4kShow) {
+        this.log(
+          'At least one 4K Sonarr server was detected. 4K series detection is now enabled',
+          'info'
+        );
+      }
+
+      if (this.isRecentOnly) {
+        for (const library of this.libraries) {
+          this.currentLibrary = library;
+          this.log(
+            `Beginning to process recently added for library: ${library.name}`,
+            'info'
+          );
+          const libraryItems = await this.jfClient.getRecentlyAdded(library.id);
+
+          // Bundle items up by rating keys
+          this.items = uniqWith(libraryItems, (mediaA, mediaB) => {
+            if (mediaA.SeriesId && mediaB.SeriesId) {
+              return mediaA.SeriesId === mediaB.SeriesId;
+            }
+
+            if (mediaA.SeasonId && mediaB.SeasonId) {
+              return mediaA.SeasonId === mediaB.SeasonId;
+            }
+
+            return mediaA.Id === mediaB.Id;
+          });
+
+          await this.loop({ sessionId });
+        }
+      } else {
+        for (const library of this.libraries) {
+          this.currentLibrary = library;
+          this.log(`Beginning to process library: ${library.name}`, 'info');
+          this.items = await this.jfClient.getLibraryContents(library.id);
+          await this.loop({ sessionId });
+        }
+      }
+      this.log(
+        this.isRecentOnly
+          ? 'Recently Added Scan Complete'
+          : 'Full Scan Complete',
+        'info'
+      );
+    } catch (e) {
+      logger.error('Sync interrupted', {
+        label: 'Jellyfin Sync',
+        errorMessage: e.message,
+      });
+    } finally {
+      // If a new scanning session hasnt started, set running back to false
+      if (this.sessionId === sessionId) {
+        this.running = false;
+      }
+    }
+  }
+
+  public status(): SyncStatus {
+    return {
+      running: this.running,
+      progress: this.progress,
+      total: this.items.length,
+      currentLibrary: this.currentLibrary,
+      libraries: this.libraries,
+    };
+  }
+
+  public cancel(): void {
+    this.running = false;
+  }
+}
+
+export const jobJellyfinFullSync = new JobJellyfinSync();
+export const jobJellyfinRecentSync = new JobJellyfinSync({
+  isRecentOnly: true,
+});

server/job/plexsync/index.ts

@@ -802,6 +802,11 @@ class JobPlexSync {
 
   public async run(): Promise<void> {
     const settings = getSettings();
+
+    if (settings.main.mediaServerType != 'PLEX') {
+      return;
+    }
+
     const sessionId = uuid();
     this.sessionId = sessionId;
     logger.info('Plex Sync Starting', { sessionId, label: 'Plex Sync' });

server/job/schedule.ts

@@ -1,5 +1,6 @@
 import schedule from 'node-schedule';
 import { jobPlexFullSync, jobPlexRecentSync } from './plexsync';
+import { jobJellyfinFullSync, jobJellyfinRecentSync } from './jellyfinsync';
 import logger from '../logger';
 import { jobRadarrSync } from './radarrsync';
 import { jobSonarrSync } from './sonarrsync';
@@ -45,6 +46,36 @@ export const startJobs = (): void => {
     cancelFn: () => jobPlexFullSync.cancel(),
   });
 
+  // Run recently added jellyfin sync every 5 minutes
+  scheduledJobs.push({
+    id: 'jellyfin-recently-added-sync',
+    name: 'Jellyfin Recently Added Sync',
+    type: 'process',
+    job: schedule.scheduleJob('0 */5 * * * *', () => {
+      logger.info('Starting scheduled job: Jellyfin Recently Added Sync', {
+        label: 'Jobs',
+      });
+      jobJellyfinRecentSync.run();
+    }),
+    running: () => jobJellyfinRecentSync.status().running,
+    cancelFn: () => jobJellyfinRecentSync.cancel(),
+  });
+
+  // Run full jellyfin sync every 24 hours
+  scheduledJobs.push({
+    id: 'jellyfin-full-sync',
+    name: 'Jellyfin Full Library Sync',
+    type: 'process',
+    job: schedule.scheduleJob('0 0 3 * * *', () => {
+      logger.info('Starting scheduled job: Jellyfin Full Sync', {
+        label: 'Jobs',
+      });
+      jobJellyfinFullSync.run();
+    }),
+    running: () => jobJellyfinFullSync.status().running,
+    cancelFn: () => jobJellyfinFullSync.cancel(),
+  });
+
   // Run full radarr sync every 24 hours
   scheduledJobs.push({
     id: 'radarr-sync',

server/lib/settings.ts

@@ -30,6 +30,15 @@ export interface PlexSettings {
   libraries: Library[];
 }
 
+export interface JellyfinSettings {
+  name: string;
+  hostname?: string;
+  libraries: Library[];
+  adminUser: string;
+  adminPass: string;
+  serverID: string;
+}
+
 interface DVRSettings {
   id: number;
   name: string;
@@ -72,6 +81,7 @@ export interface MainSettings {
   region: string;
   originalLanguage: string;
   trustProxy: boolean;
+  mediaServerType: string;
 }
 
 interface PublicSettings {
@@ -86,6 +96,8 @@ interface FullPublicSettings extends PublicSettings {
   series4kEnabled: boolean;
   region: string;
   originalLanguage: string;
+  mediaServerType: string;
+  jfHost?: string;
 }
 
 export interface NotificationAgentConfig {
@@ -168,6 +180,7 @@ interface AllSettings {
   clientId: string;
   main: MainSettings;
   plex: PlexSettings;
+  jellyfin: JellyfinSettings;
   radarr: RadarrSettings[];
   sonarr: SonarrSettings[];
   public: PublicSettings;
@@ -195,6 +208,7 @@ class Settings {
         region: '',
         originalLanguage: '',
         trustProxy: false,
+        mediaServerType: '',
       },
       plex: {
         name: '',
@@ -203,6 +217,14 @@ class Settings {
         useSsl: false,
         libraries: [],
       },
+      jellyfin: {
+        name: '',
+        hostname: '',
+        libraries: [],
+        adminUser: '',
+        adminPass: '',
+        serverID: '',
+      },
       radarr: [],
       sonarr: [],
       public: {
@@ -301,6 +323,14 @@ class Settings {
     this.data.plex = data;
   }
 
+  get jellyfin(): JellyfinSettings {
+    return this.data.jellyfin;
+  }
+
+  set jellyfin(data: JellyfinSettings) {
+    this.data.jellyfin = data;
+  }
+
   get radarr(): RadarrSettings[] {
     return this.data.radarr;
   }
@@ -337,8 +367,13 @@ class Settings {
       series4kEnabled: this.data.sonarr.some(
         (sonarr) => sonarr.is4k && sonarr.isDefault
       ),
+<<<<<<< HEAD
       region: this.data.main.region,
       originalLanguage: this.data.main.originalLanguage,
+=======
+      mediaServerType: this.main.mediaServerType,
+      jfHost: this.jellyfin.hostname ?? '',
+>>>>>>> feat(all): add initial Jellyfin/Emby support
     };
   }
 

server/migration/1613379909641-AddJellyfinUserParams.ts

@@ -0,0 +1,67 @@
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class AddJellyfinUserParams1613379909641 implements MigrationInterface {
+  name = 'AddJellyfinUserParams1613379909641';
+
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(
+      `CREATE TABLE "temporary_user" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "email" varchar NOT NULL, "username" varchar, "plexId" integer, "plexToken" varchar, "permissions" integer NOT NULL DEFAULT (0), "avatar" varchar NOT NULL, "createdAt" datetime NOT NULL DEFAULT (datetime('now')), "updatedAt" datetime NOT NULL DEFAULT (datetime('now')), "password" varchar, "userType" integer NOT NULL DEFAULT (1), "plexUsername" varchar, "resetPasswordGuid" varchar, "recoveryLinkExpirationDate" date, "jellyfinUsername" varchar, "jellyfinId" varchar, "jellyfinAuthToken" varchar, CONSTRAINT "UQ_e12875dfb3b1d92d7d7c5377e22" UNIQUE ("email"))`
+    );
+    await queryRunner.query(
+      `INSERT INTO "temporary_user"("id", "email", "username", "plexId", "plexToken", "permissions", "avatar", "createdAt", "updatedAt", "password", "userType", "plexUsername", "resetPasswordGuid", "recoveryLinkExpirationDate") SELECT "id", "email", "username", "plexId", "plexToken", "permissions", "avatar", "createdAt", "updatedAt", "password", "userType", "plexUsername", "resetPasswordGuid", "recoveryLinkExpirationDate" FROM "user"`
+    );
+    await queryRunner.query(`DROP TABLE "user"`);
+    await queryRunner.query(`ALTER TABLE "temporary_user" RENAME TO "user"`);
+    await queryRunner.query(`DROP INDEX "IDX_7157aad07c73f6a6ae3bbd5ef5"`);
+    await queryRunner.query(`DROP INDEX "IDX_41a289eb1fa489c1bc6f38d9c3"`);
+    await queryRunner.query(`DROP INDEX "IDX_7ff2d11f6a83cb52386eaebe74"`);
+    await queryRunner.query(
+      `CREATE TABLE "temporary_media" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "mediaType" varchar NOT NULL, "tmdbId" integer NOT NULL, "tvdbId" integer, "imdbId" varchar, "status" integer NOT NULL DEFAULT (1), "createdAt" datetime NOT NULL DEFAULT (datetime('now')), "updatedAt" datetime NOT NULL DEFAULT (datetime('now')), "lastSeasonChange" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP), "status4k" integer NOT NULL DEFAULT (1), "mediaAddedAt" datetime, "serviceId" integer, "serviceId4k" integer, "externalServiceId" integer, "externalServiceId4k" integer, "externalServiceSlug" varchar, "externalServiceSlug4k" varchar, "ratingKey" varchar, "ratingKey4k" varchar, "jellyfinMediaID" varchar, "jellyfinMediaID4k" varchar, CONSTRAINT "UQ_41a289eb1fa489c1bc6f38d9c3c" UNIQUE ("tvdbId"))`
+    );
+    await queryRunner.query(
+      `INSERT INTO "temporary_media"("id", "mediaType", "tmdbId", "tvdbId", "imdbId", "status", "createdAt", "updatedAt", "lastSeasonChange", "status4k", "mediaAddedAt", "serviceId", "serviceId4k", "externalServiceId", "externalServiceId4k", "externalServiceSlug", "externalServiceSlug4k", "ratingKey", "ratingKey4k") SELECT "id", "mediaType", "tmdbId", "tvdbId", "imdbId", "status", "createdAt", "updatedAt", "lastSeasonChange", "status4k", "mediaAddedAt", "serviceId", "serviceId4k", "externalServiceId", "externalServiceId4k", "externalServiceSlug", "externalServiceSlug4k", "ratingKey", "ratingKey4k" FROM "media"`
+    );
+    await queryRunner.query(`DROP TABLE "media"`);
+    await queryRunner.query(`ALTER TABLE "temporary_media" RENAME TO "media"`);
+    await queryRunner.query(
+      `CREATE INDEX "IDX_7157aad07c73f6a6ae3bbd5ef5" ON "media" ("tmdbId") `
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_41a289eb1fa489c1bc6f38d9c3" ON "media" ("tvdbId") `
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_7ff2d11f6a83cb52386eaebe74" ON "media" ("imdbId") `
+    );
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {
+    await queryRunner.query(`DROP INDEX "IDX_7ff2d11f6a83cb52386eaebe74"`);
+    await queryRunner.query(`DROP INDEX "IDX_41a289eb1fa489c1bc6f38d9c3"`);
+    await queryRunner.query(`DROP INDEX "IDX_7157aad07c73f6a6ae3bbd5ef5"`);
+    await queryRunner.query(`ALTER TABLE "media" RENAME TO "temporary_media"`);
+    await queryRunner.query(
+      `CREATE TABLE "media" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "mediaType" varchar NOT NULL, "tmdbId" integer NOT NULL, "tvdbId" integer, "imdbId" varchar, "status" integer NOT NULL DEFAULT (1), "createdAt" datetime NOT NULL DEFAULT (datetime('now')), "updatedAt" datetime NOT NULL DEFAULT (datetime('now')), "lastSeasonChange" datetime NOT NULL DEFAULT (CURRENT_TIMESTAMP), "status4k" integer NOT NULL DEFAULT (1), "mediaAddedAt" datetime, "serviceId" integer, "serviceId4k" integer, "externalServiceId" integer, "externalServiceId4k" integer, "externalServiceSlug" varchar, "externalServiceSlug4k" varchar, "ratingKey" varchar, "ratingKey4k" varchar, CONSTRAINT "UQ_41a289eb1fa489c1bc6f38d9c3c" UNIQUE ("tvdbId"))`
+    );
+    await queryRunner.query(
+      `INSERT INTO "media"("id", "mediaType", "tmdbId", "tvdbId", "imdbId", "status", "createdAt", "updatedAt", "lastSeasonChange", "status4k", "mediaAddedAt", "serviceId", "serviceId4k", "externalServiceId", "externalServiceId4k", "externalServiceSlug", "externalServiceSlug4k", "ratingKey", "ratingKey4k") SELECT "id", "mediaType", "tmdbId", "tvdbId", "imdbId", "status", "createdAt", "updatedAt", "lastSeasonChange", "status4k", "mediaAddedAt", "serviceId", "serviceId4k", "externalServiceId", "externalServiceId4k", "externalServiceSlug", "externalServiceSlug4k", "ratingKey", "ratingKey4k" FROM "temporary_media"`
+    );
+    await queryRunner.query(`DROP TABLE "temporary_media"`);
+    await queryRunner.query(
+      `CREATE INDEX "IDX_7ff2d11f6a83cb52386eaebe74" ON "media" ("imdbId") `
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_41a289eb1fa489c1bc6f38d9c3" ON "media" ("tvdbId") `
+    );
+    await queryRunner.query(
+      `CREATE INDEX "IDX_7157aad07c73f6a6ae3bbd5ef5" ON "media" ("tmdbId") `
+    );
+    await queryRunner.query(`ALTER TABLE "user" RENAME TO "temporary_user"`);
+    await queryRunner.query(
+      `CREATE TABLE "user" ("id" integer PRIMARY KEY AUTOINCREMENT NOT NULL, "email" varchar NOT NULL, "username" varchar, "plexId" integer, "plexToken" varchar, "permissions" integer NOT NULL DEFAULT (0), "avatar" varchar NOT NULL, "createdAt" datetime NOT NULL DEFAULT (datetime('now')), "updatedAt" datetime NOT NULL DEFAULT (datetime('now')), "password" varchar, "userType" integer NOT NULL DEFAULT (1), "plexUsername" varchar, "resetPasswordGuid" varchar, "recoveryLinkExpirationDate" date, CONSTRAINT "UQ_e12875dfb3b1d92d7d7c5377e22" UNIQUE ("email"))`
+    );
+    await queryRunner.query(
+      `INSERT INTO "user"("id", "email", "username", "plexId", "plexToken", "permissions", "avatar", "createdAt", "updatedAt", "password", "userType", "plexUsername", "resetPasswordGuid", "recoveryLinkExpirationDate") SELECT "id", "email", "username", "plexId", "plexToken", "permissions", "avatar", "createdAt", "updatedAt", "password", "userType", "plexUsername", "resetPasswordGuid", "recoveryLinkExpirationDate" FROM "temporary_user"`
+    );
+    await queryRunner.query(`DROP TABLE "temporary_user"`);
+  }
+}

server/routes/auth.ts

@@ -2,6 +2,7 @@ import { Router } from 'express';
 import { getRepository } from 'typeorm';
 import { User } from '../entity/User';
 import PlexTvAPI from '../api/plextv';
+import JellyfinAPI from '../api/jellyfin';
 import { isAuthenticated } from '../middleware/auth';
 import { Permission } from '../lib/permissions';
 import logger from '../logger';
@@ -29,7 +30,11 @@ authRoutes.get('/me', isAuthenticated(), async (req, res) => {
 authRoutes.post('/plex', async (req, res, next) => {
   const settings = getSettings();
   const userRepository = getRepository(User);
-  const body = req.body as { authToken?: string };
+  const body = req.body as {
+    authToken?: string;
+    mediaServerType?: string;
+    jellyfinHostname?: string;
+  };
 
   if (!body.authToken) {
     return res.status(500).json({ error: 'You must provide an auth token' });
@@ -133,6 +138,126 @@ authRoutes.post('/plex', async (req, res, next) => {
   }
 });
 
+authRoutes.post('/jellyfin', async (req, res, next) => {
+  const settings = getSettings();
+  const userRepository = getRepository(User);
+  const body = req.body as {
+    username?: string;
+    password?: string;
+    hostname?: string;
+  };
+
+  //Make sure jellyfin login is enabled, but only if jellyfin is not already configured
+  if (
+    settings.main.mediaServerType != 'JELLYFIN' &&
+    settings.jellyfin.hostname != ''
+  ) {
+    return res.status(500).json({ error: 'Jellyfin login is disabled' });
+  } else if (!body.username || !body.password) {
+    return res
+      .status(500)
+      .json({ error: 'You must provide an username and a password' });
+  } else if (settings.jellyfin.hostname != '' && body.hostname) {
+    return res
+      .status(500)
+      .json({ error: 'Jellyfin hostname already configured' });
+  } else if (settings.jellyfin.hostname == '' && !body.hostname) {
+    return res.status(500).json({ error: 'No hostname provided.' });
+  }
+
+  try {
+    const hostname =
+      settings.jellyfin.hostname != ''
+        ? settings.jellyfin.hostname
+        : body.hostname;
+    // First we need to use this auth token to get the users email from plex tv
+    const plextv = new JellyfinAPI(hostname ?? '');
+
+    const account = await plextv.login(body.username, body.password);
+
+    // Next let's see if the user already exists
+    let user = await userRepository.findOne({
+      where: { jellyfinId: account.User.Id },
+    });
+
+    if (user) {
+      // Let's check if their plex token is up to date
+      if (user.jellyfinAuthToken !== account.AccessToken) {
+        user.jellyfinAuthToken = account.AccessToken;
+      }
+
+      // Update the users avatar with their plex thumbnail (incase it changed)
+      user.avatar = `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`;
+      user.email = account.User.Name;
+      user.jellyfinUsername = account.User.Name;
+
+      if (user.username === account.User.Name) {
+        user.username = '';
+      }
+      await userRepository.save(user);
+    } else {
+      // Here we check if it's the first user. If it is, we create the user with no check
+      // and give them admin permissions
+      const totalUsers = await userRepository.count();
+
+      if (totalUsers === 0) {
+        user = new User({
+          email: account.User.Name,
+          jellyfinUsername: account.User.Name,
+          jellyfinId: account.User.Id,
+          jellyfinAuthToken: account.AccessToken,
+          permissions: Permission.ADMIN,
+          avatar: `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`,
+          userType: UserType.JELLYFIN,
+        });
+        await userRepository.save(user);
+
+        //Update hostname in settings if it doesn't exist (initial configuration)
+        //Also set mediaservertype to JELLYFIN
+        if (settings.jellyfin.hostname == '') {
+          settings.main.mediaServerType = 'JELLYFIN';
+          settings.jellyfin.hostname = body.hostname ?? '';
+          settings.save();
+        }
+      }
+
+      // Double check that we didn't create the first admin user before running this
+      if (!user) {
+        user = new User({
+          email: account.User.Name,
+          jellyfinUsername: account.User.Name,
+          jellyfinId: account.User.Id,
+          jellyfinAuthToken: account.AccessToken,
+          permissions: settings.main.defaultPermissions,
+          avatar: `${hostname}/Users/${account.User.Id}/Images/Primary/?tag=${account.User.PrimaryImageTag}&quality=90`,
+          userType: UserType.JELLYFIN,
+        });
+        await userRepository.save(user);
+      }
+    }
+
+    // Set logged in session
+    if (req.session) {
+      req.session.userId = user.id;
+    }
+
+    return res.status(200).json(user?.filter() ?? {});
+  } catch (e) {
+    if (e.message != 'Unauthorized') {
+      logger.error(e.message, { label: 'Auth' });
+      return next({
+        status: 500,
+        message: 'Something went wrong. Is your auth token valid?',
+      });
+    } else {
+      return next({
+        status: 401,
+        message: 'CREDENTIAL_ERROR',
+      });
+    }
+  }
+});
+
 authRoutes.post('/local', async (req, res, next) => {
   const settings = getSettings();
   const userRepository = getRepository(User);

server/routes/settings/index.ts

@@ -4,7 +4,9 @@ import { getRepository } from 'typeorm';
 import { User } from '../../entity/User';
 import PlexAPI from '../../api/plexapi';
 import PlexTvAPI from '../../api/plextv';
+import JellyfinAPI from '../../api/jellyfin';
 import { jobPlexFullSync } from '../../job/plexsync';
+import { jobJellyfinFullSync } from '../../job/jellyfinsync';
 import { scheduledJobs } from '../../job/schedule';
 import { Permission } from '../../lib/permissions';
 import { isAuthenticated } from '../../middleware/auth';
@@ -223,6 +225,80 @@ settingsRoutes.post('/plex/sync', (req, res) => {
   return res.status(200).json(jobPlexFullSync.status());
 });
 
+settingsRoutes.get('/jellyfin', (_req, res) => {
+  const settings = getSettings();
+  res.status(200).json(settings.jellyfin);
+});
+
+settingsRoutes.post('/jellyfin', (req, res) => {
+  const settings = getSettings();
+
+  settings.jellyfin = merge(settings.jellyfin, req.body);
+  settings.save();
+
+  return res.status(200).json(settings.jellyfin);
+});
+
+settingsRoutes.get('/jellyfin/library', async (req, res) => {
+  const settings = getSettings();
+
+  if (req.query.sync) {
+    const userRepository = getRepository(User);
+    const admin = await userRepository.findOneOrFail({
+      select: ['id', 'jellyfinAuthToken'],
+      order: { id: 'ASC' },
+    });
+    const jellyfinClient = new JellyfinAPI(
+      settings.jellyfin.hostname ?? '',
+      admin.jellyfinAuthToken ?? ''
+    );
+
+    const libraries = await jellyfinClient.getLibraries();
+
+    const newLibraries: Library[] = libraries
+      // Remove libraries that are not movie or show
+      .filter((library) => library.type === 'movie' || library.type === 'show')
+      // Remove libraries that do not have a metadata agent set (usually personal video libraries)
+      .filter((library) => library.agent !== 'com.plexapp.agents.none')
+      .map((library) => {
+        const existing = settings.plex.libraries.find(
+          (l) => l.id === library.key && l.name === library.title
+        );
+
+        return {
+          id: library.key,
+          name: library.title,
+          enabled: existing?.enabled ?? false,
+        };
+      });
+
+    settings.jellyfin.libraries = newLibraries;
+  }
+
+  const enabledLibraries = req.query.enable
+    ? (req.query.enable as string).split(',')
+    : [];
+  settings.jellyfin.libraries = settings.jellyfin.libraries.map((library) => ({
+    ...library,
+    enabled: enabledLibraries.includes(library.id),
+  }));
+  settings.save();
+  return res.status(200).json(settings.jellyfin.libraries);
+});
+
+settingsRoutes.get('/jellyfin/sync', (_req, res) => {
+  return res.status(200).json(jobJellyfinFullSync.status());
+});
+
+settingsRoutes.post('/jellyfin/sync', (req, res) => {
+  if (req.body.cancel) {
+    jobJellyfinFullSync.cancel();
+  } else if (req.body.start) {
+    jobJellyfinFullSync.run();
+  }
+  return res.status(200).json(jobJellyfinFullSync.status());
+});
+
 settingsRoutes.get('/jobs', (_req, res) => {
   return res.status(200).json(
     scheduledJobs.map((job) => ({

src/components/Login/JellyfinLogin.tsx

@@ -0,0 +1,269 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import Button from '../Common/Button';
+
+import { Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+import axios from 'axios';
+import { useToasts } from 'react-toast-notifications';
+import useSettings from '../../hooks/useSettings';
+
+const messages = defineMessages({
+  username: 'Username',
+  password: 'Password',
+  host: 'Jellyfin URL',
+  validationhostrequired: 'Jellyfin URL required',
+  validationhostformat: 'Valid URL required',
+  validationusernamerequired: 'Username required',
+  validationpasswordrequired: 'Password required',
+  loginerror: 'Something went wrong while trying to sign in.',
+  credentialerror: 'The username or password is incorrect.',
+  signingin: 'Signing in…',
+  signin: 'Sign In',
+  initialsigningin: 'Connecting…',
+  initialsignin: 'Connect',
+  forgotpassword: 'Forgot Password?',
+});
+
+interface JellyfinLoginProps {
+  revalidate: () => void;
+  initial?: boolean;
+}
+
+const JellyfinLogin: React.FC<JellyfinLoginProps> = ({
+  revalidate,
+  initial,
+}) => {
+  const toasts = useToasts();
+  const intl = useIntl();
+  const settings = useSettings();
+
+  if (initial) {
+    const LoginSchema = Yup.object().shape({
+      host: Yup.string()
+        .url(intl.formatMessage(messages.validationhostformat))
+        .required(intl.formatMessage(messages.validationhostrequired)),
+      username: Yup.string().required(
+        intl.formatMessage(messages.validationusernamerequired)
+      ),
+      password: Yup.string().required(
+        intl.formatMessage(messages.validationpasswordrequired)
+      ),
+    });
+    return (
+      <Formik
+        initialValues={{
+          username: '',
+          password: '',
+          host: '',
+        }}
+        validationSchema={LoginSchema}
+        onSubmit={async (values) => {
+          try {
+            await axios.post('/api/v1/auth/jellyfin', {
+              username: values.username,
+              password: values.password,
+              hostname: values.host,
+            });
+          } catch (e) {
+            toasts.addToast(
+              intl.formatMessage(
+                e.message == 'Request failed with status code 401'
+                  ? messages.credentialerror
+                  : messages.loginerror
+              ),
+              {
+                autoDismiss: true,
+                appearance: 'error',
+              }
+            );
+          } finally {
+            revalidate();
+          }
+        }}
+      >
+        {({ errors, touched, isSubmitting, isValid }) => (
+          <Form>
+            <div className="sm:border-t sm:border-gray-800">
+              <label htmlFor="host" className="text-label">
+                {intl.formatMessage(messages.host)}
+              </label>
+              <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                <div className="flex rounded-md shadow-sm">
+                  <Field
+                    id="host"
+                    name="host"
+                    type="text"
+                    placeholder={intl.formatMessage(messages.host)}
+                  />
+                </div>
+                {errors.host && touched.host && (
+                  <div className="error">{errors.host}</div>
+                )}
+              </div>
+              <label htmlFor="username" className="text-label">
+                {intl.formatMessage(messages.username)}
+              </label>
+              <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                <div className="flex rounded-md shadow-sm">
+                  <Field
+                    id="username"
+                    name="username"
+                    type="text"
+                    placeholder={intl.formatMessage(messages.username)}
+                  />
+                </div>
+                {errors.username && touched.username && (
+                  <div className="error">{errors.username}</div>
+                )}
+              </div>
+              <label htmlFor="password" className="text-label">
+                {intl.formatMessage(messages.password)}
+              </label>
+              <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                <div className="shadow-sm flexrounded-md">
+                  <Field
+                    id="password"
+                    name="password"
+                    type="password"
+                    placeholder={intl.formatMessage(messages.password)}
+                  />
+                </div>
+                {errors.password && touched.password && (
+                  <div className="error">{errors.password}</div>
+                )}
+              </div>
+            </div>
+            <div className="pt-5 mt-8 border-t border-gray-700">
+              <div className="flex justify-end">
+                <span className="inline-flex rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(messages.signingin)
+                      : intl.formatMessage(messages.signin)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    );
+  } else {
+    const LoginSchema = Yup.object().shape({
+      username: Yup.string().required(
+        intl.formatMessage(messages.validationusernamerequired)
+      ),
+      password: Yup.string().required(
+        intl.formatMessage(messages.validationpasswordrequired)
+      ),
+    });
+    return (
+      <Formik
+        initialValues={{
+          username: '',
+          password: '',
+        }}
+        validationSchema={LoginSchema}
+        onSubmit={async (values) => {
+          try {
+            await axios.post('/api/v1/auth/jellyfin', {
+              username: values.username,
+              password: values.password,
+            });
+          } catch (e) {
+            toasts.addToast(
+              intl.formatMessage(
+                e.message == 'Request failed with status code 401'
+                  ? messages.credentialerror
+                  : messages.loginerror
+              ),
+              {
+                autoDismiss: true,
+                appearance: 'error',
+              }
+            );
+          } finally {
+            revalidate();
+          }
+        }}
+      >
+        {({ errors, touched, isSubmitting, isValid }) => {
+          return (
+            <>
+              <Form>
+                <div className="sm:border-t sm:border-gray-800">
+                  <label htmlFor="username" className="text-label">
+                    {intl.formatMessage(messages.username)}
+                  </label>
+                  <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                    <div className="flex max-w-lg rounded-md shadow-sm">
+                      <Field
+                        id="username"
+                        name="username"
+                        type="text"
+                        placeholder={intl.formatMessage(messages.username)}
+                      />
+                    </div>
+                    {errors.username && touched.username && (
+                      <div className="error">{errors.username}</div>
+                    )}
+                  </div>
+                  <label htmlFor="password" className="text-label">
+                    {intl.formatMessage(messages.password)}
+                  </label>
+                  <div className="mt-1 mb-2 sm:mt-0 sm:col-span-2">
+                    <div className="flex max-w-lg rounded-md shadow-sm">
+                      <Field
+                        id="password"
+                        name="password"
+                        type="password"
+                        placeholder={intl.formatMessage(messages.password)}
+                      />
+                    </div>
+                    {errors.password && touched.password && (
+                      <div className="error">{errors.password}</div>
+                    )}
+                  </div>
+                </div>
+                <div className="pt-5 mt-8 border-t border-gray-700">
+                  <div className="flex justify-between">
+                    <span className="inline-flex rounded-md shadow-sm">
+                      <Button
+                        as="a"
+                        buttonType="ghost"
+                        href={
+                          settings.currentSettings.jfHost +
+                          '/web/#!/forgotpassword.html'
+                        }
+                      >
+                        {intl.formatMessage(messages.forgotpassword)}
+                      </Button>
+                    </span>
+                    <span className="inline-flex rounded-md shadow-sm">
+                      <Button
+                        buttonType="primary"
+                        type="submit"
+                        disabled={isSubmitting || !isValid}
+                      >
+                        {isSubmitting
+                          ? intl.formatMessage(messages.signingin)
+                          : intl.formatMessage(messages.signin)}
+                      </Button>
+                    </span>
+                  </div>
+                </div>
+              </Form>
+            </>
+          );
+        }}
+      </Formik>
+    );
+  }
+};
+
+export default JellyfinLogin;

src/components/Login/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PlexLoginButton from '../PlexLoginButton';
+import JellyfinLogin from './JellyfinLogin';
 import { useUser } from '../../hooks/useUser';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
@@ -16,6 +17,7 @@ const messages = defineMessages({
   signin: 'Sign In',
   signinheader: 'Sign in to continue',
   signinwithplex: 'Use your Plex account',
+  signinwithjellyfin: 'Use your Jellyfin account',
   signinwithoverseerr: 'Use your {applicationTitle} account',
 });
 
@@ -134,14 +136,20 @@ const Login: React.FC = () => {
                     onClick={() => handleClick(0)}
                     disabled={!settings.currentSettings.localLogin}
                   >
-                    {intl.formatMessage(messages.signinwithplex)}
+                    {settings.currentSettings.mediaServerType == 'PLEX'
+                      ? intl.formatMessage(messages.signinwithplex)
+                      : intl.formatMessage(messages.signinwithjellyfin)}
                   </button>
                   <AccordionContent isOpen={openIndexes.includes(0)}>
                     <div className="px-10 py-8">
-                      <PlexLoginButton
-                        isProcessing={isProcessing}
-                        onAuthToken={(authToken) => setAuthToken(authToken)}
-                      />
+                      {settings.currentSettings.mediaServerType == 'PLEX' ? (
+                        <PlexLoginButton
+                          isProcessing={isProcessing}
+                          onAuthToken={(authToken) => setAuthToken(authToken)}
+                        />
+                      ) : (
+                        <JellyfinLogin revalidate={revalidate} />
+                      )}
                     </div>
                   </AccordionContent>
                   {settings.currentSettings.localLogin && (

src/components/MovieDetails/index.tsx

@@ -72,6 +72,8 @@ const messages = defineMessages({
   downloadstatus: 'Download Status',
   playonplex: 'Play on Plex',
   play4konplex: 'Play 4K on Plex',
+  playonjellyfin: 'Play on Jellyfin',
+  play4konjellyfin: 'Play 4K on Jellyfin',
   markavailable: 'Mark as Available',
   mark4kavailable: 'Mark 4K as Available',
 });
@@ -385,11 +387,33 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2 space-x-2">
-            <span className="ml-2 lg:ml-0">
+            {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
+              <span className="ml-2 lg:ml-0">
+                <StatusBadge
+                  status={data.mediaInfo?.status}
+                  inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
+                  plexUrl={
+                    data.mediaInfo?.plexUrl ?? data.mediaInfo?.jellyfinUrl
+                  }
+                  plexUrl4k={
+                    data.mediaInfo?.plexUrl4k ?? data.mediaInfo?.jellyfinUrl4k
+                  }
+                />
+              </span>
+            )}
+            <span>
               <StatusBadge
-                status={data.mediaInfo?.status}
-                inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
-                plexUrl={data.mediaInfo?.plexUrl}
+                status={data.mediaInfo?.status4k}
+                is4k
+                inProgress={(data.mediaInfo?.downloadStatus4k ?? []).length > 0}
+                plexUrl={data.mediaInfo?.plexUrl ?? data.mediaInfo?.jellyfinUrl}
+                plexUrl4k={
+                  data.mediaInfo?.plexUrl4k &&
+                  (hasPermission(Permission.REQUEST_4K) ||
+                    hasPermission(Permission.REQUEST_4K_MOVIE))
+                    ? data.mediaInfo.plexUrl4k ?? data.mediaInfo?.jellyfinUrl4k
+                    : undefined
+                }
               />
             </span>
             {settings.currentSettings.movie4kEnabled &&

src/components/PlexLoginButton/index.tsx

@@ -3,7 +3,7 @@ import PlexOAuth from '../../utils/plex';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
-  signinwithplex: 'Sign In',
+  signinwithplex: 'Sign In with Plex',
   loading: 'Loading…',
   signingin: 'Signing in…',
 });

src/components/Settings/SettingsJellyfin.tsx

@@ -0,0 +1,283 @@
+import React, { useState } from 'react';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import type { JellyfinSettings } from '../../../server/lib/settings';
+import useSWR from 'swr';
+import Button from '../Common/Button';
+import axios from 'axios';
+import LibraryItem from './LibraryItem';
+import Badge from '../Common/Badge';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  jellyfinsettings: 'Jellyfin Settings',
+  jellyfinsettingsDescription:
+    'Configure the settings for your Jellyfin server. Overseerr scans your Jellyfin libraries to see what content is available.',
+  timeout: 'Timeout',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  jellyfinlibraries: 'Jellyfin Libraries',
+  jellyfinlibrariesDescription:
+    'The libraries Overseerr scans for titles. Click the button below if no libraries are listed.',
+  syncing: 'Syncing',
+  syncJellyfin: 'Sync Libraries',
+  manualscanJellyfin: 'Manual Library Scan',
+  manualscanDescriptionJellyfin:
+    "Normally, this will only be run once every 24 hours. Overseerr will check your Jellyfin server's recently added more aggressively. If this is your first time configuring Jellyfin, a one-time full manual library scan is recommended!",
+  notrunning: 'Not Running',
+  currentlibrary: 'Current Library: {name}',
+  librariesRemaining: 'Libraries Remaining: {count}',
+  startscan: 'Start Scan',
+  cancelscan: 'Cancel Scan',
+});
+
+interface Library {
+  id: string;
+  name: string;
+  enabled: boolean;
+}
+
+interface SyncStatus {
+  running: boolean;
+  progress: number;
+  total: number;
+  currentLibrary?: Library;
+  libraries: Library[];
+}
+interface SettingsJellyfinProps {
+  onComplete?: () => void;
+}
+
+const SettingsJellyfin: React.FC<SettingsJellyfinProps> = ({ onComplete }) => {
+  const [isSyncing, setIsSyncing] = useState(false);
+
+  const {
+    data: data,
+    error: error,
+    revalidate: revalidate,
+  } = useSWR<JellyfinSettings>('/api/v1/settings/jellyfin');
+  const { data: dataSync, revalidate: revalidateSync } = useSWR<SyncStatus>(
+    '/api/v1/settings/jellyfin/sync',
+    {
+      refreshInterval: 1000,
+    }
+  );
+  const intl = useIntl();
+
+  const activeLibraries =
+    data?.libraries
+      .filter((library) => library.enabled)
+      .map((library) => library.id) ?? [];
+
+  const syncLibraries = async () => {
+    setIsSyncing(true);
+
+    const params: { sync: boolean; enable?: string } = {
+      sync: true,
+    };
+
+    if (activeLibraries.length > 0) {
+      params.enable = activeLibraries.join(',');
+    }
+
+    await axios.get('/api/v1/settings/jellyfin/library', {
+      params,
+    });
+    setIsSyncing(false);
+    revalidate();
+  };
+
+  const startScan = async () => {
+    await axios.post('/api/v1/settings/jellyfin/sync', {
+      start: true,
+    });
+    revalidateSync();
+  };
+
+  const cancelScan = async () => {
+    await axios.post('/api/v1/settings/jellyfin/sync', {
+      cancel: true,
+    });
+    revalidateSync();
+  };
+
+  const toggleLibrary = async (libraryId: string) => {
+    setIsSyncing(true);
+    if (activeLibraries.includes(libraryId)) {
+      const params: { enable?: string } = {};
+
+      if (activeLibraries.length > 1) {
+        params.enable = activeLibraries
+          .filter((id) => id !== libraryId)
+          .join(',');
+      }
+
+      await axios.get('/api/v1/settings/jellyfin/library', {
+        params,
+      });
+    } else {
+      await axios.get('/api/v1/settings/jellyfin/library', {
+        params: {
+          enable: [...activeLibraries, libraryId].join(','),
+        },
+      });
+    }
+    if (onComplete) {
+      onComplete();
+    }
+    setIsSyncing(false);
+    revalidate();
+  };
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h3 className="heading">
+          <FormattedMessage {...messages.jellyfinlibraries} />
+        </h3>
+        <p className="description">
+          <FormattedMessage {...messages.jellyfinlibrariesDescription} />
+        </p>
+      </div>
+      <div className="section">
+        <Button onClick={() => syncLibraries()} disabled={isSyncing}>
+          <svg
+            className={`${isSyncing ? 'animate-spin' : ''} w-5 h-5 mr-1`}
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+              clipRule="evenodd"
+            />
+          </svg>
+          {isSyncing
+            ? intl.formatMessage(messages.syncing)
+            : intl.formatMessage(messages.syncJellyfin)}
+        </Button>
+        <ul className="grid grid-cols-1 gap-5 mt-6 sm:gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {data?.libraries.map((library) => (
+            <LibraryItem
+              name={library.name}
+              isEnabled={library.enabled}
+              key={`setting-library-${library.id}`}
+              onToggle={() => toggleLibrary(library.id)}
+            />
+          ))}
+        </ul>
+      </div>
+      <div className="mt-10 mb-6">
+        <h3 className="heading">
+          <FormattedMessage {...messages.manualscanJellyfin} />
+        </h3>
+        <p className="description">
+          <FormattedMessage {...messages.manualscanDescriptionJellyfin} />
+        </p>
+      </div>
+      <div className="section">
+        <div className="p-4 bg-gray-800 rounded-md">
+          <div className="relative w-full h-8 mb-6 overflow-hidden bg-gray-600 rounded-full">
+            {dataSync?.running && (
+              <div
+                className="h-8 transition-all duration-200 ease-in-out bg-indigo-600"
+                style={{
+                  width: `${Math.round(
+                    (dataSync.progress / dataSync.total) * 100
+                  )}%`,
+                }}
+              />
+            )}
+            <div className="absolute inset-0 flex items-center justify-center w-full h-8 text-sm">
+              <span>
+                {dataSync?.running
+                  ? `${dataSync.progress} of ${dataSync.total}`
+                  : 'Not running'}
+              </span>
+            </div>
+          </div>
+          <div className="flex flex-col w-full sm:flex-row">
+            {dataSync?.running && (
+              <>
+                {dataSync.currentLibrary && (
+                  <div className="flex items-center mb-2 mr-0 sm:mb-0 sm:mr-2">
+                    <Badge>
+                      <FormattedMessage
+                        {...messages.currentlibrary}
+                        values={{ name: dataSync.currentLibrary.name }}
+                      />
+                    </Badge>
+                  </div>
+                )}
+                <div className="flex items-center">
+                  <Badge badgeType="warning">
+                    <FormattedMessage
+                      {...messages.librariesRemaining}
+                      values={{
+                        count: dataSync.currentLibrary
+                          ? dataSync.libraries.slice(
+                              dataSync.libraries.findIndex(
+                                (library) =>
+                                  library.id === dataSync.currentLibrary?.id
+                              ) + 1
+                            ).length
+                          : 0,
+                      }}
+                    />
+                  </Badge>
+                </div>
+              </>
+            )}
+            <div className="flex-1 text-right">
+              {!dataSync?.running && (
+                <Button buttonType="warning" onClick={() => startScan()}>
+                  <svg
+                    className="w-5 h-5 mr-1"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                    />
+                  </svg>
+                  <FormattedMessage {...messages.startscan} />
+                </Button>
+              )}
+
+              {dataSync?.running && (
+                <Button buttonType="danger" onClick={() => cancelScan()}>
+                  <svg
+                    className="w-5 h-5 mr-1"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                  <FormattedMessage {...messages.cancelscan} />
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SettingsJellyfin;

src/components/Settings/SettingsLayout.tsx

@@ -8,6 +8,7 @@ const messages = defineMessages({
   settings: 'Settings',
   menuGeneralSettings: 'General Settings',
   menuPlexSettings: 'Plex',
+  menuJellyfinSettings: 'Jellyfin',
   menuServices: 'Services',
   menuNotifications: 'Notifications',
   menuLogs: 'Logs',
@@ -36,6 +37,11 @@ const SettingsLayout: React.FC = ({ children }) => {
       route: '/settings/plex',
       regex: /^\/settings\/plex/,
     },
+    {
+      text: intl.formatMessage(messages.menuJellyfinSettings),
+      route: '/settings/jellyfin',
+      regex: /^\/settings\/jellyfin/,
+    },
     {
       text: intl.formatMessage(messages.menuServices),
       route: '/settings/services',

src/components/Settings/SettingsMain.tsx

@@ -35,6 +35,7 @@ const messages = defineMessages({
   toastSettingsSuccess: 'Settings successfully saved!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
   defaultPermissions: 'Default User Permissions',
+  useJellyfin: 'Use Jellyfin as Media Server',
   hideAvailable: 'Hide Available Media',
   csrfProtection: 'Enable CSRF Protection',
   csrfProtectionTip:
@@ -122,6 +123,7 @@ const SettingsMain: React.FC = () => {
             region: data?.region,
             originalLanguage: data?.originalLanguage,
             trustProxy: data?.trustProxy,
+            useJellyfin: data?.mediaServerType == 'JELLYFIN' ? true : false,
           }}
           enableReinitialize
           validationSchema={MainSettingsSchema}
@@ -137,6 +139,7 @@ const SettingsMain: React.FC = () => {
                 region: values.region,
                 originalLanguage: values.originalLanguage,
                 trustProxy: values.trustProxy,
+                mediaServerType: values.useJellyfin ? 'JELLYFIN' : 'PLEX',
               });
 
               addToast(intl.formatMessage(messages.toastSettingsSuccess), {
@@ -360,6 +363,21 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="useJellyfin" className="checkbox-label">
+                    <span>{intl.formatMessage(messages.useJellyfin)}</span>
+                  </label>
+                  <div className="form-input">
+                    <Field
+                      type="checkbox"
+                      id="useJellyfin"
+                      name="useJellyfin"
+                      onChange={() => {
+                        setFieldValue('useJellyfin', !values.useJellyfin);
+                      }}
+                    />
+                  </div>
+                </div>
                 <div
                   role="group"
                   aria-labelledby="group-label"

src/components/Setup/SetupLogin.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react';
+import { useUser } from '../../hooks/useUser';
+import PlexLoginButton from '../PlexLoginButton';
+import JellyfinLogin from '../Login/JellyfinLogin';
+import axios from 'axios';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import LoadingSpinner from '../Common/LoadingSpinner';
+
+const messages = defineMessages({
+  welcome: 'Welcome to Overseerr',
+  signinMessage: 'Get started by logging in with an account',
+  signinWithJellyfin: 'Use Jellyfin',
+});
+
+interface LoginWithMediaServerProps {
+  onComplete: () => void;
+}
+
+const SetupLogin: React.FC<LoginWithMediaServerProps> = ({ onComplete }) => {
+  const [authToken, setAuthToken] = useState<string | undefined>(undefined);
+  const [mediaServerType, setMediaServerType] = useState<string>('');
+  const { user, revalidate } = useUser();
+
+  // Effect that is triggered when the `authToken` comes back from the Plex OAuth
+  // We take the token and attempt to login. If we get a success message, we will
+  // ask swr to revalidate the user which _shouid_ come back with a valid user.
+
+  useEffect(() => {
+    const login = async () => {
+      const response = await axios.post('/api/v1/auth/login', {
+        authToken: authToken,
+      });
+
+      if (response.data?.email) {
+        revalidate();
+      }
+    };
+    if (authToken && mediaServerType == 'PLEX') {
+      login();
+    }
+  }, [authToken, mediaServerType, revalidate]);
+
+  useEffect(() => {
+    if (user) {
+      onComplete();
+    }
+  }, [user, onComplete]);
+
+  return (
+    <div>
+      {mediaServerType == '' ? (
+        <React.Fragment>
+          <div className="flex justify-center mb-2 text-xl font-bold">
+            <FormattedMessage {...messages.welcome} />
+          </div>
+          <div className="flex justify-center pb-6 mb-2 text-sm">
+            <FormattedMessage {...messages.signinMessage} />
+          </div>
+          <div className="flex items-center justify-center pb-4">
+            <PlexLoginButton
+              onAuthToken={(authToken) => {
+                setMediaServerType('PLEX');
+                setAuthToken(authToken);
+              }}
+            />
+          </div>
+          <hr className="m-auto border-gray-600 w-60"></hr>
+          <span className="block w-full rounded-md shadow-sm">
+            <button
+              type="button"
+              onClick={() => {
+                setMediaServerType('JELLYFIN');
+              }}
+              className="jellyfin-button"
+            >
+              <FormattedMessage {...messages.signinWithJellyfin} />
+            </button>
+          </span>
+        </React.Fragment>
+      ) : mediaServerType == 'JELLYFIN' ? (
+        <JellyfinLogin initial={true} revalidate={revalidate} />
+      ) : (
+        <LoadingSpinner></LoadingSpinner>
+      )}
+    </div>
+  );
+};
+
+export default SetupLogin;

src/components/Setup/index.tsx

@@ -3,8 +3,9 @@ import React, { useState } from 'react';
 import Button from '../Common/Button';
 import ImageFader from '../Common/ImageFader';
 import SettingsPlex from '../Settings/SettingsPlex';
+import SettingsJellyfin from '../Settings/SettingsJellyfin';
 import SettingsServices from '../Settings/SettingsServices';
-import LoginWithPlex from './LoginWithPlex';
+import SetupLogin from './SetupLogin';
 import SetupSteps from './SetupSteps';
 import axios from 'axios';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -18,8 +19,8 @@ const messages = defineMessages({
   finish: 'Finish Setup',
   finishing: 'Finishing…',
   continue: 'Continue',
-  loginwithplex: 'Login with Plex',
-  configureplex: 'Configure Plex',
+  authorize: 'Authorize',
+  connectmediaserver: 'Connect Media Server',
   configureservices: 'Configure Services',
   tip: 'Tip',
   syncingbackground:
@@ -30,7 +31,8 @@ const Setup: React.FC = () => {
   const intl = useIntl();
   const [isUpdating, setIsUpdating] = useState(false);
   const [currentStep, setCurrentStep] = useState(1);
-  const [plexSettingsComplete, setPlexSettingsComplete] = useState(false);
+  const [msSettingsComplete, setMSSettingsComplete] = useState(false);
+  const [mediaServerType, setMediaServerType] = useState('');
   const router = useRouter();
 
   const finishSetup = async () => {
@@ -45,6 +47,12 @@ const Setup: React.FC = () => {
     }
   };
 
+  const getMediaServerType = async () => {
+    const MainSettings = await axios.get('/api/v1/settings/main');
+    setMediaServerType(MainSettings.data.mediaServerType);
+    return;
+  };
+
   return (
     <div className="relative flex flex-col justify-center min-h-screen py-12 bg-gray-900">
       <PageTitle title={intl.formatMessage(messages.setup)} />
@@ -75,13 +83,13 @@ const Setup: React.FC = () => {
           >
             <SetupSteps
               stepNumber={1}
-              description={intl.formatMessage(messages.loginwithplex)}
+              description={intl.formatMessage(messages.authorize)}
               active={currentStep === 1}
               completed={currentStep > 1}
             />
             <SetupSteps
               stepNumber={2}
-              description={intl.formatMessage(messages.configureplex)}
+              description={intl.formatMessage(messages.connectmediaserver)}
               active={currentStep === 2}
               completed={currentStep > 2}
             />
@@ -95,11 +103,23 @@ const Setup: React.FC = () => {
         </nav>
         <div className="w-full p-4 mt-10 text-white bg-gray-800 bg-opacity-50 border border-gray-600 rounded-md">
           {currentStep === 1 && (
-            <LoginWithPlex onComplete={() => setCurrentStep(2)} />
+            <SetupLogin
+              onComplete={() => {
+                getMediaServerType().then(() => {
+                  setCurrentStep(2);
+                });
+              }}
+            />
           )}
           {currentStep === 2 && (
             <div>
-              <SettingsPlex onComplete={() => setPlexSettingsComplete(true)} />
+              {mediaServerType == 'PLEX' ? (
+                <SettingsPlex onComplete={() => setMSSettingsComplete(true)} />
+              ) : (
+                <SettingsJellyfin
+                  onComplete={() => setMSSettingsComplete(true)}
+                />
+              )}
               <div className="mt-4 text-sm text-gray-500">
                 <span className="mr-2">
                   <Badge>{intl.formatMessage(messages.tip)}</Badge>
@@ -111,7 +131,7 @@ const Setup: React.FC = () => {
                   <span className="inline-flex ml-3 rounded-md shadow-sm">
                     <Button
                       buttonType="primary"
-                      disabled={!plexSettingsComplete}
+                      disabled={!msSettingsComplete}
                       onClick={() => setCurrentStep(3)}
                     >
                       <FormattedMessage {...messages.continue} />

src/components/TvDetails/index.tsx

@@ -69,6 +69,8 @@ const messages = defineMessages({
   downloadstatus: 'Download Status',
   playonplex: 'Play on Plex',
   play4konplex: 'Play 4K on Plex',
+  playonjellyfin: 'Play on Jellyfin',
+  play4konjellyfin: 'Play 4K on Jellyfin',
   markavailable: 'Mark as Available',
   mark4kavailable: 'Mark 4K as Available',
   allseasonsmarkedavailable: '* All seasons will be marked as available.',
@@ -406,11 +408,32 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         </div>
         <div className="flex flex-col flex-1 mt-4 text-center text-white lg:mr-4 lg:mt-0 lg:text-left">
           <div className="mb-2 space-x-2">
-            <span className="ml-2 lg:ml-0">
+            {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
+              <span className="ml-2 lg:ml-0">
+                <StatusBadge
+                  status={data.mediaInfo?.status}
+                  inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
+                  plexUrl={
+                    data.mediaInfo?.plexUrl ?? data.mediaInfo?.jellyfinUrl
+                  }
+                  plexUrl4k={
+                    data.mediaInfo?.plexUrl4k ?? data.mediaInfo?.jellyfinUrl4k
+                  }
+                />
+              </span>
+            )}
+            <span>
               <StatusBadge
                 status={data.mediaInfo?.status}
                 inProgress={(data.mediaInfo?.downloadStatus ?? []).length > 0}
-                plexUrl={data.mediaInfo?.plexUrl}
+                plexUrl={data.mediaInfo?.plexUrl ?? data.mediaInfo?.jellyfinUrl}
+                plexUrl4k={
+                  data.mediaInfo?.plexUrl4k &&
+                  (hasPermission(Permission.REQUEST_4K) ||
+                    hasPermission(Permission.REQUEST_4K_TV))
+                    ? data.mediaInfo.plexUrl4k ?? data.mediaInfo?.jellyfinUrl4k
+                    : undefined
+                }
               />
             </span>
             {settings.currentSettings.series4kEnabled &&

src/context/SettingsContext.tsx

@@ -15,6 +15,7 @@ const defaultSettings = {
   series4kEnabled: false,
   region: '',
   originalLanguage: '',
+  mediaServerType: 'PLEX',
 };
 
 export const SettingsContext = React.createContext<SettingsContextProps>({

src/i18n/locale/en.json

@@ -36,17 +36,26 @@
   "components.Layout.UserDropdown.settings": "Settings",
   "components.Layout.UserDropdown.signout": "Sign Out",
   "components.Layout.alphawarning": "This is ALPHA software. Features may be broken and/or unstable. Please report issues on GitHub!",
+  "components.Login.credentialerror": "The username or password is incorrect.",
   "components.Login.email": "Email Address",
   "components.Login.forgotpassword": "Forgot Password?",
+  "components.Login.host": "Jellyfin URL",
+  "components.Login.initialsignin": "Connect",
+  "components.Login.initialsigningin": "Connecting…",
   "components.Login.loginerror": "Something went wrong while trying to sign in.",
   "components.Login.password": "Password",
   "components.Login.signin": "Sign In",
   "components.Login.signingin": "Signing in…",
   "components.Login.signinheader": "Sign in to continue",
+  "components.Login.signinwithjellyfin": "Use your Jellyfin account",
   "components.Login.signinwithoverseerr": "Use your {applicationTitle} account",
   "components.Login.signinwithplex": "Use your Plex account",
+  "components.Login.username": "Username",
   "components.Login.validationemailrequired": "You must provide a valid email address",
+  "components.Login.validationhostformat": "Valid URL required",
+  "components.Login.validationhostrequired": "Jellyfin URL required",
   "components.Login.validationpasswordrequired": "You must provide a password",
+  "components.Login.validationusernamerequired": "Username required",
   "components.MediaSlider.ShowMoreCard.seemore": "See More",
   "components.MovieDetails.MovieCast.fullcast": "Full Cast",
   "components.MovieDetails.MovieCrew.fullcrew": "Full Crew",
@@ -71,7 +80,9 @@
   "components.MovieDetails.overview": "Overview",
   "components.MovieDetails.overviewunavailable": "Overview unavailable.",
   "components.MovieDetails.pending": "Pending",
+  "components.MovieDetails.play4konjellyfin": "Play 4K on Jellyfin",
   "components.MovieDetails.play4konplex": "Play 4K on Plex",
+  "components.MovieDetails.playonjellyfin": "Play on Jellyfin",
   "components.MovieDetails.playonplex": "Play on Plex",
   "components.MovieDetails.recommendations": "Recommendations",
   "components.MovieDetails.recommendationssubtext": "If you liked {title}, you might also like…",
@@ -137,9 +148,13 @@
   "components.PersonDetails.nobiography": "No biography available.",
   "components.PlexLoginButton.loading": "Loading…",
   "components.PlexLoginButton.signingin": "Signing in…",
+<<<<<<< HEAD
   "components.PlexLoginButton.signinwithplex": "Sign In",
   "components.RegionSelector.regionDefault": "All Regions",
   "components.RegionSelector.regionServerDefault": "{applicationTitle} Default ({region})",
+=======
+  "components.PlexLoginButton.signinwithplex": "Sign In with Plex",
+>>>>>>> feat(all): add initial Jellyfin/Emby support
   "components.RequestBlock.profilechanged": "Quality Profile",
   "components.RequestBlock.requestoverrides": "Request Overrides",
   "components.RequestBlock.rootfolder": "Root Folder",
@@ -498,12 +513,19 @@
   "components.Settings.generalsettingsDescription": "Configure global and default settings for Overseerr.",
   "components.Settings.hideAvailable": "Hide Available Media",
   "components.Settings.hostname": "Hostname/IP",
+  "components.Settings.jellyfinlibraries": "Jellyfin Libraries",
+  "components.Settings.jellyfinlibrariesDescription": "The libraries Overseerr scans for titles. Click the button below if no libraries are listed.",
+  "components.Settings.jellyfinsettings": "Jellyfin Settings",
+  "components.Settings.jellyfinsettingsDescription": "Configure the settings for your Jellyfin server. Overseerr scans your Jellyfin libraries to see what content is available.",
   "components.Settings.librariesRemaining": "Libraries Remaining: {count}",
   "components.Settings.localLogin": "Enable Local User Sign-In",
   "components.Settings.manualscan": "Manual Library Scan",
   "components.Settings.manualscanDescription": "Normally, this will only be run once every 24 hours. Overseerr will check your Plex server's recently added more aggressively. If this is your first time configuring Plex, a one-time full manual library scan is recommended!",
+  "components.Settings.manualscanDescriptionJellyfin": "Normally, this will only be run once every 24 hours. Overseerr will check your Jellyfin server's recently added more aggressively. If this is your first time configuring Jellyfin, a one-time full manual library scan is recommended!",
+  "components.Settings.manualscanJellyfin": "Manual Library Scan",
   "components.Settings.menuAbout": "About",
   "components.Settings.menuGeneralSettings": "General Settings",
+  "components.Settings.menuJellyfinSettings": "Jellyfin",
   "components.Settings.menuJobs": "Jobs & Cache",
   "components.Settings.menuLogs": "Logs",
   "components.Settings.menuNotifications": "Notifications",
@@ -551,6 +573,7 @@
   "components.Settings.ssl": "SSL",
   "components.Settings.startscan": "Start Scan",
   "components.Settings.sync": "Sync Plex Libraries",
+  "components.Settings.syncJellyfin": "Sync Libraries",
   "components.Settings.syncing": "Syncing…",
   "components.Settings.timeout": "Timeout",
   "components.Settings.toastApiKeyFailure": "Something went wrong while generating a new API key.",
@@ -565,20 +588,26 @@
   "components.Settings.toastSettingsSuccess": "Settings successfully saved!",
   "components.Settings.trustProxy": "Enable Proxy Support",
   "components.Settings.trustProxyTip": "Allows Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)",
+  "components.Settings.useJellyfin": "Use Jellyfin as Media Server",
   "components.Settings.validationApplicationTitle": "You must provide an application title",
   "components.Settings.validationApplicationUrl": "You must provide a valid URL",
   "components.Settings.validationApplicationUrlTrailingSlash": "URL must not end in a trailing slash",
   "components.Settings.validationHostnameRequired": "You must provide a hostname/IP",
   "components.Settings.validationPortRequired": "You must provide a port",
+<<<<<<< HEAD
   "components.Settings.webhook": "Webhook",
   "components.Setup.configureplex": "Configure Plex",
+=======
+  "components.Setup.authorize": "Authorize",
+>>>>>>> feat(all): add initial Jellyfin/Emby support
   "components.Setup.configureservices": "Configure Services",
+  "components.Setup.connectmediaserver": "Connect Media Server",
   "components.Setup.continue": "Continue",
   "components.Setup.finish": "Finish Setup",
   "components.Setup.finishing": "Finishing…",
-  "components.Setup.loginwithplex": "Sign in with Plex",
   "components.Setup.setup": "Setup",
   "components.Setup.signinMessage": "Get started by signing in with your Plex account",
+  "components.Setup.signinWithJellyfin": "Use Jellyfin",
   "components.Setup.syncingbackground": "Syncing will run in the background. You can continue the setup process in the meantime.",
   "components.Setup.tip": "Tip",
   "components.Setup.welcome": "Welcome to Overseerr",
@@ -616,7 +645,9 @@
   "components.TvDetails.overview": "Overview",
   "components.TvDetails.overviewunavailable": "Overview unavailable.",
   "components.TvDetails.pending": "Pending",
+  "components.TvDetails.play4konjellyfin": "Play 4K on Jellyfin",
   "components.TvDetails.play4konplex": "Play 4K on Plex",
+  "components.TvDetails.playonjellyfin": "Play on Jellyfin",
   "components.TvDetails.playonplex": "Play on Plex",
   "components.TvDetails.recommendations": "Recommendations",
   "components.TvDetails.recommendationssubtext": "If you liked {title}, you might also like…",

src/pages/_app.tsx

@@ -146,6 +146,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     localLogin: true,
     region: '',
     originalLanguage: '',
+    mediaServerType: 'PLEX',
   };
 
   let locale = 'en';

src/pages/settings/jellyfin.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { NextPage } from 'next';
+import SettingsLayout from '../../components/Settings/SettingsLayout';
+import SettingsJellyfin from '../../components/Settings/SettingsJellyfin';
+import { Permission } from '../../hooks/useUser';
+import useRouteGuard from '../../hooks/useRouteGuard';
+
+const JellyfinSettingsPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_SETTINGS);
+  return (
+    <SettingsLayout>
+      <SettingsJellyfin />
+    </SettingsLayout>
+  );
+};
+
+export default JellyfinSettingsPage;

src/styles/globals.css

@@ -11,6 +11,11 @@ body {
   background-color: #cc7b19;
 }
 
+.jellyfin-button {
+  @apply flex justify-center w-full px-4 py-2 text-sm font-medium text-center text-white transition duration-150 ease-in-out bg-indigo-600 border border-transparent rounded-md disabled:opacity-50;
+  background-color: #00A4DC;
+}
+
 .plex-button:hover {
   background: #f19a30;
 }

src/utils/jellyfin.ts

@@ -0,0 +1,51 @@
+/* eslint-disable no-async-promise-executor */
+import axios, { AxiosError, AxiosResponse } from 'axios';
+
+interface JellyfinAuthenticationResult {
+  Id: string;
+  AccessToken: string;
+  ServerId: string;
+}
+
+class JellyAPI {
+  public login(
+    Hostname?: string,
+    Username?: string,
+    Password?: string
+  ): Promise<JellyfinAuthenticationResult> {
+    return new Promise(
+      (
+        resolve: (result: JellyfinAuthenticationResult) => void,
+        reject: (e: Error) => void
+      ) => {
+        axios
+          .post(
+            Hostname + '/Users/AuthenticateByName',
+            {
+              Username: Username,
+              Pw: Password,
+            },
+            {
+              headers: {
+                'X-Emby-Authorization':
+                  'MediaBrowser Client="Jellyfin Web", Device="Firefox", DeviceId="TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NDsgcnY6ODUuMCkgR2Vja28vMjAxMDAxMDEgRmlyZWZveC84NS4wfDE2MTI5MjcyMDM5NzM1", Version="10.8.0"',
+              },
+            }
+          )
+          .then((resp: AxiosResponse) => {
+            const response: JellyfinAuthenticationResult = {
+              Id: resp.data.User.Id,
+              AccessToken: resp.data.AccessToken,
+              ServerId: resp.data.ServerId,
+            };
+            resolve(response);
+          })
+          .catch((e: AxiosError) => {
+            reject(e);
+          });
+      }
+    );
+  }
+}
+
+export default JellyAPI;

yarn.lock

@@ -1460,7 +1460,7 @@
     tslib "^2.0.1"
     typescript "^4.0"
 
-"@fullhuman/postcss-purgecss@^3.0.0":
+"@fullhuman/postcss-purgecss@3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.0.0.tgz#e39bf7a7d2a2c664ed151b639785b2efcbca33ff"
   integrity sha512-cvuOgMwIVlfgWcUMqg5p33NbGUxLwMrKtDKkm3QRfOo4PRVNR6+y/xd9OyXTVZiB1bIpKNJ0ZObYPWD3DRQDtw==
@@ -1468,6 +1468,13 @@
     postcss "7.0.32"
     purgecss "^3.0.0"
 
+"@fullhuman/postcss-purgecss@^3.1.3":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz#47af7b87c9bfb3de4bc94a38f875b928fffdf339"
+  integrity sha512-kwOXw8fZ0Lt1QmeOOrd+o4Ibvp4UTEBFQbzvWldjlKv5n+G9sXfIPn1hh63IQIL8K8vbvv1oYMJiIUbuy9bGaA==
+  dependencies:
+    purgecss "^3.1.3"
+
 "@hapi/accept@5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.1.tgz#068553e867f0f63225a506ed74e899441af53e10"
@@ -6557,7 +6564,7 @@ fs-extra@8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^9.0.0, fs-extra@^9.0.1:
+fs-extra@^9.0.0:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc"
   integrity sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==
@@ -6567,6 +6574,16 @@ fs-extra@^9.0.0, fs-extra@^9.0.1:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
+fs-extra@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
+  integrity sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==
+  dependencies:
+    at-least-node "^1.0.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-minipass@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.7.tgz#ccff8570841e7fe4265693da88936c55aed7f7c7"
@@ -10106,11 +10123,16 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^2.0.1, object-hash@^2.0.3:
+object-hash@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
   integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
 
+object-hash@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.1.1.tgz#9447d0279b4fcf80cff3259bf66a1dc73afabe09"
+  integrity sha512-VOJmgmS+7wvXf8CjbQmimtCnEx3IAoLxI3fp2fbWehxrWBcAQFbk+vcwb6vzR0VZv/eNCJ/27j151ZTwqW/JeQ==
+
 object-inspect@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
@@ -11546,14 +11568,14 @@ pupa@^2.0.1:
   dependencies:
     escape-goat "^2.0.0"
 
-purgecss@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-3.0.0.tgz#039c191871bb999894222a00c4c8b179fccdb043"
-  integrity sha512-t3FGCwyX9XWV3ffvnAXTw6Y3Z9kNlcgm14VImNK66xKi5sdqxSA2I0SFYxtmZbAKuIZVckPdazw5iKL/oY/2TA==
+purgecss@^3.0.0, purgecss@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-3.1.3.tgz#26987ec09d12eeadc318e22f6e5a9eb0be094f41"
+  integrity sha512-hRSLN9mguJ2lzlIQtW4qmPS2kh6oMnA9RxdIYK8sz18QYqd6ePp4GNDl18oWHA1f2v2NEQIh51CO8s/E3YGckQ==
   dependencies:
     commander "^6.0.0"
     glob "^7.0.0"
-    postcss "7.0.32"
+    postcss "^8.2.1"
     postcss-selector-parser "^6.0.2"
 
 q@^1.1.2, q@^1.5.1:
@@ -11984,10 +12006,10 @@ redeyed@~2.1.0:
   dependencies:
     esprima "~4.0.0"
 
-reduce-css-calc@^2.1.6:
-  version "2.1.7"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
-  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
+reduce-css-calc@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
+  integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
   dependencies:
     css-unit-converter "^1.1.1"
     postcss-value-parser "^3.3.0"
@@ -13412,23 +13434,23 @@ table@^6.0.4:
     string-width "^4.2.0"
 
 "tailwindcss@npm:@tailwindcss/postcss7-compat":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.1.tgz#901b02546e537e85beddbc13443226f46929efc8"
-  integrity sha512-SdWGioSKNhCIuoX2gCYhfs9HhWnOf1dvIed5G2i/lbqReGA27LG5KpH4glDunHWevWAY7h/WISZblE6xDCC/UA==
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/postcss7-compat/-/postcss7-compat-2.0.3.tgz#d212aa672eb5aa789fbf1ac253000707603d7676"
+  integrity sha512-R43aiSzwlybDMhDld8vkSIKPSLXxbbmotZ+I2GIrX+IzFNy9JAByC7Ncf9A81Dg0JLBWHY5m769lBbBnJCF8cw==
   dependencies:
-    "@fullhuman/postcss-purgecss" "^3.0.0"
+    "@fullhuman/postcss-purgecss" "^3.1.3"
     autoprefixer "^9"
     bytes "^3.0.0"
     chalk "^4.1.0"
     color "^3.1.3"
     detective "^5.2.0"
     didyoumean "^1.2.1"
-    fs-extra "^9.0.1"
+    fs-extra "^9.1.0"
     html-tags "^3.1.0"
     lodash "^4.17.20"
     modern-normalize "^1.0.0"
     node-emoji "^1.8.1"
-    object-hash "^2.0.3"
+    object-hash "^2.1.1"
     postcss "^7"
     postcss-functions "^3"
     postcss-js "^2"
@@ -13436,7 +13458,7 @@ table@^6.0.4:
     postcss-selector-parser "^6.0.4"
     postcss-value-parser "^4.1.0"
     pretty-hrtime "^1.0.3"
-    reduce-css-calc "^2.1.6"
+    reduce-css-calc "^2.1.8"
     resolve "^1.19.0"
 
 tapable@^1.0.0, tapable@^1.1.3:
@@ -14085,6 +14107,11 @@ universalify@^1.0.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
   integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
 
+universalify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"