diff --git a/src/onboarding.js b/src/onboarding.js index 95a6455..5fa3039 100644 --- a/src/onboarding.js +++ b/src/onboarding.js @@ -23,8 +23,10 @@ export const state = reactive({ auth: null, error: null, connectionHelpDialogOpen: false, + playbackReportingDialogOpen: false, featuresInitialized: false, darkMode: null, + selectedAction: null, }) export async function init(auth) { @@ -98,6 +100,7 @@ export function render() {
${() => state.views[state.currentView]} ${() => state.connectionHelpDialogOpen ? connectionHelpDialog : null} + ${() => state.playbackReportingDialogOpen ? playbackReportingDialog : null}
`(onboardingElement) } @@ -119,22 +122,16 @@ const viewStart = html` ${() => header}
+

Hi there!

-

Before we can get started with your rewind, you'll have to log into your Jellyfin server.

-

Ideally, your server is reachable over the internet and via secure HTTPS, but even if not, there are ways to enjoy your Rewind.

-

Let's get started!

-
+ +

If you're looking for this year's Jellyfin Rewind, you'll have to wait a little longer. Jellyfin Rewind 2023 will launch on December 31st, 2023 (if all goes well).

+

In order to prepare for the launch, make sure your Playback Reporting plugin is installed and set up properly.

+

+ +

If you're instead looking for Jellyfin Rewind 2022, I'm sorry to tell you that it's already closed. You can still download all the files of Jellyfin Rewind 2022 at GitHub, if you really want to check it out, but please be aware that due to missing metadata, your generated stats will possibly not be limited to 2022 only. - + ` @@ -172,13 +169,79 @@ const connectionHelpDialog = html` ` +const playbackReportingDialog = html` +

+
+
+
+

Setting up Playback Reporting

+ +
+
+
+

Jellyfin doesn't save any information about played tracks other than the number of times they were played. This means that e.g. the total playtime is only an approximation. It also means that it is not possible to limit the data to a specific time frame, like 2023 only!

+

However, if you have the "Playback Reporting" plugin installed, significantly more information can be collected, such as the date and durations of each playback. This will result in better stats, although it isn't perfect either. Playback reporting depends on applications properly reporting the current playback states, and currently most music players that are compatible with Jellyfin seem to struggle with this in one way or another. Especially offline playback is challenging, because the players have to "simulate" the playback after the device reconnects to the server.

+

Still, the best solution is to install the Playback Reporting plugin into your Jellyfin server if you haven't done so already. It won't take longer than 2 minutes, so why not do it right now? (You'll have to be logged in as an admin user.)

+ ${() => state.server.url !== `` ? html` + Open Plugins Page! + ` : html` + + ` + } +

By default, the Playback Reporting plugin only stores the last 3 months worth of playback data, so you definitely want to change that in the settings. I'd suggest keeping at least the last two years, just to be safe. The button below will take you directly to the settings page.

+ ${() => state.server.url !== `` ? html` + Open Playback Reporting Settings! + ` : html` + + ` + } +

For more information about the Playback Reporting plugin, you can visit its entry in the official Jellyfin Docs.

+

I will try to offer a way to import 2022's Rewind data into Jellyfin Rewind 2023, so that more information can be used and the used data can be properly limited to the current year only.

+
+
+
+
+ +` + async function connect() { state.error = null state.server.url = document.querySelector(`#onboarding-server-url`).value try { state.server.users = await connectToServer(state.auth, state.server.url) - state.currentView = `user` + // state.currentView = `user` + + state.playbackReportingDialogOpen = true + state.currentView = `start` + + if (state.selectedAction) { + if (state.selectedAction === `openPluginsPage`) { + window.open(`${state.auth.config.baseUrl}/web/index.html#!/addplugin.html?name=Playback%20Reporting&guid=5c53438191a343cb907a35aa02eb9d2c`, `_blank`) + } else if (state.selectedAction === `openPlaybackReportingSettings`) { + window.open(`${state.auth.config.baseUrl}/web/index.html#!/configurationpage?name=playback_report_settings`, `_blank`) + } + } + } catch (err) { + console.error(`Error while connecting to the server:`, err) state.error = html`
@@ -187,6 +250,14 @@ async function connect() {
` + + // try anyway, in case of CORS issues but correct URL + if (state.selectedAction === `openPluginsPage`) { + window.open(`${state.auth.config.baseUrl}/web/index.html#!/addplugin.html?name=Playback%20Reporting&guid=5c53438191a343cb907a35aa02eb9d2c`, `_blank`) + } else if (state.selectedAction === `openPlaybackReportingSettings`) { + window.open(`${state.auth.config.baseUrl}/web/index.html#!/configurationpage?name=playback_report_settings`, `_blank`) + } + } } @@ -196,7 +267,8 @@ const viewServer = html` ${() => header}
-

First, type in the web address (URL) of your Jellyfin server.

+

In order to open this page, you'll need to configure your Jellyfin server's URL:

+

Type in the web address (URL) of your Jellyfin server in the field below.

If you don't know the URL, you can open your Jellyfin app, open the menu/sidebar and click on "Select Server". It should display your server's URL and you can easily copy it!