mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-09-11 12:25:42 +03:00
Add navigation between sessions in player page
Implemented navigation between sessions on the player page, allowing users to easily switch between previous and next sessions.
This commit is contained in:
parent
1cd7d11de9
commit
72f30de645
@ -22,7 +22,12 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import { derived, writable } from 'svelte/store';
|
||||
import { IconPlayerPauseFilled, IconPlayerPlayFilled } from '$lib/components/icons';
|
||||
import {
|
||||
IconChevronLeft,
|
||||
IconChevronRight,
|
||||
IconPlayerPauseFilled,
|
||||
IconPlayerPlayFilled
|
||||
} from '$lib/components/icons';
|
||||
import { collapsable } from '$lib/paths';
|
||||
import { page } from '$app/stores';
|
||||
import { CodeViewer } from '$lib/components';
|
||||
@ -86,11 +91,20 @@
|
||||
currentDate.set(page.params.date);
|
||||
});
|
||||
|
||||
const currentSession = derived(
|
||||
const currentSession = derived([currentSessionId, richSessions], ([currentSessionId, sessions]) =>
|
||||
sessions?.find((session) => session.id === currentSessionId)
|
||||
);
|
||||
|
||||
const hasNextSession = derived(
|
||||
[currentSessionId, richSessions],
|
||||
([currentSessionId, sessions]) => {
|
||||
return sessions?.find((session) => session.id === currentSessionId);
|
||||
}
|
||||
([currentSessionId, sessions]) =>
|
||||
sessions?.findIndex((session) => session.id === currentSessionId) < sessions?.length - 1
|
||||
);
|
||||
|
||||
const hasPrevSession = derived(
|
||||
[currentSessionId, richSessions],
|
||||
([currentSessionId, sessions]) =>
|
||||
sessions?.findIndex((session) => session.id === currentSessionId) > 0
|
||||
);
|
||||
|
||||
const frame = derived([currentSession, currentDeltaIndex], ([session, currentDeltaIndex]) => {
|
||||
@ -143,6 +157,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
const goToNextSession = () => {
|
||||
if ($hasNextSession) {
|
||||
const currentSessionIndex = $richSessions.findIndex(
|
||||
(session) => session.id === $currentSessionId
|
||||
);
|
||||
const nextSession = $richSessions[currentSessionIndex + 1];
|
||||
currentSessionId.set(nextSession.id);
|
||||
}
|
||||
};
|
||||
|
||||
const goToPrevSession = () => {
|
||||
if ($hasPrevSession) {
|
||||
const currentSessionIndex = $richSessions.findIndex(
|
||||
(session) => session.id === $currentSessionId
|
||||
);
|
||||
const prevSession = $richSessions[currentSessionIndex - 1];
|
||||
currentSessionId.set(prevSession.id);
|
||||
}
|
||||
};
|
||||
|
||||
inputValue.subscribe((value) => {
|
||||
let i = 0;
|
||||
for (const session of $richSessions || []) {
|
||||
@ -216,14 +250,15 @@
|
||||
</div>
|
||||
{:then}
|
||||
<header
|
||||
class="card-header flex flex-row justify-between rounded-t border-b-[1px] border-b-divider bg-card-active"
|
||||
class="card-header flex flex-row justify-between rounded-t border-b-[1px] border-b-divider bg-card-active px-3 py-2"
|
||||
>
|
||||
<h2 class="flex flex-row items-baseline space-x-2 p-3 text-lg text-zinc-300">
|
||||
<span>Activities</span>
|
||||
<span class="text-sm text-zinc-400">
|
||||
<span class="flex gap-1">
|
||||
<span class="text-sm">🧰</span>
|
||||
<span>Working History</span>
|
||||
<span class="text-zinc-400">
|
||||
{$richSessions.length}
|
||||
</span>
|
||||
</h2>
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<ul class="flex h-full flex-col gap-2 overflow-auto rounded-b bg-card-default p-2">
|
||||
@ -280,6 +315,33 @@
|
||||
class="relative my-2 flex flex-auto flex-col overflow-auto rounded border border-zinc-700 bg-card-default"
|
||||
>
|
||||
{#if $frame}
|
||||
<header class="flex items-center gap-3 bg-card-active px-3 py-2">
|
||||
<span>
|
||||
{format($frame.session.meta.startTimestampMs, 'EEEE, LLL d, HH:mm')}
|
||||
-
|
||||
{format($frame.session.meta.lastTimestampMs, 'HH:mm')}
|
||||
</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button
|
||||
on:click={goToPrevSession}
|
||||
class="cursor-pointer rounded border border-zinc-500 bg-zinc-600 p-0.5"
|
||||
class:hover:bg-zinc-500={$hasPrevSession}
|
||||
class:cursor-not-allowed={!$hasPrevSession}
|
||||
class:text-zinc-500={!$hasPrevSession}
|
||||
>
|
||||
<IconChevronLeft class="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
on:click={goToNextSession}
|
||||
class="cursor-pointer rounded border border-zinc-500 bg-zinc-600 p-0.5"
|
||||
class:hover:bg-zinc-500={$hasNextSession}
|
||||
class:cursor-not-allowed={!$hasNextSession}
|
||||
class:text-zinc-500={!$hasNextSession}
|
||||
>
|
||||
<IconChevronRight class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="code" class="flex-auto overflow-auto px-2">
|
||||
<div class="pb-[200px]">
|
||||
<CodeViewer
|
||||
|
Loading…
Reference in New Issue
Block a user