gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-30 20:09:50 +03:00
Code Issues Packages Projects Releases Wiki Activity

player: refactor day selector css/js

Browse Source
This commit is contained in:
Nikita Galaiko 2023-03-24 13:30:59 +01:00
parent 5b55f10d8f
commit fa8f95f705
1 changed files with 46 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/routes/projects/[projectId]/player/+page.svelte
View File

@ -218,23 +218,18 @@
return format(new Date(dateString), 'MMM'); return format(new Date(dateString), 'MMM');
} }
function selectDay(day: string) { const selectDay = (day: string, latest = false) => {
return () => { showLatest = latest;
$currentDay = day; currentDeltasIndex = 0;
showLatest = false; stop();
currentDeltasIndex = 0; $page.url.searchParams.set('date', day);
stop(); goto($page.url.href);
}; };
}
function selectLatest() { const selectLatestDay = () => {
return () => { const latestDay = Object.keys($sessionDays)[0];
showLatest = true; selectDay(latestDay, true);
$currentDay = Object.keys($sessionDays)[0]; // get latest day };
currentDeltasIndex = 0;
stop();
};
}
type EditFrame = { type EditFrame = {
sessionId: string; sessionId: string;
@ -248,7 +243,7 @@
let currentPlaylist: DayVideo | null = null; let currentPlaylist: DayVideo | null = null;
let currentEdit: EditFrame | null = null; let currentEdit: EditFrame | null = null;
$: if (currentDay && dayPlaylist && dayPlaylist[$currentDay]) { $: if ($currentDay && dayPlaylist && dayPlaylist[$currentDay]) {
currentPlaylist = dayPlaylist[$currentDay]; currentPlaylist = dayPlaylist[$currentDay];
if (currentPlaylist !== null) { if (currentPlaylist !== null) {
if (showLatest) { if (showLatest) {
@ -356,9 +351,6 @@
speed = speed * 2; speed = speed * 2;
start({ direction, speed }); start({ direction, speed });
}; };
// <!-- svelte-ignore a11y-click-events-have-key-events -->
function handleKey() {}
</script> </script>
{#if $sessions.length === 0} {#if $sessions.length === 0}
@ -377,33 +369,35 @@
</button> </button>
{/if} {/if}
<div class="flex h-full w-full flex-row"> <div class="flex h-full w-full flex-row">
<div id="left" class="day-of-week flex h-full flex-shrink-0 flex-col p-2 pb-1"> <ul id="left" class="flex h-full flex-shrink-0 flex-col gap-2 overflow-y-scroll p-2">
<div class="overflow-y-auto"> <li class="w-full">
<div <button
class="card-latest mb-2 flex cursor-pointer flex-col rounded border border-t-[0.5px] border-r-[0.5px] border-b-[0.5px] border-l-[0.5px] border-gb-700 text-zinc-300 {showLatest class:bg-gb-800={showLatest}
? 'border-gb-700 bg-gb-800 text-white' class:text-white={showLatest}
: 'border-gb-700 bg-gb-900'} p-2 text-center shadow" class:border-gb-700={!showLatest}
on:keydown={handleKey} class:bg-gb-900={!showLatest}
on:click={selectLatest()} class="rounded border border-[0.5px] border-gb-700 border-gb-700 p-2 text-center text-zinc-300 shadow"
on:click={() => selectLatestDay()}
> >
<div class="">Latest</div> Latest
</div> </button>
{#each Object.entries($sessionDays) as [day, sessions]} </li>
<div {#each Object.keys($sessionDays) as day}
class:bg-gb-800={day == $currentDay && !showLatest} <li class="w-full">
class:text-white={day == $currentDay && !showLatest} <button
class:border-gb-700={day !== $currentDay && !showLatest} class:bg-gb-800={day === $currentDay && !showLatest}
class:bg-gb-900={day !== $currentDay && !showLatest} class:text-white={day === $currentDay && !showLatest}
class="card-day-of-week mb-2 flex cursor-pointer flex-col rounded border border-t-[0.5px] border-r-[0.5px] border-b-[0.5px] border-l-[0.5px] border-gb-700 border-gb-700 p-2 pb-1 text-center text-zinc-300 shadow transition duration-150 ease-out hover:bg-gb-800 hover:ease-in" class:border-gb-700={day !== $currentDay || showLatest}
on:keydown={handleKey} class:bg-gb-900={day !== $currentDay || showLatest}
on:click={selectDay(day)} class="flex w-full flex-col items-center rounded border border-[0.5px] border-gb-700 border-gb-700 p-2 text-zinc-300 shadow transition duration-150 ease-out hover:bg-gb-800 hover:ease-in"
on:click={() => selectDay(day)}
> >
<div class="text-xl leading-5">{ymdToDay(day)}</div> <div class="text-xl leading-5">{ymdToDay(day)}</div>
<div class="leading-4">{ymdToMonth(day)}</div> <div class="leading-4">{ymdToMonth(day)}</div>
</div> </button>
{/each} </li>
</div> {/each}
</div> </ul>
<div id="right" class="h-full w-80 flex-shrink-0 p-2 xl:w-96"> <div id="right" class="h-full w-80 flex-shrink-0 p-2 xl:w-96">
<div <div
@ -459,8 +453,7 @@
{/if} {/if}
</div> </div>
{:else} {:else}
<div <button
on:keydown={handleKey}
on:click={() => { on:click={() => {
currentDeltasIndex = Math.max( currentDeltasIndex = Math.max(
currentPlaylist.editOffsets[chapter.session], currentPlaylist.editOffsets[chapter.session],
@ -481,7 +474,7 @@
{Object.entries(chapter.files).length > 1 ? 'files' : 'file'} {Object.entries(chapter.files).length > 1 ? 'files' : 'file'}
</div> </div>
</div> </div>
</div> </button>
{/if} {/if}
{/each} {/each}
</div> </div>
@ -558,15 +551,15 @@
<div class="left-side flex space-x-8"> <div class="left-side flex space-x-8">
<div class="play-button-button-container"> <div class="play-button-button-container">
{#if interval} {#if interval}
<button on:click={stop} <button on:click={stop}>
><IconPlayerPauseFilled <IconPlayerPauseFilled
class="playback-button-play icon-pointer h-6 w-6" class="playback-button-play icon-pointer h-6 w-6"
/></button />
> </button>
{:else} {:else}
<button on:click={play} <button on:click={play}>
><IconPlayerPlayFilled class="icon-pointer h-6 w-6" /></button <IconPlayerPlayFilled class="icon-pointer h-6 w-6" />
> </button>
{/if} {/if}
</div> </div>