fix: mobile settings and video player

This commit is contained in:
ThaUnknown 2024-03-19 20:08:00 +01:00
parent b1e81af397
commit e412bda820
8 changed files with 91 additions and 85 deletions

View file

@ -1,6 +1,6 @@
{
"name": "capacitor",
"version": "1.0.5",
"version": "1.0.9",
"private": true,
"scripts": {
"build:native": "cd public/nodejs/ && npm install && docker build -t android-build:latest . && docker run -v ${PWD}:/app/ -it android-build:latest /bin/bash /app/setup-deps.sh",

View file

@ -10,5 +10,6 @@ export const SUPPORTS = {
torrentPort: true,
torrentPath: false,
torrentPersist: false,
keybinds: false
keybinds: false,
isAndroid: true
}

View file

@ -5,6 +5,11 @@ const CopyWebpackPlugin = require('copy-webpack-plugin')
const mode = process.env.NODE_ENV?.trim() || 'development'
const alias = {
'@/modules/ipc.js': join(__dirname, 'src', 'ipc.js'),
'@/modules/support.js': join(__dirname, 'src', 'support.js')
}
/** @type {import('webpack').Configuration} */
const capacitorConfig = {
devtool: 'source-map',
@ -22,6 +27,7 @@ const capacitorConfig = {
aliasFields: [],
mainFields: ['module', 'main', 'node'],
alias: {
...alias,
wrtc: false,
'bittorrent-tracker/lib/client/http-tracker.js': resolve('../node_modules/bittorrent-tracker/lib/client/http-tracker.js')
}
@ -46,9 +52,4 @@ const capacitorConfig = {
]
}
const alias = {
'@/modules/ipc.js': join(__dirname, 'src', 'ipc.js'),
'@/modules/support.js': join(__dirname, 'src', 'support.js')
}
module.exports = [capacitorConfig, merge(commonConfig(__dirname, alias, 'browser', 'index'), { entry: [join(__dirname, 'src', 'capacitor.js')] })]

View file

@ -11,5 +11,6 @@ export const SUPPORTS = {
torrentPath: true,
torrentPersist: true,
keybinds: true,
extensions: true
extensions: true,
isAndroid: false
}

View file

@ -1,4 +1,4 @@
import { SUPPORTS } from './support.js'
import { SUPPORTS } from '@/modules/support.js'
export function countdown (s) {
const d = Math.floor(s / (3600 * 24))
@ -152,7 +152,7 @@ export const defaults = {
playerAutocomplete: true,
playerDeband: false,
rssQuality: '1080',
rssFeedsNew: [['New Releases', 'SubsPlease']],
rssFeedsNew: SUPPORTS.extensions ? [['New Releases', 'SubsPlease']] : [],
rssAutoplay: true,
torrentSpeed: 5,
torrentPersist: false,
@ -162,12 +162,12 @@ export const defaults = {
dhtPort: 0,
missingFont: true,
maxConns: 50,
subtitleRenderHeight: '0',
subtitleRenderHeight: SUPPORTS.isAndroid ? '720' : '0',
subtitleLanguage: 'eng',
audioLanguage: 'jpn',
enableDoH: false,
doHURL: 'https://cloudflare-dns.com/dns-query',
disableSubtitleBlur: false,
disableSubtitleBlur: SUPPORTS.isAndroid,
showDetailsInRPC: true,
smoothScroll: true,
cards: 'small',
@ -175,6 +175,7 @@ export const defaults = {
torrentPath: undefined,
font: undefined,
angle: 'default',
toshoURL: SUPPORTS.extensions ? decodeURIComponent(atob('aHR0cHM6Ly9mZWVkLmFuaW1ldG9zaG8ub3JnLw==')) : '',
extensions: SUPPORTS.extensions ? ['@thaunknown/ani-resourced'] : [],
sources: {}
}

View file

@ -1036,11 +1036,11 @@
<!-- eslint-disable-next-line svelte/valid-compile -->
<div class='w-full h-full position-absolute toggle-immerse d-none' on:dblclick={toggleFullscreen} on:click|self={toggleImmerse} />
<div class='w-full h-full position-absolute mobile-focus-target d-none' use:click={() => { page = 'player' }} />
<span class='d-none d-md-block material-symbols-outlined ctrl' class:text-muted={!hasLast} class:disabled={!hasLast} use:click={playLast}> skip_previous </span>
<span class='d-none d-md-block material-symbols-outlined ctrl' use:click={rewind}> fast_rewind </span>
<span class='d-none d-md-block material-symbols-outlined ctrl' data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
<span class='d-none d-md-block material-symbols-outlined ctrl' use:click={forward}> fast_forward </span>
<span class='d-none d-md-block material-symbols-outlined ctrl' class:text-muted={!hasNext} class:disabled={!hasNext} use:click={playNext}> skip_next </span>
<span class='d-md-block material-symbols-outlined ctrl' class:d-none={miniplayer} class:text-muted={!hasLast} class:disabled={!hasLast} use:click={playLast}> skip_previous </span>
<span class='d-md-block material-symbols-outlined ctrl' class:d-none={miniplayer} use:click={rewind}> fast_rewind </span>
<span class='d-md-block material-symbols-outlined ctrl' class:d-none={miniplayer} data-name='playPause' use:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
<span class='d-md-block material-symbols-outlined ctrl' class:d-none={miniplayer} use:click={forward}> fast_forward </span>
<span class='d-md-block material-symbols-outlined ctrl' class:d-none={miniplayer} class:text-muted={!hasNext} class:disabled={!hasNext} use:click={playNext}> skip_next </span>
<div class='position-absolute bufferingDisplay' />
{#if currentSkippable}
<button class='skip btn text-dark position-absolute bottom-0 right-0 mr-20 mb-5 font-weight-bold' use:click={skip}>
@ -1074,11 +1074,11 @@
<span class='material-symbols-outlined ctrl' title='Mute [M]' data-name='toggleMute' use:click={toggleMute}> {muted ? 'volume_off' : 'volume_up'} </span>
<input class='ctrl h-full custom-range' type='range' min='0' max='1' step='any' data-name='setVolume' bind:value={volume} />
</div>
<div class='ts'>{toTS(targetTime, safeduration > 3600 ? 2 : 3)} / {toTS(safeduration - targetTime, safeduration > 3600 ? 2 : 3)}</div>
<div class='ts' class:mr-auto={playbackRate === 1}>{toTS(targetTime, safeduration > 3600 ? 2 : 3)} / {toTS(safeduration - targetTime, safeduration > 3600 ? 2 : 3)}</div>
{#if playbackRate !== 1}
<div class='ts'>x{playbackRate.toFixed(1)}</div>
<div class='ts mr-auto'>x{playbackRate.toFixed(1)}</div>
{/if}
<span class='ml-auto material-symbols-outlined ctrl keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}> keyboard </span>
<span class='material-symbols-outlined ctrl keybinds' title='Keybinds [`]' use:click={() => (showKeybinds = true)}> keyboard </span>
{#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
<div class='dropdown dropup with-arrow' use:click={toggleDropdown}>
<span class='material-symbols-outlined ctrl' title='Audio Tracks'>

View file

@ -34,22 +34,22 @@
<label for='player-missingFont'>{settings.missingFont ? 'On' : 'Off'}</label>
</div>
</SettingCard>
<SettingCard title='Fast Subtitle Rendering' description='Disables blur when rendering subtitles reducing lag. Will cause text and subtitle edges to appear sharper and in rare cases might break styling. If you want better rendering speeds without sacrificing accuracy lower the render resolution limit.'>
<div class='custom-switch'>
<input type='checkbox' id='player-sub-blur' bind:checked={settings.disableSubtitleBlur} />
<label for='player-sub-blur'>{settings.disableSubtitleBlur ? 'On' : 'Off'}</label>
</div>
</SettingCard>
<SettingCard title='Subtitle Render Resolution Limit' description="Max resolution to render subtitles at. If your resolution is higher than this setting the subtitles will be upscaled lineary. This will GREATLY improve rendering speeds for complex typesetting for slower devices. It's best to lower this on mobile devices which often have high pixel density where their effective resolution might be ~1440p while having small screens and slow processors.">
<select class='form-control bg-dark w-300 mw-full' bind:value={settings.subtitleRenderHeight}>
<option value='0' selected>None</option>
<option value='1440'>1440p</option>
<option value='1080'>1080p</option>
<option value='720'>720p</option>
<option value='480'>480p</option>
</select>
</SettingCard>
{/if}
<SettingCard title='Fast Subtitle Rendering' description='Disables blur when rendering subtitles reducing lag. Will cause text and subtitle edges to appear sharper and in rare cases might break styling. If you want better rendering speeds without sacrificing accuracy lower the render resolution limit.'>
<div class='custom-switch'>
<input type='checkbox' id='player-sub-blur' bind:checked={settings.disableSubtitleBlur} />
<label for='player-sub-blur'>{settings.disableSubtitleBlur ? 'On' : 'Off'}</label>
</div>
</SettingCard>
<SettingCard title='Subtitle Render Resolution Limit' description="Max resolution to render subtitles at. If your resolution is higher than this setting the subtitles will be upscaled lineary. This will GREATLY improve rendering speeds for complex typesetting for slower devices. It's best to lower this on mobile devices which often have high pixel density where their effective resolution might be ~1440p while having small screens and slow processors.">
<select class='form-control bg-dark w-300 mw-full' bind:value={settings.subtitleRenderHeight}>
<option value='0' selected>None</option>
<option value='1440'>1440p</option>
<option value='1080'>1080p</option>
<option value='720'>720p</option>
<option value='480'>480p</option>
</select>
</SettingCard>
<h4 class='mb-10 font-weight-bold'>Language Settings</h4>
<SettingCard title='Preferred Subtitle Language' description="What subtitle language to automatically select when a video is loaded if it exists. This won't find torrents with this language automatically. If not found defaults to English.">

View file

@ -59,7 +59,59 @@
}
</script>
<h4 class='mb-10 font-weight-bold'>Extension Settings</h4>
<SettingCard title='Extensions' description='List of URLs to load sources from. While the extensions are sandboxed and should be safe from attacks, it is not recommended to add unknown or untrusted extensions.'>
<div>
<div class='input-group w-400 mw-full'>
<input placeholder='Enter extension URL or NPM name' type='url' class='form-control w-400 bg-dark mw-full' bind:value={extensionUrl} />
<div class='input-group-append'>
<button class='btn btn-primary' type='button' use:click={addExtension}>Add</button>
</div>
</div>
<div class='w-full d-flex flex-column pt-10'>
{#each settings.extensions as extension, i}
<div class='btn-group mt-5 w-400 mw-full'>
<div class='input-group-prepend overflow-hidden w-full'>
<span class='input-group-text bg-dark w-full'>{extension}</span>
</div>
<button type='button' class='btn btn-danger btn-square px-5 material-symbols-outlined font-size-20' use:click={() => removeExtension(i)}>delete</button>
</div>
{/each}
</div>
</div>
</SettingCard>
<SettingCard title='Sources' description='List of sources to discover torrents from.'>
<div class='w-400 mw-full'>
<div class='w-full d-flex flex-column mb-10'>
{#key settings.extensions}
{#await extensionsWorker then worker}
{#await worker.metadata then metadata}
{#each metadata as { accuracy, name, description }}
<div class='card m-0 p-15 mt-10'>
<div class='mr-10 mb-5 mb-md-0'>
<div class='font-size-16 font-weight-semi-bold mb-5'>{name}</div>
<div class='text-muted pre-wrap'>{description}</div>
</div>
<div class='d-flex justify-content-between align-items-end'>
<div>Accuracy: {accuracy}</div>
<div class='custom-switch mt-10'>
<input type='checkbox' id={`extension-${name}`} bind:checked={settings.sources[name]} />
<label for={`extension-${name}`}>{settings.sources[name] ? 'On' : 'Off'}</label>
</div>
</div>
</div>
{/each}
{/await}
{/await}
{/key}
</div>
</div>
</SettingCard>
<h4 class='mb-10 font-weight-bold'>Lookup Settings</h4>
<SettingCard title='Torrent API URL' description='URL of the API used to query data for torrents. Useful for proxies if your ISP blocks some domains. Needs to be CORS enabled.'>
<input type='url' class='form-control bg-dark w-300 mw-full' bind:value={settings.toshoURL} placeholder={defaults.toshoURL} />
</SettingCard>
<SettingCard title='Torrent Quality' description="What quality to use when trying to find torrents. None might rarely find less results than specific qualities. This doesn't exclude other qualities from being found like 4K or weird DVD resolutions.">
<select class='form-control bg-dark w-300 mw-full' bind:value={settings.rssQuality}>
<option value='1080' selected>1080p</option>
@ -140,53 +192,3 @@
<label for='torrent-pex'>{settings.torrentPeX ? 'On' : 'Off'}</label>
</div>
</SettingCard>
<h4 class='mb-10 font-weight-bold'>Extension Settings</h4>
<SettingCard title='Extensions' description='List of URLs to load sources from. While the extensions are sandboxed and should be safe from attacks, it is not recommended to add unknown or untrusted extensions.'>
<div>
<div class='input-group w-400 mw-full'>
<input placeholder='Enter extension URL or NPM name' type='url' class='form-control w-400 bg-dark mw-full' bind:value={extensionUrl} />
<div class='input-group-append'>
<button class='btn btn-primary' type='button' use:click={addExtension}>Add</button>
</div>
</div>
<div class='w-full d-flex flex-column pt-10'>
{#each settings.extensions as extension, i}
<div class='btn-group mt-5 w-400 mw-full'>
<div class='input-group-prepend overflow-hidden w-full'>
<span class='input-group-text bg-dark w-full'>{extension}</span>
</div>
<button type='button' class='btn btn-danger btn-square px-5 material-symbols-outlined font-size-20' use:click={() => removeExtension(i)}>delete</button>
</div>
{/each}
</div>
</div>
</SettingCard>
<SettingCard title='Sources' description='List of sources to discover torrents from.'>
<div class='w-400 mw-full'>
<div class='w-full d-flex flex-column mb-10'>
{#key settings.extensions}
{#await extensionsWorker then worker}
{#await worker.metadata then metadata}
{#each metadata as { accuracy, name, description }}
<div class='card m-0 p-15 mt-10'>
<div class='mr-10 mb-5 mb-md-0'>
<div class='font-size-16 font-weight-semi-bold mb-5'>{name}</div>
<div class='text-muted pre-wrap'>{description}</div>
</div>
<div class='d-flex justify-content-between align-items-end'>
<div>Accuracy: {accuracy}</div>
<div class='custom-switch mt-10'>
<input type='checkbox' id={`extension-${name}`} bind:checked={settings.sources[name]} />
<label for={`extension-${name}`}>{settings.sources[name] ? 'On' : 'Off'}</label>
</div>
</div>
</div>
{/each}
{/await}
{/await}
{/key}
</div>
</div>
</SettingCard>