feat: Add skip this version button, use youtube-nocookie.com, add changelog button

This commit is contained in:
Aleksi Lassila
2023-08-14 17:50:47 +03:00
parent eb023b811e
commit 383d43d52c
8 changed files with 70 additions and 46 deletions

View File

@@ -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
}

View File

@@ -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}

View File

@@ -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"