fix: Images loaded from Jellyfin not showing up, some fixes regarding environment variables

Closes #66
This commit is contained in:
Aleksi Lassila
2023-08-15 17:57:15 +03:00
parent fd52073455
commit c1ba3efabf
11 changed files with 71 additions and 46 deletions

8
.env.example Normal file
View File

@@ -0,0 +1,8 @@
PUBLIC_RADARR_API_KEY=yourapikeyhere
PUBLIC_RADARR_BASE_URL=http://127.0.0.1:7878
PUBLIC_SONARR_API_KEY=yourapikeyhere
PUBLIC_SONARR_BASE_URL=http://127.0.0.1:8989
PUBLIC_JELLYFIN_API_KEY=yourapikeyhere
PUBLIC_JELLYFIN_BASE_URL=http://127.0.0.1:8096

View File

@@ -47,7 +47,7 @@ services:
PUBLIC_SONARR_API_KEY: yourapikeyhere
PUBLIC_SONARR_BASE_URL: http://127.0.0.1:8989
PUBLIC_JELLYFIN_API_KEY: yourapikeyhere
PUBLIC_JELLYFIN_URL: http://127.0.0.1:8096
PUBLIC_JELLYFIN_BASE_URL: http://127.0.0.1:8096
restart: unless-stopped
```
@@ -103,7 +103,7 @@ PUBLIC_SONARR_API_KEY=yourapikeyhere
PUBLIC_SONARR_BASE_URL=http://127.0.0.1:8989
PUBLIC_JELLYFIN_API_KEY=yourapikeyhere
PUBLIC_JELLYFIN_URL=http://127.0.0.1:8096
PUBLIC_JELLYFIN_BASE_URL=http://127.0.0.1:8096
```
For Webstorm users: I'd recommend using VS Code as it has way better Svelte Typescript support.

View File

@@ -1,20 +1,20 @@
import { env } from '$env/dynamic/public';
import type { components, paths } from '$lib/apis/jellyfin/jellyfin.generated';
import type { DeviceProfile } from '$lib/apis/jellyfin/playback-profiles';
import { JELLYFIN_API_KEY, JELLYFIN_BASE_URL } from '$lib/constants';
import createClient from 'openapi-fetch';
export type JellyfinItem = components['schemas']['BaseItemDto'];
export const jellyfinAvailable = !!env.PUBLIC_JELLYFIN_URL && !!env.PUBLIC_JELLYFIN_API_KEY;
export const jellyfinAvailable = !!JELLYFIN_BASE_URL && !!JELLYFIN_API_KEY;
export const JELLYFIN_DEVICE_ID = 'Reiverr Client';
export const JellyfinApi =
env.PUBLIC_JELLYFIN_URL && env.PUBLIC_JELLYFIN_API_KEY
JELLYFIN_BASE_URL && JELLYFIN_API_KEY
? createClient<paths>({
baseUrl: env.PUBLIC_JELLYFIN_URL,
baseUrl: JELLYFIN_BASE_URL,
headers: {
Authorization: `MediaBrowser DeviceId="${JELLYFIN_DEVICE_ID}", Token="${env.PUBLIC_JELLYFIN_API_KEY}"`
Authorization: `MediaBrowser DeviceId="${JELLYFIN_DEVICE_ID}", Token="${JELLYFIN_API_KEY}"`
}
})
: undefined;
@@ -88,7 +88,7 @@ export const getJellyfinItems = async () =>
// JellyfinApi.get('/Users/{userId}/Items', {
// params: {
// path: {
// userId: env.PUBLIC_JELLYFIN_USER_ID || ""
// userId: PUBLIC_JELLYFIN_USER_ID || ""
// },
// query: {
// hasTmdbId: true,
@@ -166,7 +166,7 @@ export const getJellyfinPlaybackInfo = async (
}).then((r) => ({
playbackUri:
r.data?.MediaSources?.[0]?.TranscodingUrl ||
`/Videos/${r.data?.MediaSources?.[0].Id}/stream.mp4?Static=true&mediaSourceId=${r.data?.MediaSources?.[0].Id}&deviceId=${JELLYFIN_DEVICE_ID}&api_key=${env.PUBLIC_JELLYFIN_API_KEY}&Tag=${r.data?.MediaSources?.[0].ETag}`,
`/Videos/${r.data?.MediaSources?.[0].Id}/stream.mp4?Static=true&mediaSourceId=${r.data?.MediaSources?.[0].Id}&deviceId=${JELLYFIN_DEVICE_ID}&api_key=${JELLYFIN_API_KEY}&Tag=${r.data?.MediaSources?.[0].ETag}`,
mediaSourceId: r.data?.MediaSources?.[0]?.Id,
playSessionId: r.data?.PlaySessionId,
directPlay:

View File

@@ -1,6 +1,6 @@
import { env } from '$env/dynamic/public';
import type { components, paths } from '$lib/apis/radarr/radarr.generated';
import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
import { RADARR_API_KEY, RADARR_BASE_URL } from '$lib/constants';
import { settings } from '$lib/stores/settings.store';
import { log } from '$lib/utils';
import createClient from 'openapi-fetch';
@@ -25,14 +25,14 @@ export interface RadarrMovieOptions {
searchNow?: boolean;
}
export const radarrAvailable = !!env.PUBLIC_RADARR_BASE_URL && !!env.PUBLIC_RADARR_API_KEY;
export const radarrAvailable = !!RADARR_BASE_URL && !!RADARR_API_KEY;
export const RadarrApi =
env.PUBLIC_RADARR_BASE_URL && env.PUBLIC_RADARR_API_KEY
RADARR_BASE_URL && RADARR_API_KEY
? createClient<paths>({
baseUrl: env.PUBLIC_RADARR_BASE_URL,
baseUrl: RADARR_BASE_URL,
headers: {
'X-Api-Key': env.PUBLIC_RADARR_API_KEY
'X-Api-Key': RADARR_API_KEY
}
})
: undefined;

View File

@@ -1,10 +1,10 @@
import { env } from '$env/dynamic/public';
import type { components, paths } from '$lib/apis/sonarr/sonarr.generated';
import { log } from '$lib/utils';
import createClient from 'openapi-fetch';
import { getTmdbSeries } from '../tmdb/tmdbApi';
import { get } from 'svelte/store';
import { settings } from '$lib/stores/settings.store';
import { SONARR_API_KEY, SONARR_BASE_URL } from '$lib/constants';
export type SonarrSeries = components['schemas']['SeriesResource'];
export type SonarrReleaseResource = components['schemas']['ReleaseResource'];
@@ -38,14 +38,14 @@ export interface SonarrSeriesOptions {
};
}
export const sonarrAvailable = !!env.PUBLIC_SONARR_BASE_URL && !!env.PUBLIC_SONARR_API_KEY;
export const sonarrAvailable = !!SONARR_BASE_URL && !!SONARR_API_KEY;
export const SonarrApi =
env.PUBLIC_SONARR_BASE_URL && env.PUBLIC_SONARR_API_KEY
SONARR_BASE_URL && SONARR_API_KEY
? createClient<paths>({
baseUrl: env.PUBLIC_SONARR_BASE_URL,
baseUrl: SONARR_BASE_URL,
headers: {
'X-Api-Key': env.PUBLIC_SONARR_API_KEY
'X-Api-Key': SONARR_API_KEY
}
})
: undefined;

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { env } from '$env/dynamic/public';
import { setJellyfinItemUnwatched, setJellyfinItemWatched } from '$lib/apis/jellyfin/jellyfinApi';
import { JELLYFIN_BASE_URL, RADARR_BASE_URL, SONARR_BASE_URL } from '$lib/constants';
import { library, type LibraryItemStore } from '$lib/stores/library.store';
import type { TitleType } from '$lib/types';
import ContextMenuDivider from './ContextMenuDivider.svelte';
@@ -36,7 +36,7 @@
function handleOpenInJellyfin() {
window.open(
env.PUBLIC_JELLYFIN_URL + '/web/index.html#!/details?id=' + $itemStore.item?.jellyfinItem?.Id
JELLYFIN_BASE_URL + '/web/index.html#!/details?id=' + $itemStore.item?.jellyfinItem?.Id
);
}
</script>
@@ -59,7 +59,7 @@
<ContextMenuItem
disabled={!$itemStore.item.radarrMovie}
on:click={() =>
window.open(env.PUBLIC_RADARR_BASE_URL + '/movie/' + $itemStore.item?.radarrMovie?.tmdbId)}
window.open(RADARR_BASE_URL + '/movie/' + $itemStore.item?.radarrMovie?.tmdbId)}
>
Open in Radarr
</ContextMenuItem>
@@ -67,9 +67,7 @@
<ContextMenuItem
disabled={!$itemStore.item.sonarrSeries}
on:click={() =>
window.open(
env.PUBLIC_SONARR_BASE_URL + '/series/' + $itemStore.item?.sonarrSeries?.titleSlug
)}
window.open(SONARR_BASE_URL + '/series/' + $itemStore.item?.sonarrSeries?.titleSlug)}
>
Open in Sonarr
</ContextMenuItem>

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { env } from '$env/dynamic/public';
import { getDiskSpace } from '$lib/apis/radarr/radarrApi';
import { RADARR_BASE_URL } from '$lib/constants';
import { library } from '$lib/stores/library.store';
import { formatSize } from '$lib/utils.js';
import RadarrIcon from '../svgs/RadarrIcon.svelte';
@@ -46,7 +46,7 @@
{large}
title="Radarr"
subtitle="Movies Provider"
href={env.PUBLIC_RADARR_BASE_URL}
href={RADARR_BASE_URL}
stats={[
{ title: 'Movies', value: String(moviesCount) },
{ title: 'Space Taken', value: formatSize(spaceOccupied) },

View File

@@ -1,6 +1,6 @@
<script lang="ts">
import { env } from '$env/dynamic/public';
import { getDiskSpace } from '$lib/apis/sonarr/sonarrApi';
import { SONARR_BASE_URL } from '$lib/constants';
import { library } from '$lib/stores/library.store';
import { formatSize } from '$lib/utils.js';
import SonarrIcon from '../svgs/SonarrIcon.svelte';
@@ -47,7 +47,7 @@
{large}
title="Sonarr"
subtitle="Shows Provider"
href={env.PUBLIC_SONARR_BASE_URL}
href={SONARR_BASE_URL}
stats={[
{ title: 'Episodes', value: String(episodesCount) },
{ title: 'Space Taken', value: formatSize(spaceOccupied) },

View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { env } from '$env/dynamic/public';
import {
getJellyfinItem,
getJellyfinPlaybackInfo,
@@ -15,6 +14,7 @@
import IconButton from '../IconButton.svelte';
import { playerState } from './VideoPlayer';
import { modalStack } from '../Modal/Modal';
import { JELLYFIN_BASE_URL } from '$lib/constants';
export let modalId: symbol;
@@ -41,7 +41,7 @@
}
video.poster = item?.BackdropImageTags?.length
? `http://jellyfin.home/Items/${item?.Id}/Images/Backdrop?quality=100&tag=${item?.BackdropImageTags?.[0]}`
? `${JELLYFIN_BASE_URL}/Items/${item?.Id}/Images/Backdrop?quality=100&tag=${item?.BackdropImageTags?.[0]}`
: '';
if (!directPlay) {
@@ -51,10 +51,10 @@
const hls = new Hls();
hls.loadSource(env.PUBLIC_JELLYFIN_URL + playbackUri);
hls.loadSource(JELLYFIN_BASE_URL + playbackUri);
hls.attachMedia(video);
} else {
video.src = env.PUBLIC_JELLYFIN_URL + playbackUri;
video.src = JELLYFIN_BASE_URL + playbackUri;
}
if (item?.UserData?.PlaybackPositionTicks) {

View File

@@ -1,6 +1,18 @@
import { env } from '$env/dynamic/public';
export const TMDB_API_KEY =
'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0YTZiMDIxZTE5Y2YxOTljMTM1NGFhMGRiMDZiOTkzMiIsInN1YiI6IjY0ODYzYWRmMDI4ZjE0MDExZTU1MDkwMiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.yyMkZlhGOGBHtw1yvpBVUUHhu7IKVYho49MvNNKt_wY';
export const TMDB_IMAGES_ORIGINAL = 'https://www.themoviedb.org/t/p/original';
export const TMDB_BACKDROP_SMALL = 'https://www.themoviedb.org/t/p/w780';
export const TMDB_POSTER_SMALL = 'https://www.themoviedb.org/t/p/w342';
export const TMDB_PROFILE_SMALL = 'https://www.themoviedb.org/t/p/w185';
export const RADARR_API_KEY = env.PUBLIC_RADARR_API_KEY;
export const RADARR_BASE_URL = env.PUBLIC_RADARR_BASE_URL;
export const SONARR_API_KEY = env.PUBLIC_SONARR_API_KEY;
export const SONARR_BASE_URL = env.PUBLIC_SONARR_BASE_URL;
export const JELLYFIN_API_KEY = env.PUBLIC_JELLYFIN_API_KEY;
export const JELLYFIN_BASE_URL = env.PUBLIC_JELLYFIN_URL || env.PUBLIC_JELLYFIN_BASE_URL; // Backwards compatibility
export const JELLYFIN_USER_ID = env.PUBLIC_JELLYFIN_USER_ID;

View File

@@ -1,5 +1,12 @@
import {
JELLYFIN_API_KEY,
JELLYFIN_BASE_URL,
RADARR_API_KEY,
RADARR_BASE_URL,
SONARR_API_KEY,
SONARR_BASE_URL
} from '$lib/constants';
import type { LayoutLoad } from './$types';
import { env } from '$env/dynamic/public';
// import { dev } from '$app/environment';
// Disable SSR when running the dev server
@@ -19,22 +26,22 @@ export type MissingEnvironmentVariables = {
export const load = (async () => {
const isApplicationSetUp =
!!env.PUBLIC_RADARR_API_KEY &&
!!env.PUBLIC_RADARR_BASE_URL &&
!!env.PUBLIC_SONARR_API_KEY &&
!!env.PUBLIC_SONARR_BASE_URL &&
!!env.PUBLIC_JELLYFIN_API_KEY &&
!!env.PUBLIC_JELLYFIN_URL;
!!RADARR_API_KEY &&
!!RADARR_BASE_URL &&
!!SONARR_API_KEY &&
!!SONARR_BASE_URL &&
!!JELLYFIN_API_KEY &&
!!JELLYFIN_BASE_URL;
return {
isApplicationSetUp,
missingEnvironmentVariables: {
PUBLIC_RADARR_API_KEY: !env.PUBLIC_RADARR_API_KEY,
PUBLIC_RADARR_BASE_URL: !env.PUBLIC_RADARR_BASE_URL,
PUBLIC_SONARR_API_KEY: !env.PUBLIC_SONARR_API_KEY,
PUBLIC_SONARR_BASE_URL: !env.PUBLIC_SONARR_BASE_URL,
PUBLIC_JELLYFIN_API_KEY: !env.PUBLIC_JELLYFIN_API_KEY,
PUBLIC_JELLYFIN_URL: !env.PUBLIC_JELLYFIN_URL
PUBLIC_RADARR_API_KEY: !RADARR_API_KEY,
PUBLIC_RADARR_BASE_URL: !RADARR_BASE_URL,
PUBLIC_SONARR_API_KEY: !SONARR_API_KEY,
PUBLIC_SONARR_BASE_URL: !SONARR_BASE_URL,
PUBLIC_JELLYFIN_API_KEY: !JELLYFIN_API_KEY,
PUBLIC_JELLYFIN_URL: !JELLYFIN_BASE_URL
}
};
}) satisfies LayoutLoad;