mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-22 00:35:12 +02:00
feat: Add skip this version button, use youtube-nocookie.com, add changelog button
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let size: 'md' | 'sm' | 'lg' = 'md';
|
||||
export let size: 'md' | 'sm' | 'lg' | 'xs' = 'md';
|
||||
export let type: 'primary' | 'secondary' | 'tertiary' = 'secondary';
|
||||
export let disabled = false;
|
||||
|
||||
@@ -13,18 +13,19 @@
|
||||
|
||||
let buttonStyle: string;
|
||||
$: buttonStyle = classNames(
|
||||
'flex items-center gap-1 rounded-xl font-medium select-none cursor-pointer selectable transition-all flex-shrink-0',
|
||||
'flex items-center gap-1 font-medium select-none cursor-pointer selectable transition-all flex-shrink-0',
|
||||
{
|
||||
'bg-white text-zinc-900 font-extrabold backdrop-blur-lg': type === 'primary',
|
||||
'bg-white text-zinc-900 font-extrabold backdrop-blur-lg rounded-xl': type === 'primary',
|
||||
'hover:bg-amber-400 focus-within:bg-amber-400 hover:border-amber-400 focus-within:border-amber-400':
|
||||
type === 'primary' && !disabled,
|
||||
'text-zinc-200 bg-zinc-400 bg-opacity-20 backdrop-blur-lg': type === 'secondary',
|
||||
'text-zinc-200 bg-zinc-400 bg-opacity-20 backdrop-blur-lg rounded-xl': type === 'secondary',
|
||||
'focus-visible:bg-zinc-200 focus-visible:text-zinc-800 hover:bg-zinc-200 hover:text-zinc-800':
|
||||
(type === 'secondary' || type === 'tertiary') && !disabled,
|
||||
'rounded-full': type === 'tertiary',
|
||||
'py-2 px-6 sm:py-3 sm:px-6': size === 'lg',
|
||||
'py-2 px-6': size === 'md',
|
||||
'py-1 px-3': size === 'sm',
|
||||
'py-1 px-4': size === 'sm',
|
||||
'py-1 px-4 text-sm': size === 'xs',
|
||||
'opacity-50': disabled,
|
||||
'cursor-pointer': !disabled
|
||||
}
|
||||
|
||||
@@ -1,28 +1,40 @@
|
||||
<script lang="ts">
|
||||
import { skippedVersion } from '$lib/localstorage';
|
||||
import axios from 'axios';
|
||||
import IconButton from './IconButton.svelte';
|
||||
import { Cross2 } from 'radix-icons-svelte';
|
||||
import { log } from '$lib/utils';
|
||||
import { version } from '$app/environment';
|
||||
import { createLocalStorageStore } from '$lib/localstorage';
|
||||
import { Cross2 } from 'radix-icons-svelte';
|
||||
import IconButton from './IconButton.svelte';
|
||||
import axios from 'axios';
|
||||
import Button from './Button.svelte';
|
||||
|
||||
let visible = true;
|
||||
|
||||
function fetchLatestVersion() {
|
||||
const skippedVersion = createLocalStorageStore<string>('skipped-version');
|
||||
|
||||
async function fetchLatestVersion() {
|
||||
return axios
|
||||
.get('https://api.github.com/repos/aleksilassila/reiverr/tags')
|
||||
.then((res) => res.data?.[0]?.name)
|
||||
.then(log);
|
||||
.get('https://api.github.com/repos/aleksilassila/reiverr/tags', {
|
||||
headers: {
|
||||
'Cache-Control': 'max-age=3600'
|
||||
}
|
||||
})
|
||||
.then((res) => res.data?.[0]?.name);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await fetchLatestVersion() then latestVersion}
|
||||
{#if latestVersion !== `v${version}` && latestVersion !== $skippedVersion && visible}
|
||||
<div class="fixed inset-x-0 bottom-0 p-2 flex items-center justify-center z-20 bg-stone-800">
|
||||
<a href="https://github.com/aleksilassila/reiverr">New version is available!</a>
|
||||
<IconButton on:click={() => (visible = false)} class="absolute right-8 inset-y-0">
|
||||
<Cross2 size={20} />
|
||||
</IconButton>
|
||||
<div
|
||||
class="fixed inset-x-0 bottom-0 p-3 flex items-center justify-center z-20 bg-stone-800 text-sm"
|
||||
>
|
||||
<a href="https://github.com/aleksilassila/reiverr">{latestVersion} is now available!</a>
|
||||
<div class="absolute right-4 inset-y-0 flex items-center gap-2">
|
||||
<Button type="tertiary" size="xs" on:click={() => skippedVersion.set(latestVersion)}>
|
||||
Skip this version
|
||||
</Button>
|
||||
<IconButton on:click={() => (visible = false)}>
|
||||
<Cross2 size={20} />
|
||||
</IconButton>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="overflow-hidden w-full h-full">
|
||||
<div class="youtube-container scale-[150%] h-full w-full">
|
||||
<iframe
|
||||
src={'https://www.youtube.com/embed/' +
|
||||
src={'https://www.youtube-nocookie.com/embed/' +
|
||||
videoId +
|
||||
'?autoplay=1&mute=1&loop=1&controls=0&modestbranding=1&playsinline=1&rel=0&enablejsapi=1'}
|
||||
title="YouTube video player"
|
||||
|
||||
Reference in New Issue
Block a user