mirror of https://github.com/immich-app/immich.git
feat(web): Download links and Obtainium link generator on Utilities page and onboarding (#20589)
Nicholas
GitHub
parent
3163afd24a
commit
cc1cd299f3
@ -0,0 +1,27 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import AppDownloadModal from '$lib/modals/AppDownloadModal.svelte';
|
||||||
|
import ObtainiumConfigModal from '$lib/modals/ObtainiumConfigModal.svelte';
|
||||||
|
import { Button, HStack, modalManager } from '@immich/ui';
|
||||||
|
import { mdiCellphoneArrowDownVariant, mdiLinkEdit } from '@mdi/js';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<HStack wrap>
|
||||||
|
<Button
|
||||||
|
size="large"
|
||||||
|
shape="semi-round"
|
||||||
|
onclick={() => modalManager.show(ObtainiumConfigModal, {})}
|
||||||
|
leadingIcon={mdiLinkEdit}
|
||||||
|
>
|
||||||
|
{$t('obtainium_configurator')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="large"
|
||||||
|
shape="semi-round"
|
||||||
|
onclick={() => modalManager.show(AppDownloadModal, {})}
|
||||||
|
leadingIcon={mdiCellphoneArrowDownVariant}
|
||||||
|
>
|
||||||
|
{$t('app_download_links')}
|
||||||
|
</Button>
|
||||||
|
</HStack>
|
||||||
|
<p>{$t('mobile_app_download_onboarding_note')}</p>
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { appStoreBadge, fdroidBadge, Modal, ModalBody, playStoreBadge } from '@immich/ui';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
interface Props {
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
let { onClose }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal title={$t('app_download_links')} size="large" {onClose}>
|
||||||
|
<ModalBody>
|
||||||
|
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-5 text-immich-primary dark:text-immich-dark-primary">
|
||||||
|
<div>
|
||||||
|
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="fdroid-link">
|
||||||
|
F-Droid
|
||||||
|
</label>
|
||||||
|
<a href="https://f-droid.org/packages/app.alextran.immich/" target="_blank" id="fdroid-link">
|
||||||
|
<img class="pt-2 pr-10" alt="Get it on F-Droid" src={fdroidBadge} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="play-store-link">
|
||||||
|
Google Play
|
||||||
|
</label>
|
||||||
|
<a
|
||||||
|
href="https://play.google.com/store/apps/details?id=app.alextran.immich"
|
||||||
|
target="_blank"
|
||||||
|
id="play-store-link"
|
||||||
|
>
|
||||||
|
<img alt="Get it on Google Play" src={playStoreBadge} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for="app-store-link">
|
||||||
|
App Store
|
||||||
|
</label>
|
||||||
|
<a href="https://apps.apple.com/us/app/immich/id1613945652" target="_blank" id="app-store-link">
|
||||||
|
<img class="pt-2 pr-5" alt="Download on the App Store" src={appStoreBadge} width="90%" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
||||||
|
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
||||||
|
import { SettingInputFieldType } from '$lib/constants';
|
||||||
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
|
import { createApiKey, Permission } from '@immich/sdk';
|
||||||
|
import { Button, Modal, ModalBody, obtainiumBadge } from '@immich/ui';
|
||||||
|
import { t } from 'svelte-i18n';
|
||||||
|
let inputUrl = $state(location.origin);
|
||||||
|
let inputApiKey = $state('');
|
||||||
|
let archVariant = $state('');
|
||||||
|
let obtainiumLink = $derived(
|
||||||
|
`https://apps.obtainium.imranr.dev/redirect?r=obtainium://app/%7B%22id%22%3A%22app.alextran.immich%22%2C%22url%22%3A%22${inputUrl}%2Fapi%2Fserver%2Fapk-links%22%2C%22author%22%3A%22Immich%22%2C%22name%22%3A%22Immich%22%2C%22preferredApkIndex%22%3A0%2C%22additionalSettings%22%3A%22%7B%5C%22intermediateLink%5C%22%3A%5B%5D%2C%5C%22customLinkFilterRegex%5C%22%3A%5C%22%5C%22%2C%5C%22filterByLinkText%5C%22%3Afalse%2C%5C%22skipSort%5C%22%3Afalse%2C%5C%22reverseSort%5C%22%3Afalse%2C%5C%22sortByLastLinkSegment%5C%22%3Afalse%2C%5C%22versionExtractWholePage%5C%22%3Afalse%2C%5C%22requestHeader%5C%22%3A%5B%7B%5C%22requestHeader%5C%22%3A%5C%22User-Agent%3A%20Mozilla%2F5.0%20(Linux%3B%20Android%2010%3B%20K)%20AppleWebKit%2F537.36%20(KHTML%2C%20like%20Gecko)%20Chrome%2F114.0.0.0%20Mobile%20Safari%2F537.36%5C%22%7D%2C%7B%5C%22requestHeader%5C%22%3A%5C%22x-api-key%3A%20${inputApiKey}%5C%22%7D%5D%2C%5C%22defaultPseudoVersioningMethod%5C%22%3A%5C%22APKLinkHash%5C%22%2C%5C%22trackOnly%5C%22%3Afalse%2C%5C%22versionExtractionRegEx%5C%22%3A%5C%22%2Fv(%5C%5C%5C%5Cd%2B).(%5C%5C%5C%5Cd%2B).(%5C%5C%5C%5Cd%2B)%2F%5C%22%2C%5C%22matchGroupToUse%5C%22%3A%5C%22%241.%242.%243%5C%22%2C%5C%22versionDetection%5C%22%3Atrue%2C%5C%22useVersionCodeAsOSVersion%5C%22%3Afalse%2C%5C%22apkFilterRegEx%5C%22%3A%5C%22app-${archVariant}.apk%24%5C%22%2C%5C%22invertAPKFilter%5C%22%3Afalse%2C%5C%22autoApkFilterByArch%5C%22%3Atrue%2C%5C%22appName%5C%22%3A%5C%22%5C%22%2C%5C%22appAuthor%5C%22%3A%5C%22%5C%22%2C%5C%22shizukuPretendToBeGooglePlay%5C%22%3Afalse%2C%5C%22allowInsecure%5C%22%3Afalse%2C%5C%22exemptFromBackgroundUpdates%5C%22%3Afalse%2C%5C%22skipUpdateNotifications%5C%22%3Afalse%2C%5C%22about%5C%22%3A%5C%22%5C%22%2C%5C%22refreshBeforeDownload%5C%22%3Afalse%7D%22%2C%22overrideSource%22%3Anull%7D`,
|
||||||
|
);
|
||||||
|
const handleCreate = async () => {
|
||||||
|
try {
|
||||||
|
const { secret } = await createApiKey({
|
||||||
|
apiKeyCreateDto: {
|
||||||
|
name: 'Obtainium',
|
||||||
|
permissions: [Permission.ServerApkLinks],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
inputApiKey = secret;
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, $t('errors.unable_to_create_api_key'));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
interface Props {
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
let { onClose }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal title={$t('obtainium_configurator')} size="large" {onClose}>
|
||||||
|
<ModalBody>
|
||||||
|
<div class="flex flex-col sm:grid sm:grid-cols-2 gap-5 text-immich-primary dark:text-immich-dark-primary">
|
||||||
|
<div>
|
||||||
|
<label
|
||||||
|
class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm"
|
||||||
|
for="obtainium-configurator"
|
||||||
|
>
|
||||||
|
Obtainium
|
||||||
|
</label>
|
||||||
|
<div id="obtainium-configurator">
|
||||||
|
<form>
|
||||||
|
<div class="mt-2">
|
||||||
|
<SettingInputField inputType={SettingInputFieldType.TEXT} label={$t('url')} bind:value={inputUrl} />
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<SettingInputField
|
||||||
|
inputType={SettingInputFieldType.TEXT}
|
||||||
|
label={$t('api_key')}
|
||||||
|
bind:value={inputApiKey}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="">
|
||||||
|
<Button shape="round" size="small" onclick={() => handleCreate()}>{$t('new_api_key')}</Button>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2">
|
||||||
|
<SettingSelect
|
||||||
|
label={$t('app_architecture_variant')}
|
||||||
|
bind:value={archVariant}
|
||||||
|
options={[
|
||||||
|
{ value: 'arm64-v8a-release', text: 'arm64-v8a' },
|
||||||
|
{ value: 'armeabi-v7a-release', text: 'armeabi-v7a' },
|
||||||
|
{ value: 'release', text: 'universal' },
|
||||||
|
{ value: 'x86_64-release', text: 'x86_64' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content-center">
|
||||||
|
{#if inputUrl && inputApiKey && archVariant}
|
||||||
|
<a
|
||||||
|
href={obtainiumLink}
|
||||||
|
class="underline text-sm immich-form-label"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
id="obtainium-link"
|
||||||
|
>
|
||||||
|
<img class="pt-2 pr-5" alt="Get it on Obtainium" src={obtainiumBadge} />
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<p class="immich-form-label pb-2 text-sm" id="obtainium-link">
|
||||||
|
{$t('obtainium_configurator_instructions')}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
||||||
Loading…
Reference in New Issue