Creepso/migu
1
0
Fork 0
mirror of https://github.com/NoCrypt/migu.git synced 2026-04-18 07:02:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

settings WIP

Browse source
This commit is contained in:
ThaUnknown 2022-03-09 23:33:54 +01:00
parent 9bd613e069
commit 472e5ed3b9
6 changed files with 267 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/src/lib/Sidebar.svelte
View file

@ -58,7 +58,7 @@
}
</script>
<div class="sidebar">
<div class="sidebar shadow-lg">
<div class="sidebar-menu h-full d-flex flex-column m-0 pb-5">
{#each links as { click, icon, text, image }, i (i)}
<div

23
src/renderer/src/lib/Tab.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { getContext } from 'svelte'
import { TABS } from './Tabs.svelte'
const panel = {}
const { registerPanel, selectedPanel } = getContext(TABS)
registerPanel(panel)
</script>
{#if $selectedPanel === panel}
<slot />
{/if}
<style>
slot {
margin-bottom: 10px;
padding: 40px;
border: 1px solid #dee2e6;
border-radius: 0 0 .5rem .5rem;
border-top: 0;
}
</style>

14
src/renderer/src/lib/TabLabel.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { getContext } from 'svelte'
import { TABS } from './Tabs.svelte'
const tab = {}
const { registerTab, selectTab, selectedTab } = getContext(TABS)
registerTab(tab)
</script>
<div class={'pointer border-bottom ' + ($selectedTab === tab ? 'bg-dark-light' : '')} on:click={() => selectTab(tab)}>
<slot />
</div>

3
src/renderer/src/lib/Tabination.js Normal file
View file

@ -0,0 +1,3 @@
export { default as Tabs } from './Tabs.svelte'
export { default as TabLabel } from './TabLabel.svelte'
export { default as Tab } from './Tab.svelte'

48
src/renderer/src/lib/Tabs.svelte Normal file
View file

@ -0,0 +1,48 @@
<script context="module">
export const TABS = {}
</script>
<script>
import { setContext, onDestroy } from 'svelte'
import { writable } from 'svelte/store'
const tabs = []
const panels = []
const selectedTab = writable(null)
const selectedPanel = writable(null)
setContext(TABS, {
registerTab: tab => {
tabs.push(tab)
selectedTab.update(current => current || tab)
onDestroy(() => {
const i = tabs.indexOf(tab)
tabs.splice(i, 1)
selectedTab.update(current => (current === tab ? tabs[i] || tabs[tabs.length - 1] : current))
})
},
registerPanel: panel => {
panels.push(panel)
selectedPanel.update(current => current || panel)
onDestroy(() => {
const i = panels.indexOf(panel)
panels.splice(i, 1)
selectedPanel.update(current => (current === panel ? panels[i] || panels[panels.length - 1] : current))
})
},
selectTab: tab => {
const i = tabs.indexOf(tab)
selectedTab.set(tab)
selectedPanel.set(panels[i])
},
selectedTab,
selectedPanel
})
</script>
<slot />

178
src/renderer/src/lib/pages/Settings.svelte
View file

@ -4,4 +4,182 @@
localStorage.setItem('ALtoken', searchParams.get('access_token'))
}
export const alToken = localStorage.getItem('ALtoken') || null
export const settings = JSON.parse(localStorage.getItem('settings')) || {}
</script>
<script>
import { Tabs, TabLabel, Tab } from '../Tabination.js'
const groups = {
player: {
name: 'Player',
icon: 'play_arrow',
desc: 'Player configuration, playback behavior, and other.'
},
rss: {
name: 'RSS',
icon: 'rss_feed',
desc: 'RSS configuration, URLs, quality, and options.'
},
torrent: {
name: 'Torrent',
icon: 'hub',
desc: 'Torrent client settings, and preferences.'
}
}
</script>
<Tabs>
<div class="d-flex w-full h-full root">
<div class="d-flex flex-column h-full w-300 bg-dark border-left">
<div class="px-20 py-15 font-size-20 font-weight-semi-bold border-bottom">Settings</div>
{#each Object.values(groups) as group}
<TabLabel>
<div class="px-20 py-15 d-flex">
<span class="material-icons font-size-24 pr-10">{group.icon}</span>
<div>
<div class="font-weight-bold font-size-16">{group.name}</div>
<div class="font-size-12">{group.desc}</div>
</div>
</div>
</TabLabel>
{/each}
<p class="text-muted px-20 py-10 m-0 mt-auto">Restart may be required for some settings to take effect.</p>
<p class="text-muted px-20 m-0">If you don't know what shit does, use default settings.</p>
<button
class="btn btn-danger mx-20 my-10"
type="button"
id="setRes"
data-toggle="tooltip"
data-placement="top"
data-title="Restores All Settings Back To Their Recommended Defaults">
Restore Defaults
</button>
<button class="btn btn-danger mx-20 mb-20" type="button" id="clearRelCache" data-toggle="tooltip" data-placement="top" data-title="Clears Anime Names Data Cache">
Clear Name Cache
</button>
</div>
<div class="h-full p-20 m-20">
<Tab>
<div class="root">
<div
class="custom-switch mb-10 pl-10 font-size-16 w-300"
data-toggle="tooltip"
data-placement="bottom"
data-title="Automatically Starts Playing Next Episode When A Video Ends">
<input type="checkbox" id="player-autoplay" bind:checked={settings.playerAutoplay} />
<label for="player-autoplay">Autoplay Next Episode</label>
</div>
<div
class="custom-switch mb-10 pl-10 font-size-16 w-300"
data-toggle="tooltip"
data-placement="bottom"
data-title="Pauses/Resumes Video Playback When Tabbing In/Out Of The App">
<input type="checkbox" id="player-pause" bind:checked={settings.playerPause} />
<label for="player-pause">Pause When Tabbing Out</label>
</div>
<div
class="custom-switch mb-10 pl-10 font-size-16 w-300"
data-toggle="tooltip"
data-placement="bottom"
data-title="Automatically Marks Episodes As Complete On AniList When You Finish Watching Them, Requires AniList Login">
<input type="checkbox" id="player-autocomplete" bind:checked={settings.playerAutocomplete} />
<label for="player-autocomplete">Autocomplete Episodes</label>
</div>
</div>
</Tab>
<Tab>
<div class="root">
<div
class="input-group mb-10 w-600 form-control-lg"
data-toggle="tooltip"
data-placement="top"
data-title="What RSS Feed To Fetch Releases From, Allows For Custom CORS Enabled Feeds">
<div class="input-group-prepend">
<span class="input-group-text w-100 justify-content-center">Feed</span>
</div>
<input id="torrent4" type="text" list="torrent4list" class="form-control form-control-lg" autocomplete="off" value="SubsPlease" />
<datalist id="torrent4list">
<option value="SubsPlease">https://nyaa.si/?page=rss&c=0_0&f=0&u=subsplease&q=</option>
<option value="Erai-raws">https://nyaa.si/?page=rss&c=0_0&f=0&u=Erai-raws&q=</option>
</datalist>
</div>
<div class="input-group mb-10 w-300 form-control-lg" data-toggle="tooltip" data-placement="top" data-title="What Quality To Find Torrents In">
<div class="input-group-prepend">
<span class="input-group-text w-100 justify-content-center">Quality</span>
</div>
<select class="form-control form-control-lg" id="torrent1">
<option value="1080" selected>1080p</option>
<option value="720">720p</option>
<option value="480||540">SD</option>
</select>
</div>
<break />
<div class="custom-switch mb-10 pl-10 font-size-16 w-300" data-toggle="tooltip" data-placement="top" data-title="Sends A Notification When A New Episode Is Released">
<input type="checkbox" id="other1" />
<label for="other1">Release Notifications</label>
</div>
<div
class="custom-swit`c`h mb-10 pl-10 font-size-16 w-300"
data-toggle="tooltip"
data-placement="top"
data-title="Skips The Torrent Selection Popup, Might Lead To Unwanted Videos Being
Played">
<input type="checkbox" id="torrent2" />
<label for="torrent2">Auto-Play Torrents</label>
</div>
<div
class="custom-switch mb-10 pl-10 font-size-16 w-300"
data-toggle="tooltip"
data-placement="top"
data-title="Finds Only Trusted Torrents, Gives Less Results But Higher Quality And With More Seeders">
<input type="checkbox" id="torrent3" checked />
<label for="torrent3">Trusted Only</label>
</div>
<div
class="custom-switch mb-10 pl-10 font-size-16 w-300"
data-toggle="tooltip"
data-placement="top"
data-title="Tries To Find Batches For Finished Shows Instead Of Downloading 1 Episode At A Time">
<input type="checkbox" id="torrent9" />
<label for="torrent9">Batch Lookup</label>
</div>
</div>
</Tab>
<Tab>
<div class="root">
<div
class="input-group w-300 mb-10 form-control-lg"
data-toggle="tooltip"
data-placement="top"
data-title="Download/Upload Speed Limit For Torrents, Higher Values Increase CPU Usage">
<div class="input-group-prepend">
<span class="input-group-text w-150 justify-content-center">Max Speed</span>
</div>
<input id="torrent-speed" type="number" bind:value={settings.torrentSpeed} min="0" max="50" class="form-control text-right form-control-lg" />
<div class="input-group-append">
<span class="input-group-text">MB/s</span>
</div>
</div>
</div>
</Tab>
</div>
</div>
</Tabs>
<style>
.root {
animation: 0.3s ease 0s 1 load-in;
}
@keyframes load-in {
from {
bottom: -1.2rem;
transform: scale(0.95);
}
to {
bottom: 0;
transform: scale(1);
}
}
</style>