Skip to content

Added in "clip" feature and updated deps#76

Open
bmdavis419 wants to merge 3 commits intopingdotgg:mainfrom
bmdavis419:main
Open

Added in "clip" feature and updated deps#76
bmdavis419 wants to merge 3 commits intopingdotgg:mainfrom
bmdavis419:main

Conversation

@bmdavis419
Copy link
Copy Markdown

@bmdavis419 bmdavis419 commented Apr 1, 2026

  • Add .env.example and ignore local env files
  • Update Next.js, Clerk, TypeScript, Prettier, and related packages
  • Tweak app layout/player files and VS Code color settings
  • Added in "CLIP:" parsing to the markers so that if one of those is found, it'll make a clip of the last 10 minutes from that moment

Summary by CodeRabbit

  • New Features

    • Added clip marker support in the VOD player: creators can mark clips, viewers can click-to-seek to clip highlights, and clips show a distinct visual badge.
  • Chores

    • Added a tracked environment variable example and updated .gitignore to ignore local env files.
    • Updated README setup path.
    • Raised Node/tooling requirements and refreshed dependencies.
    • Minor editor and formatter configuration tweaks.

- Add `.env.example` and ignore local env files
- Update Next.js, Clerk, TypeScript, Prettier, and related packages
- Tweak app layout/player files and VS Code color settings
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 1, 2026

@bmdavis419 is attempting to deploy a commit to the Ping Labs Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai bot commented Apr 1, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f922ccb0-7fd3-47d7-9ee3-781257a67e21

📥 Commits

Reviewing files that changed from the base of the PR and between 8d87b2f and 2506a8b.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (4)
  • .env.example
  • .gitignore
  • package.json
  • src/app/(core)/v/[slug]/player.tsx
✅ Files skipped from review due to trivial changes (2)
  • .gitignore
  • .env.example
🚧 Files skipped from review as they are similar to previous changes (2)
  • package.json
  • src/app/(core)/v/[slug]/player.tsx

Walkthrough

Adds a repository env template and ignores real env files, upgrades packages and tooling, tweaks VS Code settings, removes several TypeScript suppression comments, and implements CLIP marker support with clip-specific parsing, timing, UI badge styling, and seek behavior in the VOD player.

Changes

Cohort / File(s) Summary
Env & repo config
/.env.example, /.gitignore, README.md
Added /.env.example with Clerk and Twitch placeholders; .gitignore now ignores .env* but keeps !.env.example; README updated to reference /.env.example.
Editor workspace
.vscode/settings.json
Added workbench.colorCustomizations entries to customize title bar colors.
Package & tooling
package.json, prettier.config.js
Set packageManager: "pnpm@10.33.0", raised Node engine to >=18.17.0, bumped multiple dependencies/devDependencies and moved tool packages to devDependencies; changed Prettier plugin entry from require(...) to "prettier-plugin-tailwindcss".
TS suppression removals
src/app/(core)/layout.tsx, src/app/[slug]/layout.tsx, src/app/[slug]/page.tsx, src/app/_components/layout-helper.tsx
Removed various @ts-expect-error/@ts-ignore comments related to Server Components; no runtime/API signature changes.
VOD player — CLIP support
src/app/(core)/v/[slug]/player.tsx
Introduced CLIP_LABELS and CLIP_LOOKBACK_SECONDS; extended marker parsing to emit type: "clip" and trimmed labels; adjusted start/end/highlight time calculations for clips; included clip in filteredMarkers; click-to-seek uses highlightTime for start/clip; added amber badge styling for clips.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    rect rgba(220,240,255,0.5)
    participant User
    end
    rect rgba(200,230,200,0.5)
    participant UI as VodPlayer UI
    participant Parser as Marker Parser
    participant Video as Video Element
    end

    User->>UI: Click timeline marker (type=start or clip)
    UI->>Parser: Resolve marker -> type, startTime, endTime, highlightTime
    Parser-->>UI: Return marker metadata
    UI->>Video: Seek to highlightTime (or startTime as applicable) and play
    Video-->>UI: Playback updates
    UI->>User: Render marker badge (type-specific styling)
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures both main changes: the new 'clip' feature for markers and the dependency updates, though it's somewhat brief and doesn't distinguish their relative importance.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands and usage tips.

@greptile-apps
Copy link
Copy Markdown

greptile-apps bot commented Apr 1, 2026

Greptile Summary

This PR introduces a new CLIP: marker type to the VOD marker tool — when a marker is prefixed with CLIP: (or CLIP), the exported CSV window spans the 10 minutes before the marker position rather than the time until the next marker. The PR also moves the .env.example to the repo root, adds .env to .gitignore, bumps all major dependencies (Next.js 14.2.35, Clerk 5.7.5, TypeScript 5.9.3, Prettier 3, Tailwind 3.4), and adds some VS Code colour theming.

Key observations:

  • YT Chapters timestamp is wrong for clip markersytChapters uses marker.startTime for every type. For clips, startTime is markerPosition − 610 s (the export-window start), so chapters end up pointing ~10 minutes before the highlighted event instead of at it.
  • Clip marker seek behaviour — clicking a clip entry in the sidebar seeks to the export-window start (~10 min back) rather than the marked moment itself; this may surprise users who expect to jump to the highlight.
  • The two pre-existing console.log calls (getDurationFromTwitchFormat and the player cleanup closure) were not introduced by this PR and are left as-is.

Confidence Score: 4/5

  • Safe to merge after fixing the YT Chapters timestamp issue for clip markers.
  • One P1 defect: the ytChapters output uses the export-window start time for clip markers, producing chapter entries that are ~10 minutes before the actual highlighted moment. This is incorrect output shipped to users. The rest of the changes (dependency bumps, env scaffolding, layout refactor) are clean.
  • src/app/(core)/v/[slug]/player.tsx — specifically the ytChapters reducer and the clip marker seek logic.

Important Files Changed

Filename Overview
src/app/(core)/v/[slug]/player.tsx Core change: adds CLIP marker type with 10-min lookback window; YT Chapters output uses the export-start timestamp for clip markers instead of the actual highlighted moment, producing misaligned chapter entries (P1).
.env.example New file documenting required environment variables with placeholder values; clean addition for developer onboarding.
.gitignore Adds bare .env to gitignore; .env*.local was already covered, so this closes the gap for unadorned .env files.
package.json Bumps Next.js, Clerk, TypeScript, Prettier, Tailwind, and several other dependencies to latest patch/minor versions; pins pnpm packageManager version.
src/app/_components/layout-helper.tsx Layout component restructured to accept an optional slug prop, used by the [slug]/layout.tsx route to highlight the nav correctly; no functional issues found.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Marker description string] --> B{parseMetadataFromMarker}
    B -->|starts with START:/START OF/START| C[type: start]
    B -->|starts with END:/END OF/END| D[type: end]
    B -->|starts with CLIP:/CLIP| E[type: clip]
    B -->|starts with OFFSET/OFFSET:| F[type: offset]
    B -->|no match| C

    C --> G[startTime = markerPos − EXPORT_BUFFER]
    C --> H[endTime = nextMarkerPos + EXPORT_BUFFER]

    E --> I[startTime = markerPos − CLIP_LOOKBACK 600s − EXPORT_BUFFER 10s]
    E --> J[endTime = markerPos + EXPORT_BUFFER 10s]

    G --> K{filteredMarkers}
    I --> K
    F --> K
    D -->|filtered out| L[Excluded from output]

    K --> M[CSV export]
    K --> N[YT Chapters ⚠️ uses startTime for all types]
    K --> O[Sidebar list]

    O --> P{User clicks marker}
    P -->|start| Q[seek to startTime ≈ markerPos]
    P -->|clip ⚠️| R[seek to startTime = 10 min before markerPos]
    P -->|offset| S[update offset state]
Loading

Comments Outside Diff (1)

  1. src/app/(core)/v/[slug]/player.tsx, line 131-136 (link)

    P1 YT Chapters use wrong timestamp for clip markers

    For clip type markers, startTime is calculated as markerPosition - CLIP_LOOKBACK_SECONDS - EXPORT_BUFFER (i.e., ~10 minutes and 10 seconds before the marked moment). The ytChapters reducer uses marker.startTime uniformly for all types, so a clip marked at 1:00:00 would produce a YouTube chapter pointing to ~0:49:50 instead of the actual 1:00:00 highlight.

    For CSV export this is intentional — you want the export window to start 10 minutes back. But for YouTube chapters users expect the chapter to jump to the moment itself, not to the beginning of the clip window.

    Consider using markerPosition (or a displayTime / markerTime field) for clip entries when building ytChapters:

    const ytChapters = filteredMarkers.reduce((acc, marker) => {
      // For clip markers use the actual marked position, not the export start
      const chapterTime =
        marker.type === "clip" ? marker.endTime - EXPORT_BUFFER : marker.startTime;
      const timeStr = dayjs.duration(chapterTime * 1000).format("HH:mm:ss");
      return `${acc}${timeStr} ${marker.label}\n`;
    }, "");

    (You may need to surface markerPosition on the returned marker object for a cleaner fix.)

    Fix in Codex

Fix All in Codex

Reviews (1): Last reviewed commit: "Refresh project config and dependency ve..." | Re-trigger Greptile

Comment on lines +317 to 319
if (marker.type === "start" || marker.type === "clip") {
player?.seek(marker.startTime);
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Clip marker seek jumps to start of export window, not the highlight moment

When a clip marker is clicked, player?.seek(marker.startTime) seeks to markerPosition - 600 - 10 (10 min + 10 s before the actual clip event). This means clicking a clip marker drops the user ~10 minutes before the interesting moment, rather than at the moment itself.

Consider whether seeking to the end of the clip window (the actual highlighted moment) would be more intuitive:

Suggested change
if (marker.type === "start" || marker.type === "clip") {
player?.seek(marker.startTime);
}
if (marker.type === "start") {
player?.seek(marker.startTime);
}
if (marker.type === "clip") {
// seek to the actual clip moment (endTime - buffer)
player?.seek(marker.endTime - EXPORT_BUFFER);
}

Fix in Codex

- Increase the VOD clip lookback from 10 to 15 minutes
- Preserves a longer history for clip creation
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Nitpick comments (2)
.env.example (1)

2-3: Optional: reorder Clerk keys to keep dotenv-linter clean.

Line 2 and Line 3 trigger the UnorderedKey warning. If lint cleanliness is enforced in CI, swap these two lines.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In @.env.example around lines 2 - 3, The .env.example triggers dotenv-linter's
UnorderedKey warning because the Clerk keys are out of alphabetical order; fix
it by swapping the entries so that CLERK_SECRET_KEY comes before
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (i.e., reorder the two variables
CLERK_SECRET_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY) to satisfy the linter.
package.json (1)

20-34: Move build/type/lint packages to devDependencies.

The following packages are currently in dependencies but are only needed at build time and should be moved to devDependencies:

  • @types/node, @types/react, @types/react-dom (type definitions)
  • typescript, eslint, eslint-config-next (build and lint tooling)
  • tailwindcss, postcss, autoprefixer (CSS processing)

None are imported in runtime source code. Keeping them in production dependencies inflates the install size and attack surface unnecessarily.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@package.json` around lines 20 - 34, The listed build/time-only packages in
package.json (specifically "@types/node", "@types/react", "@types/react-dom",
"typescript", "eslint", "eslint-config-next", "tailwindcss", "postcss",
"autoprefixer") should be moved from "dependencies" into "devDependencies":
update package.json by removing these entries from the dependencies object and
adding them with the same versions under devDependencies so they are installed
only in development/build environments and not shipped at runtime.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.gitignore:
- Line 3: The .gitignore currently only ignores ".env" which misses variants
like ".env.production" or ".env.development"; update the ignore rules to broadly
ignore environment files by adding a pattern such as ".env*" and then explicitly
allow the example file by negating ".env.example" so that real env files are
never committed while ".env.example" remains tracked for documentation; modify
the .gitignore entry that currently contains ".env" accordingly.

In `@src/app/`(core)/v/[slug]/player.tsx:
- Around line 100-107: The clip branch is double-applying EXPORT_BUFFER to the
start window: when taggedDescription.type === "clip" startTime subtracts both
CLIP_LOOKBACK_SECONDS and EXPORT_BUFFER, producing a window larger than the
intended CLIP_LOOKBACK_SECONDS. Change the clip start calculation to use
markerPosition - CLIP_LOOKBACK_SECONDS (clamped to 0) and keep the existing
endTime (markerPosition + EXPORT_BUFFER) so the clip exports the intended
lookback; also update the other occurrence referenced (the similar calculation
around the second occurrence) to the same logic.
- Around line 105-110: The endTime calculation currently stops at the next
mockedMarkers[id+1] even if that marker is a CLIP, which lets clip markers
truncate the previous range; change the logic used when taggedDescription.type
!== "clip" to scan forward from id+1 to find the next non-clip marker (e.g., use
mockedMarkers.slice(id+1).find(...) or a simple loop to locate the next marker
whose taggedDescription.type !== "clip") and use that marker's position_seconds
as the boundary (falling back to (videoDuration as
duration.Duration)?.asSeconds?.() when none found), then apply - OFFSET +
EXPORT_BUFFER as before; update the endTime assignment that references
markerPosition, mockedMarkers, id, EXPORT_BUFFER and OFFSET accordingly.

---

Nitpick comments:
In @.env.example:
- Around line 2-3: The .env.example triggers dotenv-linter's UnorderedKey
warning because the Clerk keys are out of alphabetical order; fix it by swapping
the entries so that CLERK_SECRET_KEY comes before
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (i.e., reorder the two variables
CLERK_SECRET_KEY and NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY) to satisfy the linter.

In `@package.json`:
- Around line 20-34: The listed build/time-only packages in package.json
(specifically "@types/node", "@types/react", "@types/react-dom", "typescript",
"eslint", "eslint-config-next", "tailwindcss", "postcss", "autoprefixer") should
be moved from "dependencies" into "devDependencies": update package.json by
removing these entries from the dependencies object and adding them with the
same versions under devDependencies so they are installed only in
development/build environments and not shipped at runtime.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c62c7c52-9ca9-4c23-9de4-989dc021e9c5

📥 Commits

Reviewing files that changed from the base of the PR and between c7a00eb and 32c3554.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (11)
  • .env.example
  • .gitignore
  • .vscode/settings.json
  • README.md
  • package.json
  • prettier.config.js
  • src/app/(core)/layout.tsx
  • src/app/(core)/v/[slug]/player.tsx
  • src/app/[slug]/layout.tsx
  • src/app/[slug]/page.tsx
  • src/app/_components/layout-helper.tsx
💤 Files with no reviewable changes (4)
  • src/app/(core)/layout.tsx
  • src/app/[slug]/page.tsx
  • src/app/[slug]/layout.tsx
  • src/app/_components/layout-helper.tsx

Comment on lines +100 to +107
let startTime =
taggedDescription.type === "clip"
? Math.max(markerPosition - CLIP_LOOKBACK_SECONDS - EXPORT_BUFFER, 0)
: Math.max(markerPosition - EXPORT_BUFFER, 0);

if (endTime < 0) endTime = 1;
let endTime =
taggedDescription.type === "clip"
? markerPosition + EXPORT_BUFFER
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

The clip branch exports 10m20s, not 10m.

CLIP_LOOKBACK_SECONDS already encodes the requested window, but this branch still applies EXPORT_BUFFER on both sides. A CLIP: at 01:00:00 becomes 00:49:50–01:00:10, which overshoots the “previous 10 minutes” behavior in the PR objective.

🛠️ Suggested fix
     let startTime =
       taggedDescription.type === "clip"
-        ? Math.max(markerPosition - CLIP_LOOKBACK_SECONDS - EXPORT_BUFFER, 0)
+        ? Math.max(markerPosition - CLIP_LOOKBACK_SECONDS, 0)
         : Math.max(markerPosition - EXPORT_BUFFER, 0);

     let endTime =
       taggedDescription.type === "clip"
-        ? markerPosition + EXPORT_BUFFER
+        ? markerPosition
         : (mockedMarkers[id + 1]?.position_seconds ??
             (videoDuration as duration.Duration)?.asSeconds?.()) - OFFSET +
           EXPORT_BUFFER;

Also applies to: 212-212

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/app/`(core)/v/[slug]/player.tsx around lines 100 - 107, The clip branch
is double-applying EXPORT_BUFFER to the start window: when
taggedDescription.type === "clip" startTime subtracts both CLIP_LOOKBACK_SECONDS
and EXPORT_BUFFER, producing a window larger than the intended
CLIP_LOOKBACK_SECONDS. Change the clip start calculation to use markerPosition -
CLIP_LOOKBACK_SECONDS (clamped to 0) and keep the existing endTime
(markerPosition + EXPORT_BUFFER) so the clip exports the intended lookback; also
update the other occurrence referenced (the similar calculation around the
second occurrence) to the same logic.

- Adjust VOD marker boundaries and chapter timestamps to use highlight times
- Update player seeks to jump to the visible marker point
- Ignore local env files while keeping `.env.example` tracked
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant