mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-11 00:20:54 +00:00
4.20.59
* Added: Support for different settings providers, including IndexedDB. * Fixed: Alignment of descriptions with check box settings. * Fixed: Settings being added multiple times to the Control Center UI when registered multiple times. * API Added: Providers now support blobs, and emit events when blobs change. * Maintenance: Update dependencies. Add a babel plugin.
This commit is contained in:
SirStendec
parent
b337b6abe3
commit
5412a928a1
12 changed files with 976 additions and 96 deletions
147
src/modules/main_menu/components/provider.vue
Normal file
147
src/modules/main_menu/components/provider.vue
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
<template lang="html">
|
||||
<div class="ffz--provider tw-pd-t-05">
|
||||
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-1">
|
||||
<h3 class="ffz-i-attention">
|
||||
{{ t('setting.provider.warn.title', 'Be careful!') }}
|
||||
</h3>
|
||||
<div>
|
||||
<markdown :source="t('setting.provider.warn.desc', 'Please close any other Twitch tabs before using this tool. It is **recommended to create a backup** before changing your provider, in case anything happens.')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="tw-pd-b-1 tw-mg-b-1 tw-border-b">
|
||||
<markdown :source="t('setting.provider.about', 'Here, you can change the storage provider used by FrankerFaceZ when browsing Twitch. You can try this if you\'re having a problem with your settings not remaining persistent. Please note that you will need to reload any and all Twitch tabs after changing this.')" />
|
||||
</section>
|
||||
|
||||
<div class="ffz-options">
|
||||
<div v-for="val of providers" :key="val.key" class="tw-pd-b-1 tw-radio ffz-radio-top">
|
||||
<input
|
||||
:id="'ffz--provider-opt-' + val.key"
|
||||
v-model="selected"
|
||||
:value="val.key"
|
||||
name="ffz--provider-opt"
|
||||
type="radio"
|
||||
class="tw-radio__input"
|
||||
>
|
||||
<label
|
||||
:for="'ffz--provider-opt-' + val.key"
|
||||
class="tw-block tw-radio__label"
|
||||
>
|
||||
<div class="tw-mg-l-1">
|
||||
<div>
|
||||
<span class="tw-strong">
|
||||
{{ t(val.i18n_key, val.title) }}
|
||||
</span>
|
||||
<span v-if="val.key === current" class="tw-mg-l-1 tw-c-text-alt">
|
||||
{{ t('setting.provider.selected', '(Current)') }}
|
||||
</span>
|
||||
<span v-if="val.has_data" class="tw-mg-l-1 tw-c-text-alt">
|
||||
{{ t('setting.provider.has-data', '(Has Data)') }}
|
||||
</span>
|
||||
</div>
|
||||
<section v-if="val.description" class="tw-c-text-alt-2">
|
||||
<markdown :source="t(val.desc_i18n_key, val.description)" />
|
||||
</section>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tw-border-t tw-pd-t-1">
|
||||
<div class="tw-flex tw-align-items-center tw-checkbox">
|
||||
<input id="transfer" ref="transfer" checked type="checkbox" class="tw-checkbox__input">
|
||||
<label for="transfer" class="tw-checkbox__label">
|
||||
<div class="tw-mg-l-1">
|
||||
{{ t('setting.provider.transfer', 'Transfer my settings when switching provider.') }}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<section class="tw-c-text-alt-2" style="padding-left:2.5rem">
|
||||
<markdown :source="t('setting.provider.transfer.desc', '**Note:** It is recommended to leave this enabled unless you know what you\'re doing.')" />
|
||||
</section>
|
||||
<div class="tw-mg-t-1 tw-flex tw-align-items-center tw-checkbox">
|
||||
<input id="backup" ref="backup" v-model="backup" type="checkbox" class="tw-checkbox__input">
|
||||
<label for="backup" class="tw-checkbox__label">
|
||||
<div class="tw-mg-l-1">
|
||||
{{ t('setting.provider.backup', 'Yes, I made a backup.') }}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tw-mg-t-1 tw-border-t tw-pd-t-1">
|
||||
<button
|
||||
class="tw-button tw-mg-l-3"
|
||||
:class="{'tw-button--disabled': ! enabled}"
|
||||
@click="change"
|
||||
>
|
||||
<span class="tw-button__icon tw-button__icon--left">
|
||||
<figure class="ffz-i-floppy" />
|
||||
</span>
|
||||
<span class="tw-button__text">
|
||||
{{ t('setting.provider.start', 'Change Providers') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: ['item', 'context'],
|
||||
|
||||
data() {
|
||||
const ffz = this.context.getFFZ(),
|
||||
settings = ffz.resolve('settings'),
|
||||
providers = [];
|
||||
|
||||
for(const [key, val] of Object.entries(settings.getProviders())) {
|
||||
const prov = {
|
||||
key,
|
||||
has_data: null,
|
||||
i18n_key: `setting.provider.${key}.title`,
|
||||
title: val.title || key,
|
||||
desc_i18n_key: val.description ? `setting.provider.${key}.desc` : null,
|
||||
description: val.description
|
||||
};
|
||||
|
||||
if ( val.supported() )
|
||||
Promise.resolve(val.hasContent()).then(v => {
|
||||
prov.has_data = v;
|
||||
});
|
||||
|
||||
providers.push(prov);
|
||||
|
||||
}
|
||||
|
||||
const current = settings.getActiveProvider();
|
||||
|
||||
return {
|
||||
backup: false,
|
||||
providers,
|
||||
current,
|
||||
selected: current
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
enabled() {
|
||||
return this.selected !== this.current && this.backup
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
change() {
|
||||
if ( ! this.enabled )
|
||||
return;
|
||||
|
||||
const ffz = this.context.getFFZ(),
|
||||
settings = ffz.resolve('settings');
|
||||
|
||||
settings.changeProvider(this.selected, this.$refs.transfer.checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -50,13 +50,13 @@
|
|||
<section
|
||||
v-if="item.description"
|
||||
class="tw-c-text-alt-2"
|
||||
style="padding-left:2.2rem"
|
||||
style="padding-left:2.5rem"
|
||||
>
|
||||
<markdown :source="t(item.desc_i18n_key || `${item.i18n_key}.description`, item.description)" />
|
||||
</section>
|
||||
<section
|
||||
v-if="item.extra"
|
||||
style="padding-left:2.2rem"
|
||||
style="padding-left:2.5rem"
|
||||
>
|
||||
<component :is="item.extra.component" :context="context" :item="item" />
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -66,6 +66,12 @@ export default class MainMenu extends Module {
|
|||
force_seen: true
|
||||
});
|
||||
|
||||
this.settings.addUI('provider', {
|
||||
path: 'Data Management > Storage >> tabs ~> Provider',
|
||||
component: 'provider',
|
||||
force_seen: true
|
||||
});
|
||||
|
||||
this.settings.addUI('home', {
|
||||
path: 'Home @{"sort": -1000, "profile_warning": false}',
|
||||
component: 'home-page'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue