Skip to content

Commit

Permalink
fixes & improvements ✨
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chaphasilor
Chaphasilor committed Dec 31, 2022
1 parent ef76c90 commit 8a3665d
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 21 deletions.
5 changes: 3 additions & 2 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,9 @@ window.onload = async () => {
init()
}

helper = new JellyHelper(jellyfinRewind.auth)
window.helper = helper

await Onboarding.init(jellyfinRewind.auth)
Onboarding.render()

Expand Down Expand Up @@ -296,8 +299,6 @@ function init() {
})
generateReport.classList.remove(`hidden`)
showReport.classList.remove(`hidden`)
helper = new JellyHelper(jellyfinRewind.auth)
window.helper = helper
}

async function generateRewindReport() {
Expand Down
3 changes: 3 additions & 0 deletions src/auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,9 @@ export default class Auth {

destroySession() {
localStorage.removeItem('session');
localStorage.removeItem('rewindReport');
localStorage.removeItem('rewindReportLight');
localStorage.removeItem('rewindReportDownloaded');
this.config = this.baseConfig;
}

Expand Down
16 changes: 8 additions & 8 deletions src/features.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ state.features = [
${() => state.extraFeatures.totalPlaytimeGraph ? html`<br>` : html`
<div class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center gap-12">
<span class="text-4xl rotate-12 text-sky-900 tracking-wider font-semibold">Unavailable</span>
<button @click="${stopPropagation(() => showOverlayFeatureUnavailableMissingPlaybackReporting())}" class="w-32 rounded-md flex flex-row items-center justify-around px-2 py-1 bg-white/80">
<button @click="${stopPropagation(() => showOverlayFeatureUnavailableMissingPlaybackReporting())}" class="w-32 rounded-md flex flex-row items-center justify-around px-2 py-1 bg-white text-gray-800">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 icon icon-tabler icon-tabler-info-square-rounded" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 8h.01"></path>
Expand Down Expand Up @@ -208,7 +208,7 @@ state.features = [
<span class="font-semibold text-base mr-2">${() => index + 1}.</span>
<span class="font-semibold text-base leading-tight text-ellipsis overflow-hidden">${() => track.name}</span>
</div>
<span class="text-sm ml-2 text-ellipsis overflow-hidden">by ${() =>
<span class="text-sm ml-2 max-h-[2rem] text-ellipsis overflow-hidden">by ${() =>
state.settings.useAlbumArtists ?
track.albumBaseInfo.albumArtistBaseInfo.name :
track.artistsBaseInfo
Expand Down Expand Up @@ -243,7 +243,7 @@ state.features = [
<span class="font-semibold mr-2">${() => index + 1 + 5}.</span>
<span class="font-base leading-tight text-ellipsis overflow-hidden">${() => track.name}</span>
</div>
<div class="ml-6 text-xs">by <span class="font-semibold text-ellipsis overflow-hidden">${() =>
<div class="ml-6 max-h-[2rem] text-xs">by <span class="font-semibold text-ellipsis overflow-hidden">${() =>
state.settings.useAlbumArtists ?
track.albumBaseInfo.albumArtistBaseInfo.name :
track.artistsBaseInfo
Expand Down Expand Up @@ -402,11 +402,11 @@ state.features = [
<span class="font-semibold text-base mr-2">${() => index + 1}.</span>
<span class="font-semibold text-base leading-tight text-ellipsis overflow-hidden">${() => album.name}</span>
</div>
<span class="text-sm ml-2 text-ellipsis overflow-hidden">by ${() =>
<span class="text-sm ml-2 max-h-[2rem] text-ellipsis overflow-hidden">by ${() =>
state.settings.useAlbumArtists ?
album.albumArtist.name :
album.artists
.reduce((acc, cur, index) => index > 0 ? `${acc} & ${cur.name}` : cur.name, ``)
?.reduce((acc, cur, index) => index > 0 ? `${acc} & ${cur.name}` : cur.name, ``) || `Unknown Artist`
}</span>
</div>
<div class="flex flex-row justify-start font-medium text-gray-800 dark:text-gray-300 gap-0.5 items-center text-xs">
Expand Down Expand Up @@ -437,11 +437,11 @@ state.features = [
<span class="font-semibold mr-2">${() => index + 1 + 5}.</span>
<span class="font-base leading-tight text-ellipsis overflow-hidden">${() => album.name}</span>
</div>
<div class="ml-6 text-xs">by <span class="font-semibold">${() =>
<div class="ml-6 max-h-[2rem] text-xs">by <span class="font-semibold">${() =>
state.settings.useAlbumArtists ?
album.albumArtist.name :
album.artists
.reduce((acc, cur, index) => index > 0 ? `${acc} & ${cur.name}` : cur.name, ``)
?.reduce((acc, cur, index) => index > 0 ? `${acc} & ${cur.name}` : cur.name, ``) || `Unknown Artist`
}</span>
</div>
<!--
Expand Down Expand Up @@ -756,7 +756,7 @@ function showOverlayFeatureUnavailableMissingPlaybackReporting() {
const settings = html`
${() =>
!state.extraFeatures.fullReport ? html`
<p class="text-sm text-gray-500 dark:text-gray-400">Jellyfin Rewind is using a 'light' version of the Rewind report, therefore some settings are not available.</p>
<p class="text-sm text-orange-500 dark:text-orange-400">Jellyfin Rewind is using a 'light' version of the Rewind report, therefore some settings are not available.</p>
<p class="text-sm mt-1 mb-3 text-gray-500 dark:text-gray-400">To access all settings, please <button @click="${() => {
closeFeatures() // close settings
closeFeatures() // close features
Expand Down
66 changes: 58 additions & 8 deletions src/onboarding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export const state = reactive({
staleReport: false,
progress: 0,
auth: null,
error: null,
connectionHelpDialogOpen: false,
featuresInitialized: false,
darkMode: null,
})
Expand Down Expand Up @@ -95,6 +97,7 @@ export function render() {
html`
<div class="">
${() => state.views[state.currentView]}
${() => state.connectionHelpDialogOpen ? connectionHelpDialog : null}
</div>
`(onboardingElement)
}
Expand Down Expand Up @@ -136,10 +139,55 @@ const viewStart = html`
</div>
`

const connectionHelpDialog = html`
<div class="fixed top-0 left-0 w-full h-full px-6 py-16 md:py-32 lg:py-48 xl:py-64">
<div @click="${() => state.connectionHelpDialogOpen = false}" class="absolute top-0 left-0 w-full h-full bg-black/20"></div>
<div class="w-full h-full bg-white/80 dark:bg-black/90 dark:text-white pb-20 backdrop-blur dark:backdrop-blur-sm rounded-xl">
<div class="relative w-full flex flex-row justify-center items-center px-2 pt-4 pb-2">
<h3 class="text-center text-lg font-quicksand font-medium text-[#00A4DC]">How to Connect?</h3>
<button @click="${() => state.connectionHelpDialogOpen = false}" class="absolute right-2 text-[#00A4DC] hover:text-[#0085B2]">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="w-full h-full overflow-x-auto p-4">
<div class="flex flex-col items-start gap-2">
<p>Make sure your using the same protocol (https or http) as your server is using.</p>
<p>Make sure you're not using a local IP address or mDNS hostname. For example, you could use your server's Tailscale IP address, if you use Tailscale as your VPN.</p>
<p>Because Jellyfin Rewind is web-based and (for now at least) not available as a plugin, it might be a bit tricky to get your browser to communicate with your Jellyfin server. The problem is that browsers won't allow "insecure" requests (http) from a "secure" website (http<span class="font-semibold">s</span>).</p>
<p>Therefore, <span class="font-semibold">if you're unsure what your Jellyfin server is using, simply use the first link</span> (http)!</p>
<p>Here are the links to the Jellyfin Rewind website:</p>
<p><span class="font-semibold">HTTP</span><br>(works for both http and https Jellyfin servers, but some things might not work correctly):<br><a class="text-[#00A4DC]" href="http://jellyfin-rewind-http.chaphasilor.xyz">http://jellyfin-rewind-http.chaphasilor.xyz</a></p>
<p><span class="font-semibold">HTTPS</span><br>(if your Jellyfin server has an https connection, this is the best experience):<br><a class="text-[#00A4DC]" href="https://jellyfin-rewind.chaphasilor.xyz">https://jellyfin-rewind.chaphasilor.xyz</a></p>
<!-- TODO add more -->
<br>
<p>Advanced users can also <a class="text-[#00A4DC]" href="https://github.com/Chaphasilor/jellyfin-rewind/releases" target="_blank">download the zip-archive</a> and use a local web server to serve the files, because local IPs/domains are treated differently by browsers.</p>
</div>
</div>
</div>
</div>
</div>
`

async function connect() {
state.error = null
state.server.url = document.querySelector(`#onboarding-server-url`).value
state.server.users = await connectToServer(state.auth, state.server.url)
state.currentView = `user`
try {
state.server.users = await connectToServer(state.auth, state.server.url)
state.currentView = `user`
} catch (err) {
console.error(`Error while connecting to the server:`, err)
state.error = html`
<div class="flex flex-col items-start gap-1 text-base font-medium leading-6 text-red-500 dark:text-red-400 mt-10 w-5/6 mx-auto">
<p class="">There was an error while connecting to the server.</p>
<p class="">Please check the URL and try again.</p>
<button class="self-center text-[#00A4DC] font-semibold px-3 py-1 rounded-md bg-orange-500 dark:text-white" @click="${() => state.connectionHelpDialogOpen = true}">Help me!?</button>
</div>
`
}
}

const viewServer = html`
Expand All @@ -158,7 +206,7 @@ const viewServer = html`
<input
id="onboarding-server-url"
name="server-url"
class="px-3 py-1.5 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none"
class="px-3 py-1.5 dark:bg-[#101010] dark:text-gray-200 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none"
type="text"
placeholder="e.g. https://demo.jellyfin.org"
@keydown="${(e) => e?.key?.toLowerCase() === `enter` && connect()}"
Expand All @@ -167,7 +215,7 @@ const viewServer = html`
</form>
<button
class="px-7 py-3 rounded-2xl text-[1.4rem] bg-[#00A4DC] hover:bg-[#0085B2] text-white font-semibold mt-20 flex flex-row gap-4 items-center mx-auto"
class="px-7 py-3 rounded-2xl text-[1.4rem] bg-[#00A4DC] hover:bg-[#0085B2] text-white font-semibold mt-12 flex flex-row gap-4 items-center mx-auto"
@click="${() => connect()}"
>
<span>Connect</span>
Expand All @@ -177,6 +225,8 @@ const viewServer = html`
</svg>
</button>
${() => state.error}
</div>
`

Expand Down Expand Up @@ -279,7 +329,7 @@ const viewLogin = html`
<label class="flex flex-col gap-1">
<span class="text-sm ml-1.5 font-medium">Username</span>
<input
class="${() => `px-3 py-1.5 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none ${state.server.selectedUser ? `font-semibold text-gray-500` : `text-gray-700`}`}"
class="${() => `px-3 py-1.5 dark:bg-[#101010] dark:text-gray-200 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none ${state.server.selectedUser ? `font-semibold text-gray-500` : `text-gray-700`}`}"
id="onboarding-username"
name="username"
type="text"
Expand All @@ -291,7 +341,7 @@ const viewLogin = html`
<label class="flex flex-col gap-1">
<span class="text-sm ml-1.5 font-medium">Password</span>
<input
class="px-3 py-1.5 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none"
class="px-3 py-1.5 dark:bg-[#101010] dark:text-gray-200 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none"
id="onboarding-password"
name="password"
type="password"
Expand All @@ -303,7 +353,7 @@ const viewLogin = html`
<label class="flex flex-col gap-1">
<span class="text-sm ml-1.5 font-medium">Auth Token</span>
<input
class="px-3 py-1.5 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none"
class="px-3 py-1.5 dark:bg-[#101010] dark:text-gray-200 rounded-lg focus:ring-1 focus:ring-[#00A4DC] focus:outline-none"
id="onboarding-auth-token"
name="auth-token"
type="text"
Expand Down Expand Up @@ -331,7 +381,7 @@ const viewLogin = html`

const progressBar = html`
<div class="w-5/6 mx-auto mt-10 flex h-8 flex-row gap-4 justify-left">
<!-- <img class="inline h-full animate-spin" src="/media/jellyfin-icon-transparent.svg" /> -->
<img class="${() => `inline h-full ${state.progress < 1 ? `animate-spin` : ``}`}" src="/media/jellyfin-icon-transparent.svg" />
<div class="w-full flex flex-row gap-2 items-center bg-white dark:bg-[#101010] rounded-full">
<div
class="h-full rounded-full bg-fixed bg-gradient-to-r from-[#AA5CC3] to-[#00A4DC]"
Expand Down
6 changes: 3 additions & 3 deletions src/rewind.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -332,15 +332,15 @@ async function generateRewindReport(year, progressCallback = () => {}) {
// }

const allItemInfo = (await loadItemInfo()).Items;
progressCallback(0.4)
progressCallback(0.3)

console.log(`allItemInfo:`, allItemInfo)

const allItemInfoIndexed = indexItemInfo(allItemInfo)
progressCallback(0.5)
progressCallback(0.4)

const enhancedPlaybackReportJSON = adjustPlaybackReportJSON(playbackReportJSON, allItemInfoIndexed)
progressCallback(0.55)
progressCallback(0.5)
const indexedPlaybackReport = indexPlaybackReport(enhancedPlaybackReportJSON)
console.log(`indexedPlaybackReport:`, indexedPlaybackReport)
progressCallback(0.6)
Expand Down

0 comments on commit 8a3665d

Please sign in to comment.