Skip to content

QOL run of show #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cj-vana merged 3 commits into from
Oct 10, 2025
Merged

QOL run of show #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0f127c4
feat: improve Show Mode UX with orange next cue and fixed scrolling
cj-vana Oct 9, 2025
0f0f9e8
feat: implement comprehensive SEO optimization
cj-vana Oct 10, 2025
8c4088f
Revert "feat: implement comprehensive SEO optimization"
cj-vana Oct 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 22 additions & 8 deletions apps/web/src/pages/SharedShowModePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@
throw new Error("This share link is not for a Run of Show.");
}
setSharedData(resource as SharedRunOfShowData);
} catch (err: any) {

Check failure on line 79 in apps/web/src/pages/SharedShowModePage.tsx

View workflow job for this annotation

GitHub Actions / typescript-checks 

Unexpected any. Specify a different type
console.error("Error fetching shared Run of Show:", err);
setError(err.message || "Failed to load shared Run of Show.");
} finally {
Expand Down Expand Up @@ -143,17 +143,23 @@
if (currentRow) {
const containerRect = container.getBoundingClientRect();
const rowRect = currentRow.getBoundingClientRect();
const headerHeight = 49; // Height of sticky header

// Check if row is visible within container
// Account for both table header and any sticky section headers
// Table header is at top-0 with height ~49px, section headers are at top-[40px]
const tableHeaderHeight = 49;
const sectionHeaderHeight = 40;
const totalStickyHeight = tableHeaderHeight + sectionHeaderHeight; // ~89px
const paddingOffset = 20; // Extra padding for visibility

// Check if row is visible within container, accounting for sticky headers
const rowTop = rowRect.top - containerRect.top;
const rowBottom = rowRect.bottom - containerRect.top;
const visibleTop = headerHeight;
const visibleTop = totalStickyHeight;
const visibleBottom = containerRect.height;

// Scroll if row is not fully visible
// Scroll if row is not fully visible below sticky headers
if (rowTop < visibleTop || rowBottom > visibleBottom) {
const scrollOffset = rowTop - visibleTop - 20; // 20px padding
const scrollOffset = rowTop - visibleTop - paddingOffset;
container.scrollTo({
top: container.scrollTop + scrollOffset,
behavior: "smooth",
Expand Down Expand Up @@ -274,7 +280,7 @@
<span>Current Cue</span>
</div>
<div className="flex items-center">
<span className="h-3 w-3 rounded-full bg-red-500 mr-1.5 border border-red-300 shadow-sm"></span>
<span className="h-3 w-3 rounded-full bg-orange-500 mr-1.5 border border-orange-300 shadow-sm"></span>
<span>Next Cue</span>
</div>
</div>
Expand Down Expand Up @@ -318,7 +324,14 @@
const rowStyle: React.CSSProperties = {};

if (item.type === "header") {
rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px] z-10";
// Calculate z-index based on header position to prevent text bleed-through
// Each subsequent header should have a higher z-index than the previous
const headerIndex = items
.slice(0, index + 1)
.filter((i) => i.type === "header").length;
const zIndex = 10 + headerIndex;
rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px]";
rowStyle.zIndex = zIndex;
} else {
if (item.highlightColor && !isCurrent && !isNext) {
rowStyle.backgroundColor = item.highlightColor;
Expand All @@ -328,7 +341,8 @@
"bg-green-600/40 hover:bg-green-600/50 border-l-4 border-green-400";
delete rowStyle.backgroundColor;
} else if (isNext) {
rowClass = "bg-red-600/40 hover:bg-red-600/50 border-l-4 border-red-400";
rowClass =
"bg-orange-600/40 hover:bg-orange-600/50 border-l-4 border-orange-400";
delete rowStyle.backgroundColor;
}
}
Expand Down
30 changes: 22 additions & 8 deletions apps/web/src/pages/ShowModePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
created_at?: string;
last_edited?: string;
user_id?: string;
live_show_data?: any; // Added to type

Check failure on line 29 in apps/web/src/pages/ShowModePage.tsx

View workflow job for this annotation

GitHub Actions / typescript-checks 

Unexpected any. Specify a different type
}

const parseDurationToSeconds = (durationStr?: string): number | null => {
Expand Down Expand Up @@ -68,7 +68,7 @@
const [timeRemaining, setTimeRemaining] = useState<number | null>(null);
const [itemTimerId, setItemTimerId] = useState<NodeJS.Timeout | null>(null);

const lastPublishedStateRef = useRef<any>(null);

Check failure on line 71 in apps/web/src/pages/ShowModePage.tsx

View workflow job for this annotation

GitHub Actions / typescript-checks 

Unexpected any. Specify a different type
const tableContainerRef = useRef<HTMLDivElement>(null);

useEffect(() => {
Expand Down Expand Up @@ -134,7 +134,7 @@

if (fetchError) throw fetchError;
if (data) {
const migratedItems: RunOfShowItem[] = (data.items || []).map((item: any) => ({

Check failure on line 137 in apps/web/src/pages/ShowModePage.tsx

View workflow job for this annotation

GitHub Actions / typescript-checks 

Unexpected any. Specify a different type
...item,
type: item.type || "item",
highlightColor: item.highlightColor || undefined,
Expand All @@ -156,7 +156,7 @@
} else {
setError("Run of Show not found or access denied.");
}
} catch (err: any) {

Check failure on line 159 in apps/web/src/pages/ShowModePage.tsx

View workflow job for this annotation

GitHub Actions / typescript-checks 

Unexpected any. Specify a different type
console.error("Error fetching Run of Show:", err);
setError(`Failed to load Run of Show: ${err.message}`);
} finally {
Expand Down Expand Up @@ -206,7 +206,7 @@
setItemTimerId(null);
}
};
}, [isTimerActive, currentItemIndex, runOfShow, timeRemaining, findNextPlayableItemIndex]);

Check warning on line 209 in apps/web/src/pages/ShowModePage.tsx

View workflow job for this annotation

GitHub Actions / typescript-checks 

React Hook useEffect has a missing dependency: 'itemTimerId'. Either include it or remove the dependency array

// Publish live state to Supabase
useEffect(() => {
Expand Down Expand Up @@ -272,17 +272,23 @@
if (currentRow) {
const containerRect = container.getBoundingClientRect();
const rowRect = currentRow.getBoundingClientRect();
const headerHeight = 49; // Height of sticky header

// Check if row is visible within container
// Account for both table header and any sticky section headers
// Table header is at top-0 with height ~49px, section headers are at top-[40px]
const tableHeaderHeight = 49;
const sectionHeaderHeight = 40;
const totalStickyHeight = tableHeaderHeight + sectionHeaderHeight; // ~89px
const paddingOffset = 20; // Extra padding for visibility

// Check if row is visible within container, accounting for sticky headers
const rowTop = rowRect.top - containerRect.top;
const rowBottom = rowRect.bottom - containerRect.top;
const visibleTop = headerHeight;
const visibleTop = totalStickyHeight;
const visibleBottom = containerRect.height;

// Scroll if row is not fully visible
// Scroll if row is not fully visible below sticky headers
if (rowTop < visibleTop || rowBottom > visibleBottom) {
const scrollOffset = rowTop - visibleTop - 20; // 20px padding
const scrollOffset = rowTop - visibleTop - paddingOffset;
container.scrollTo({
top: container.scrollTop + scrollOffset,
behavior: "smooth",
Expand Down Expand Up @@ -584,7 +590,7 @@
<span>Current Cue</span>
</div>
<div className="flex items-center">
<span className="h-3 w-3 rounded-full bg-red-500 mr-2 border border-red-300"></span>
<span className="h-3 w-3 rounded-full bg-orange-500 mr-2 border border-orange-300"></span>
<span>Next Cue</span>
</div>
</div>
Expand Down Expand Up @@ -689,7 +695,14 @@
const rowStyle: React.CSSProperties = {};

if (item.type === "header") {
rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px] z-10";
// Calculate z-index based on header position to prevent text bleed-through
// Each subsequent header should have a higher z-index than the previous
const headerIndex = runOfShow.items
.slice(0, index + 1)
.filter((i) => i.type === "header").length;
const zIndex = 10 + headerIndex;
rowClass = "bg-gray-700 hover:bg-gray-600 font-semibold sticky top-[40px]";
rowStyle.zIndex = zIndex;
} else {
if (item.highlightColor && !isCurrent && !isNext) {
rowStyle.backgroundColor = item.highlightColor;
Expand All @@ -699,7 +712,8 @@
"bg-green-600/40 hover:bg-green-600/50 border-l-4 border-green-400";
delete rowStyle.backgroundColor;
} else if (isNext) {
rowClass = "bg-red-600/40 hover:bg-red-600/50 border-l-4 border-red-400";
rowClass =
"bg-orange-600/40 hover:bg-orange-600/50 border-l-4 border-orange-400";
delete rowStyle.backgroundColor;
}
}
Expand Down
Loading