setAppState((old) => ({ ...old, reactionPickerOpen: true }))}
- >
- {!appState?.reactionPickerOpen &&
- {appState?.reactionPickerOpen && (
-
- setTextInput(e.target.value)}
- onKeyUp={(event) => {
- if (event.key === 'Enter') {
- onTextSubmit(textInput);
- } else if (event.key === 'Escape') {
- setAppState((old) => ({ ...old, reactionPickerOpen: false }));
- }
- }}
- />
-
+
+
);
};
diff --git a/frontend/src/party/PartyOverviewItem.tsx b/frontend/src/party/PartyOverviewItem.tsx
index 3262e78..fb9208b 100644
--- a/frontend/src/party/PartyOverviewItem.tsx
+++ b/frontend/src/party/PartyOverviewItem.tsx
@@ -13,8 +13,8 @@ function PartyOverviewItem({ party }: { party: PartyResponse }) {
const submissions = sortSubmissions(party.submissions);
return (
-
+
setAppState((old) => ({ ...old, reactionPickerOpen: true }))}
+ >
+ {!appState?.reactionPickerOpen &&
- )}
+ {appState?.reactionPickerOpen && (
+
+ setTextInput(e.target.value)}
+ onKeyUp={(event) => {
+ if (event.key === 'Enter') {
+ onTextSubmit(textInput);
+ } else if (event.key === 'Escape') {
+ setAppState((old) => ({ ...old, reactionPickerOpen: false }));
+ }
+ }}
+ />
+
+
+ )}
+
-
+
+
-
+
diff --git a/frontend/src/party/timeline/PartyTimeline.tsx b/frontend/src/party/timeline/PartyTimeline.tsx
index 3fba54e..4d262da 100644
--- a/frontend/src/party/timeline/PartyTimeline.tsx
+++ b/frontend/src/party/timeline/PartyTimeline.tsx
@@ -44,7 +44,7 @@ export const PartyTimeline: FunctionComponent<{ year: number; parties: PartyResp
{submissions.slice(0, 3).map((submission) => (
- })
))}
-
-
+ {year}
{monthsWithSumissions.map((month) => ( -
+
{month}
{timeline.get(month)!.map((party) => (
diff --git a/frontend/src/party/view/ReactionBubbles.tsx b/frontend/src/party/view/ReactionBubbles.tsx
index 0ff34fa..8fb085e 100644
--- a/frontend/src/party/view/ReactionBubbles.tsx
+++ b/frontend/src/party/view/ReactionBubbles.tsx
@@ -36,7 +36,7 @@ const ReactionBubbles: FunctionComponent<{ partyId: string }> = ({ partyId }) =>
}, [reactions]);
return (
-
+
{reactions.map((reaction, i) => (
{
+ const [dimensions, setDimensions] = useState>(new Map());
+
+ useEffect(() => {
+ const newDimensions = new Map();
+ let loadedCount = 0;
+
+ imageUrls.forEach((url, idx) => {
+ const img = new Image();
+ img.src = url;
+ img.onload = () => {
+ newDimensions.set(imageIds[idx], { width: img.naturalWidth, height: img.naturalHeight });
+ loadedCount++;
+ if (loadedCount === imageUrls.length) {
+ setDimensions(new Map(newDimensions));
+ }
+ };
+ img.onerror = () => {
+ // Fallback dimensions
+ newDimensions.set(imageIds[idx], { width: 800, height: 600 });
+ loadedCount++;
+ if (loadedCount === imageUrls.length) {
+ setDimensions(new Map(newDimensions));
+ }
+ };
+ });
+ }, imageUrls);
+
+ return dimensions;
+}
+
+function SubmissionGallery({ submissions }: { submissions: PartySubmissionResponse[] }) {
+ const originalUrls = submissions.map((s) => getImageUrl(s.imageId));
+ const imageIds = submissions.map((s) => s.id);
+ const dimensions = useImageDimensions(originalUrls, imageIds);
+
+ return (
+
+ {submissions.map((submission, i) => {
+ const currentDimensions = dimensions.get(submission.id);
+ return (
+
+ );
+}
+
+export default SubmissionGallery;
\ No newline at end of file
diff --git a/frontend/src/party/view/ViewParty.tsx b/frontend/src/party/view/ViewParty.tsx
index 7d12993..ea74e82 100644
--- a/frontend/src/party/view/ViewParty.tsx
+++ b/frontend/src/party/view/ViewParty.tsx
@@ -11,7 +11,7 @@ import {
} from '../../api/api';
import ViewPartySubmission from './ViewPartySubmission';
import ViewPartyLeaderboard from './ViewPartyLeaderboard';
-import { PartyResponse, PartyStatusResponse } from '../../api/api-models';
+import { PartyResponse, PartyStatusResponse, PartyStatusState } from '../../api/api-models';
import Button from '../../components/Button';
import { useMutation } from '@tanstack/react-query';
import { useSession } from '../../user/session';
@@ -53,11 +53,10 @@ const ViewPartyContent = ({
return
);
- if (partyStatus.state === 'waitinglobby') {
+ if (partyStatus.state === PartyStatusState.LOBBY) {
return (
@@ -98,9 +97,9 @@ const ViewPartyContent = ({
);
}
- if (partyStatus.state === 'prereveal') {
+ if (partyStatus.state === PartyStatusState.PRE_REVEAL) {
return (
-
{reaction.reaction}
diff --git a/frontend/src/party/view/SubmissionGallery.tsx b/frontend/src/party/view/SubmissionGallery.tsx
new file mode 100644
index 0000000..f34902f
--- /dev/null
+++ b/frontend/src/party/view/SubmissionGallery.tsx
@@ -0,0 +1,92 @@
+import 'photoswipe/dist/photoswipe.css';
+
+import { useEffect, useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import { Gallery, Item } from 'react-photoswipe-gallery';
+import { PartySubmissionResponse } from '../../api/api-models';
+import { getImageUrl, getThumbnailUrl } from '../../api/api';
+import PartyPosition from './rewards/PartyPosition';
+import { avgRatingTwoDecimals, totalRating } from './util';
+
+interface ImageDimensions {
+ width: number;
+ height: number;
+}
+
+function useImageDimensions(imageUrls: string[], imageIds: string[]): Map
+ -
+ {({ ref, open }) => (
+
})
+ )}
+
+
+ );
+ })}
+
+
+
+ {submission.name} {submission.description}
+
+ Ø {avgRatingTwoDecimals(submission.votes)}
+
+
+ {totalRating(submission.votes)}
+ {submission.votes.length} vote(s)
+ Unknown party or party status
;
}
- if (party.done || partyStatus.state === 'done') {
+ if (party.done || partyStatus.state === PartyStatusState.DONE) {
return
+
Thanks for voting!
Waiting for host...
@@ -112,7 +111,7 @@ const ViewPartyContent = ({ ); } - if (partyStatus.state === 'reveal') { + if (partyStatus.state === PartyStatusState.REVEAL) { return (
diff --git a/frontend/src/party/view/ViewPartyLeaderboard.tsx b/frontend/src/party/view/ViewPartyLeaderboard.tsx
index 6e6edad..46b949a 100644
--- a/frontend/src/party/view/ViewPartyLeaderboard.tsx
+++ b/frontend/src/party/view/ViewPartyLeaderboard.tsx
@@ -1,11 +1,9 @@
-import { FaStar } from 'react-icons/fa';
-import { getImageUrl, getThumbnailUrl } from '../../api/api';
-import { PartyResponse } from '../../api/api-models';
-import PartyPosition from './rewards/PartyPosition';
+import {PartyResponse} from '../../api/api-models';
-import { totalRating, avgRatingTwoDecimals, sortSubmissions } from './util';
-import { useSession } from '../../user/session';
+import {sortSubmissions} from './util';
+import {useSession} from '../../user/session';
import LinkButton from '../../components/LinkButton';
+import SubmissionGallery from "./SubmissionGallery";
function ViewPartyLeaderboard({ party }: { party: PartyResponse }) {
const [session] = useSession();
@@ -13,38 +11,14 @@ function ViewPartyLeaderboard({ party }: { party: PartyResponse }) {
const sortedSubmissions = sortSubmissions(party.submissions);
return (
-
-
+
+
{party.name}
{isHost &&
- {sortedSubmissions.map((submission, i) => (
-
-
- ))}
+
-
-
-
-
-
-
-
- {submission.name} {submission.description}
-
- Ø {avgRatingTwoDecimals(submission.votes)}
-
-
- {totalRating(submission.votes)}
- {submission.votes.length} vote(s)
-
+
);
diff --git a/frontend/src/party/view/ViewPartyReveal.tsx b/frontend/src/party/view/ViewPartyReveal.tsx
index b5a3563..9ef0a3b 100644
--- a/frontend/src/party/view/ViewPartyReveal.tsx
+++ b/frontend/src/party/view/ViewPartyReveal.tsx
@@ -14,9 +14,9 @@ function ViewPartyReveal({ party, partyStatus }: { party: PartyResponse; partySt
const votes = getSubmissionVotes(partyStatus, currentSumbission);
return (
-
+
-
-
+
![]()
+
-
{currentSumbission.name} {currentSumbission.description}
+
+
-
- {partyName} -
Share link:
diff --git a/frontend/src/party/view/ViewPartySubmission.tsx b/frontend/src/party/view/ViewPartySubmission.tsx index bae9255..2899aa7 100644 --- a/frontend/src/party/view/ViewPartySubmission.tsx +++ b/frontend/src/party/view/ViewPartySubmission.tsx @@ -41,15 +41,15 @@ function ViewPartySubmission({ }, [rating, onRating]); return ( -
+
+
-
+
-
+
![]()
+
-
{partyStatus.current!.position + 1} @@ -75,7 +75,7 @@ function ViewPartySubmission({ {partySubmission.description}
+
{getSubmissionVotes(partyStatus, partySubmission).length}
diff --git a/frontend/src/party/view/rewards/PartyPosition.tsx b/frontend/src/party/view/rewards/PartyPosition.tsx
index 1a5205d..3e539a9 100644
--- a/frontend/src/party/view/rewards/PartyPosition.tsx
+++ b/frontend/src/party/view/rewards/PartyPosition.tsx
@@ -3,12 +3,12 @@ import TrophyUrl from '/src/assets/trophy.svg';
function PartyPosition({ position }: { position: number }) {
return (
- <>
+
{position === 0 && 
}
{position === 1 &&
);
}
diff --git a/frontend/src/version.ts b/frontend/src/version.ts
index 802d333..e150b6a 100644
--- a/frontend/src/version.ts
+++ b/frontend/src/version.ts
@@ -9,6 +9,14 @@ export interface Change {
}
export const CHANGES: Change[] = [
+ {
+ name: '0.15.0',
+ changes: [
+ { description: 'Added gallery to party view', type: 'feature' },
+ { description: 'Use more space for photo display in running party', type: 'note' },
+ { description: 'Fixed party overview on homepage for Firefox', type: 'fix' },
+ ],
+ },
{
name: '0.14.2',
changes: [
{position + 1}.
}
-
+