Skip to content

Commit

Permalink
Merge pull request #2 from Chaphasilor/dev
Browse files Browse the repository at this point in the history 
Everything Working™
  • Loading branch information
@Chaphasilor
Chaphasilor authored Dec 31, 2022
2 parents 6395080 + 8a3665d commit 0bc3572
Show file tree
Hide file tree
Showing 11 changed files with 1,128 additions and 1,742 deletions.
22 changes: 15 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,12 @@
<title>Jellyfin Rewind</title>

</head>
<body>
<body class="w-full h-full bg-[#00A4DC]/10 dark:bg-[#000B25] dark:text-white">
<div id="app"></div>

<div class="p-2">
<div id="onboarding"></div>

<div class="p-2 hidden">

<div class="flex flex-row hidden gap-4" id="logged-in-info">
<div class="flex flex-col">
Expand All @@ -22,23 +24,29 @@

<div id="server-config">
<label for="serverUrl">Server URL:</label>
<input class="border border-gray-500 p-1 rounded" type="text" name="serverUrl" id="serverUrl">
<input class="border border-gray-500 text-black p-1 rounded" type="text" name="serverUrl" id="serverUrl">
<button class="border-2 border-blue-600 rounded-md p-3 hover:bg-blue-200" id="connectToServer" type="button">Connect!</button>
</div>

<ul id="user-select" class="hidden flex flex-col p-2 gap-3">
<li id="manual-user" class="rounded-md p-2 italic cursor-pointer hover:bg-blue-200">Manual User Input</li>
</ul>

<div id="user-login" class="hidden">

<span id="username-input" class="hidden">
<label for="username">Username:</label>
<input class="border border-gray-500 p-1 rounded" type="text" name="username" id="username">
<input class="border border-gray-500 text-black p-1 rounded" type="text" name="username" id="username">
</span>

<label for="password">Password:</label>
<input class="border border-gray-500 p-1 rounded" type="password" name="password" id="password">
<span id="password-input" class="hidden">
<label for="password">Password:</label>
<input class="border border-gray-500 text-black p-1 rounded" type="password" name="password" id="password">
</span>

<span id="auth-token-input" class="hidden">
<label for="auth-token">Auth Token:</label>
<input class="border border-gray-500 text-black p-1 rounded" type="text" name="auth-token" id="auth-token">
</span>

<button id="authenticateUser" class="border-2 border-blue-600 rounded-md p-3 hover:bg-blue-200" type="button">Log In!</button>
</div>
Expand Down
172 changes: 134 additions & 38 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import './style.css'

import { reactive, html } from '@arrow-js/core'
import { reactive, watch, html, } from '@arrow-js/core'

import javascriptLogo from './javascript.svg'
import * as jellyfinRewind from './src/rewind.js'
import JellyHelper from './src/jelly-helper.js'

import * as Onboarding from './src/onboarding.js'
import * as Features from './src/features.js'

document.querySelector('#app').innerHTML = `
Expand Down Expand Up @@ -34,10 +34,12 @@ const serverUrl = document.querySelector(`#serverUrl`)
const serverConfig = document.querySelector(`#server-config`)
const userSelect = document.querySelector(`#user-select`)
const userLogin = document.querySelector(`#user-login`)
const manualUser = document.querySelector(`#manual-user`)
const usernameInput = document.querySelector(`#username-input`)
const authTokenInput = document.querySelector(`#auth-token-input`)
const passwordInput = document.querySelector(`#password-input`)
const username = document.querySelector(`#username`)
const password = document.querySelector(`#password`)
const authToken = document.querySelector(`#auth-token`)
const authenticateUser = document.querySelector(`#authenticateUser`)
const showReport = document.querySelector(`#show-report`)
const generateReport = document.querySelector(`#generate-report`)
Expand All @@ -53,8 +55,10 @@ let selectedUsername = ``
let featuresInitialized = false
let staleReport = false

window.onload = () => {
window.onload = async () => {

window.jellyfinRewind = jellyfinRewind

console.log(`commit hash:`, __COMMITHASH__)

if (jellyfinRewind.auth.restoreSession()) {
Expand All @@ -63,6 +67,12 @@ window.onload = () => {
serverConfig.classList.add(`hidden`)
init()
}

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

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

}

Expand Down Expand Up @@ -101,39 +111,107 @@ async function connectToServer() {
function showUsers() {

userSelect.classList.remove(`hidden`)

html`
${() => userInfo.map(user => html`
<li>
<button
class="rounded-xl p-2 w-full flex flex-row items-center justify-start gap-4 bg-white dark:bg-[#00A4DC] cursor-pointer focus:bg-[#0085B2] hover:bg-[#0085B2]"
data-user-id=${user.Id}
@click="${() => {
selectedUsername = user.Name
console.info(`User selected:`, user)
password.removeEventListener(`keydown`, login(user.Id))
password.addEventListener(`keydown`, login(user.Id))
authenticateUser.removeEventListener(`click`, login(user.Id))
authenticateUser.addEventListener(`click`, login(user.Id))
userLogin.classList.remove(`hidden`)
passwordInput.classList.remove(`hidden`)
userSelect.classList.add(`hidden`)
}}"
>
<img class="w-12 h-12 rounded-md" src="${() => user.PrimaryImageTag ? `${jellyfinRewind.auth.config.baseUrl}/Users/${user.Id}/Images/Primary?tag=${user.PrimaryImageTag}` : `/media/ArtistPlaceholder.png`}" />
<span class="text-lg">${user.Name}</span>
</button>
</li>
`)}
<li>
<button
class="rounded-xl p-2 w-full flex flex-row items-center justify-center gap-4 bg-white dark:bg-[#00A4DC] cursor-pointer focus:bg-[#0085B2] hover:bg-[#0085B2]"
@click="${() => {
userLogin.classList.remove(`hidden`)
usernameInput.classList.remove(`hidden`)
passwordInput.classList.remove(`hidden`)
userSelect.classList.add(`hidden`)
username.addEventListener(`keyup`, () => {
if (username.value.length > 0) {
authenticateUser.classList.remove(`hidden`)
selectedUsername = username.value
} else {
authenticateUser.classList.add(`hidden`)
}
})
password.removeEventListener(`keydown`, login(``))
password.addEventListener(`keydown`, login(``))
authenticateUser.removeEventListener(`click`, login(``))
authenticateUser.addEventListener(`click`, login(``))
}}"
>
<span class="italic">Manually enter username</span>
</button>
</li>
<li>
<button
class="rounded-xl p-2 w-full flex flex-row items-center justify-center gap-4 bg-white dark:bg-[#00A4DC] cursor-pointer focus:bg-[#0085B2] hover:bg-[#0085B2]"
@click="${() => {
userLogin.classList.remove(`hidden`)
authTokenInput.classList.remove(`hidden`)
userSelect.classList.add(`hidden`)
authToken.removeEventListener(`keydown`, loginWithAuthToken())
authToken.addEventListener(`keydown`, loginWithAuthToken())
authenticateUser.removeEventListener(`click`, loginWithAuthToken())
authenticateUser.addEventListener(`click`, loginWithAuthToken())
}}"
>
<span class="italic">Log in via auth token</span>
</button>
</li>
`(userSelect)

manualUser.addEventListener(`click`, () => {
userLogin.classList.remove(`hidden`)
usernameInput.classList.remove(`hidden`)
userSelect.classList.add(`hidden`)
username.addEventListener(`keyup`, () => {
selectedUsername = username.value
})
authenticateUser.removeEventListener(`click`, login(``))
authenticateUser.addEventListener(`click`, login(``))
password.removeEventListener(`keydown`, login(``))
password.addEventListener(`keydown`, login(``))
})
// manualUser.addEventListener(`click`, () => {
// userLogin.classList.remove(`hidden`)
// usernameInput.classList.remove(`hidden`)
// userSelect.classList.add(`hidden`)
// username.addEventListener(`keyup`, () => {
// selectedUsername = username.value
// })
// authenticateUser.removeEventListener(`click`, login(``))
// authenticateUser.addEventListener(`click`, login(``))
// password.removeEventListener(`keydown`, login(``))
// password.addEventListener(`keydown`, login(``))
// })

userInfo.forEach(user => {
const li = document.createElement(`li`)
const button = document.createElement(`button`)
button.textContent = user.Name
button.setAttribute(`data-user-id`, user.Id)
button.classList.add(`rounded-md`, `p-2`, `cursor-pointer`, `focus:bg-blue-200`, `hover:bg-blue-200`)
button.addEventListener(`click`, () => {
userLogin.classList.remove(`hidden`)
selectedUsername = user.Name
console.info(`User selected:`, user)
userSelect.classList.add(`hidden`)
authenticateUser.removeEventListener(`click`, login(user.Id))
authenticateUser.addEventListener(`click`, login(user.Id))
password.removeEventListener(`keydown`, login(user.Id))
password.addEventListener(`keydown`, login(user.Id))
})
li.appendChild(button)
userSelect.appendChild(li)
})
// userInfo.forEach(user => {
// const li = document.createElement(`li`)
// const button = document.createElement(`button`)
// button.textContent = user.Name
// button.setAttribute(`data-user-id`, user.Id)
// button.classList.add(`rounded-md`, `p-2`, `cursor-pointer`, `focus:bg-blue-200`, `hover:bg-blue-200`)
// button.addEventListener(`click`, () => {
// userLogin.classList.remove(`hidden`)
// selectedUsername = user.Name
// console.info(`User selected:`, user)
// userSelect.classList.add(`hidden`)
// authenticateUser.removeEventListener(`click`, login(user.Id))
// authenticateUser.addEventListener(`click`, login(user.Id))
// password.removeEventListener(`keydown`, login(user.Id))
// password.addEventListener(`keydown`, login(user.Id))
// })
// li.appendChild(button)
// userSelect.appendChild(li)
// })
}

const login = (userId) => async (event) => {
Expand All @@ -157,6 +235,27 @@ const login = (userId) => async (event) => {
}
}

const loginWithAuthToken = () => async (event) => {

if (event.type !== `click` && event.key !== `Enter`) {
return
}

try {

await jellyfinRewind.auth.authenticateUserViaToken(authToken.value)
console.info(`Successfully logged in as ${jellyfinRewind.auth.config.name}`)
jellyfinRewind.auth.saveSession()
enableLogout()

userLogin.classList.add(`hidden`)
init()

} catch (err) {
console.error(`Error while logging in:`, err)
}
}

function init() {
showReport.addEventListener(`click`, async () => {
let rewindReportData = null
Expand Down Expand Up @@ -200,7 +299,6 @@ function init() {
})
generateReport.classList.remove(`hidden`)
showReport.classList.remove(`hidden`)
helper = new JellyHelper(jellyfinRewind.auth)
}

async function generateRewindReport() {
Expand All @@ -227,7 +325,6 @@ async function generateRewindReport() {
return reportData

}
window.generateRewindReport = generateRewindReport

function testShowRewindReport(report) {

Expand Down Expand Up @@ -263,7 +360,6 @@ function initializeFeatureStory(report) {
}

}
window.initializeFeatureStory = initializeFeatureStory

function downloadRewindReportData(reportData, skipVerification) {
if (reportData.rawData || skipVerification || confirm(`The report you're about to download is incomplete and missing some data. Please re-generate and download the report without reloading the page in-between. Do you want to download the incomplete report anyway?`)) {
Expand Down
Loading

0 comments on commit 0bc3572

Please sign in to comment.