From 3f10c3ca277b3dabe516d8b34a1590912c700216 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 15 Nov 2025 01:14:02 +0000 Subject: [PATCH 1/5] Remove ISSUE_94_EVALUATION.md --- ISSUE_94_EVALUATION.md | 309 ----------------------------------------- 1 file changed, 309 deletions(-) delete mode 100644 ISSUE_94_EVALUATION.md diff --git a/ISSUE_94_EVALUATION.md b/ISSUE_94_EVALUATION.md deleted file mode 100644 index e688374..0000000 --- a/ISSUE_94_EVALUATION.md +++ /dev/null @@ -1,309 +0,0 @@ -# Issue #94 Evaluation: Hiding Suggested Videos After Video Completion - -**Issue:** [#94 - Can we hide the suggested videos after completing the video?](https://github.com/ibrahimcesar/react-lite-youtube-embed/issues/94) -**Status:** Open -**Created:** July 26, 2023 -**Evaluated:** November 15, 2025 - ---- - -## Summary - -The user is requesting the ability to hide YouTube's suggested/related videos that appear after a video finishes playing in the react-lite-youtube-embed component. - ---- - -## Current Situation - -### YouTube Platform Limitation - -**The repository owner's assessment is correct: this is outside the library's control.** - -Here's why: - -1. **YouTube Changed `rel=0` Behavior (September 2018)** - - **Before:** `rel=0` would completely disable related videos - - **After:** `rel=0` only shows related videos **from the same channel** - - **Cannot be fully disabled** - this is a YouTube platform decision - -2. **Current `rel=0` Behavior** - - When set, shows videos from the same channel only - - Only truly "hides" related videos if the channel has **no other videos** - - Not a reliable solution for most use cases - -3. **No Other Native Parameter Works** - - YouTube deprecated/removed other parameters that might have helped - - The iframe embed API provides no parameter to fully disable related videos - ---- - -## Codebase Analysis - -### Current Implementation - -The library **already supports** passing the `rel` parameter through the `params` prop: - -```tsx - -``` - -**However, there's a naming issue in the code:** - -**Line 92** in `src/lib/index.tsx`: -```typescript -rel?: string; // This prop is defined but... -``` - -**Line 230** in `src/lib/index.tsx`: -```typescript -const rel = props.rel ? "prefetch" : "preload"; // ...used for resource hints, NOT YouTube rel! -``` - -**Finding:** The `rel` prop currently controls resource hint behavior (``), not the YouTube `rel` parameter. This is a naming collision that could confuse developers. - ---- - -## Potential Solutions - -### ❌ Solution 1: Add Direct `rel` Parameter Support -**Status:** Not recommended due to naming collision - -The library could add explicit support: -```typescript -// In LiteYouTubeProps -youtubeRel?: "0" | "1"; // Avoid collision with existing `rel` prop -``` - -**Cons:** -- Adds a prop for limited benefit (doesn't fully hide videos) -- Can already be achieved via `params="rel=0"` -- Misleading - users will expect it to fully hide videos when it doesn't - -### ✅ Solution 2: Document the Workaround (Recommended) -**Status:** Most practical approach - -Add clear documentation about: -1. The YouTube platform limitation -2. How to use `params="rel=0"` for same-channel videos only -3. The advanced workaround using YouTube Player API - -### ✅ Solution 3: Add YouTube Player API Integration (Advanced) -**Status:** Could be a future enhancement - -The **only reliable way** to prevent related videos is to use the YouTube IFrame Player API to programmatically stop the video when it ends: - -```javascript -// When the video ends (state = 0), call player.stopVideo() -player.on('stateChange', function(event) { - if (event.data === 0) { // 0 = ended - player.stopVideo(); // Returns to thumbnail - } -}); -``` - -This could be implemented as: -- A new optional prop: `hideRelatedVideos?: boolean` -- Requires `enableJsApi={true}` to work -- Adds complexity but provides the only true solution - ---- - -## Recommendations - -### 1. **Documentation Update** (Immediate - High Priority) - -Add a FAQ section to README.md: - -```markdown -## Frequently Asked Questions - -### Can I hide the suggested/related videos after my video ends? - -Due to YouTube's platform policies (changed in 2018), it's **no longer possible to completely hide related videos** using embed parameters alone. - -**Your options:** - -1. **Limit to same-channel videos** (partial solution): - ```tsx - - ``` - Note: This only shows videos from your channel, not all related videos. Only effective if your channel has few/no other videos. - -2. **Use YouTube Player API** (advanced solution): - Enable the JS API and programmatically stop the video when it ends: - ```tsx - - ``` - Then use the YouTube IFrame API to listen for the `onStateChange` event and call `player.stopVideo()` when the video ends (state === 0). This returns the player to the thumbnail view. - - See: [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) - -**Related issue:** [#94](https://github.com/ibrahimcesar/react-lite-youtube-embed/issues/94) -``` - -### 2. **Fix Naming Collision** (Medium Priority) - -The `rel` prop should be renamed to avoid confusion: - -```typescript -// Current (confusing): -rel?: string; // Actually controls preload/prefetch - -// Suggested fix: -resourceHint?: "preload" | "prefetch"; // Clear purpose -``` - -Or deprecate it entirely if it's not widely used. - -### 3. **Consider Advanced Feature** (Low Priority - Future Enhancement) - -Add built-in support for auto-stopping video when it ends: - -```typescript -export interface LiteYouTubeProps { - // ... existing props - - /** - * Automatically stop video when it ends to prevent showing related videos. - * Requires enableJsApi={true} and adds YouTube Player API integration. - * @default false - */ - stopOnEnd?: boolean; -} -``` - -**Implementation complexity:** Medium -**Benefits:** -- Solves the problem completely -- Better developer experience -- No need for users to implement YouTube API themselves - -**Considerations:** -- Adds external script dependency (YouTube IFrame API) -- Increases bundle size -- Requires careful iframe communication handling -- Would need new callback props for player events - ---- - -## Issue Resolution - -### Recommended Action - -**Close the issue** with the following response: - ---- - -> Thanks for raising this! Unfortunately, this is a limitation of YouTube's embed platform, not something we can solve at the library level. -> -> **Background:** YouTube changed the `rel=0` parameter behavior in September 2018. It no longer hides all related videos—it only limits them to videos from the same channel. -> -> **Current workarounds:** -> -> 1. **Use `params="rel=0"`** to limit related videos to your channel only (works well if your channel has few videos): -> ```tsx -> -> ``` -> -> 2. **Use the YouTube Player API** (advanced) to programmatically stop the video when it ends. Enable the JS API and listen for the ended state: -> ```tsx -> -> ``` -> Then use the [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) to call `player.stopVideo()` when `event.data === 0` (ended state). -> -> We're adding documentation about this to the README in an upcoming release. We may consider adding built-in support for auto-stopping videos in the future, but for now, the workarounds above are the best options available. -> -> Closing as this is a YouTube platform limitation, not a library bug. Feel free to comment if you have questions about the workarounds! - ---- - -### Alternative Action - -**Leave open** and add label `enhancement` if you plan to implement the `stopOnEnd` feature in the future. - ---- - -## Code Changes Required (If Documenting Only) - -### File: `README.md` - -**Location:** After line 633 (Usage section) - -**Add new section:** - -```markdown -## ❓ Frequently Asked Questions - -### Can I completely hide suggested/related videos? - -No, this is a YouTube platform limitation. In September 2018, YouTube changed how the `rel=0` parameter works—it now only limits related videos to the same channel, rather than hiding them completely. - -**Available options:** - -1. **Limit to same-channel videos:** - ```tsx - - ``` - -2. **Use YouTube Player API to auto-stop** (prevents related videos by returning to thumbnail): - ```tsx - - ``` - Then implement the YouTube IFrame API to detect when the video ends and call `player.stopVideo()`. - -See [Issue #94](https://github.com/ibrahimcesar/react-lite-youtube-embed/issues/94) for discussion. - -### Why doesn't `rel=0` hide all related videos anymore? - -YouTube changed this behavior in 2018 for business reasons. The embed API no longer provides any way to completely disable related videos using parameters alone. See [YouTube's official documentation](https://developers.google.com/youtube/player_parameters#rel) for details. -``` - ---- - -## Testing - -No code changes required if only documenting. If implementing `stopOnEnd` feature: - -- [ ] Unit tests for stopOnEnd prop -- [ ] Integration test with YouTube Player API -- [ ] Test iframe communication -- [ ] Test that player.stopVideo() is called on end event -- [ ] Test backwards compatibility (feature is opt-in) - ---- - -## Conclusion - -**Issue Validity:** Valid user request, but **not solvable at the library level** due to YouTube platform constraints. - -**Recommendation:** -1. ✅ **Document the limitation and workarounds** (immediate) -2. ✅ **Fix the `rel` prop naming collision** (near-term) -3. 🔄 **Consider `stopOnEnd` feature** (future enhancement) -4. ✅ **Close issue with explanation** or label as `wontfix` / `external-limitation` - -**Impact:** Low - this is a known YouTube limitation affecting all embed implementations, not specific to this library. - -**User Experience:** Can be improved through better documentation and potentially a future opt-in feature for advanced users. - ---- - -*Evaluation completed by Claude on November 15, 2025* From 200f6c329a9956ed47762d28532549f54ad1ee92 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 15 Nov 2025 01:16:39 +0000 Subject: [PATCH 2/5] Fix TypeScript linting error: remove unused catch parameter Removed unused error variable 'e' from catch block at line 309 to resolve @typescript-eslint/no-unused-vars error. --- src/lib/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/index.tsx b/src/lib/index.tsx index 8bf56aa..f6c9040 100644 --- a/src/lib/index.tsx +++ b/src/lib/index.tsx @@ -306,7 +306,7 @@ function LiteYouTubeEmbedComponent( ); } } - } catch (e) { + } catch { // Not JSON or invalid data, ignore } }; From b741237a3b6f3ee46e6ce41c58d1bdb641c4939e Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 15 Nov 2025 01:18:33 +0000 Subject: [PATCH 3/5] Remove link checker workflow and documentation - Deleted .github/workflows/links.yml - Removed Link Checker section from GITHUB_ACTIONS.md --- .github/GITHUB_ACTIONS.md | 20 --------- .github/workflows/links.yml | 81 ------------------------------------- 2 files changed, 101 deletions(-) delete mode 100644 .github/workflows/links.yml diff --git a/.github/GITHUB_ACTIONS.md b/.github/GITHUB_ACTIONS.md index c3b7eb4..dce468b 100644 --- a/.github/GITHUB_ACTIONS.md +++ b/.github/GITHUB_ACTIONS.md @@ -117,26 +117,6 @@ This document provides an overview of all GitHub Actions workflows configured fo --- -### Link Checker (`links.yml`) - -**Trigger:** -- PRs touching markdown/HTML files -- Pushes to `main` with markdown/HTML changes -- Weekly on Sundays at 9:00 AM UTC -- Manual workflow dispatch - -**Purpose:** Ensure documentation links aren't broken - -**Features:** -- Checks all `.md` and `.html` files -- Retries failed links (3 attempts) -- Creates report artifact -- Comments on PRs if broken links found - -**Required:** Optional but helpful for documentation quality - ---- - ## Automation ### Dependabot (`dependabot.yml`) diff --git a/.github/workflows/links.yml b/.github/workflows/links.yml deleted file mode 100644 index 781cc47..0000000 --- a/.github/workflows/links.yml +++ /dev/null @@ -1,81 +0,0 @@ -name: Check Links - -on: - pull_request: - paths: - - '**.md' - - '**.html' - - 'docs/**' - push: - branches: - - main - paths: - - '**.md' - - '**.html' - - 'docs/**' - schedule: - # Run every Sunday at 9:00 AM UTC - - cron: '0 9 * * 0' - workflow_dispatch: - -jobs: - link-check: - name: Check Broken Links - runs-on: ubuntu-latest - - steps: - - name: Checkout repository - uses: actions/checkout@v5 - - - name: Check links in markdown files - uses: lycheeverse/lychee-action@v2 - with: - # Check all markdown and html files - args: --verbose --no-progress --accept 200,204,429 --timeout 20 --retry-wait-time 10 --max-retries 3 './**/*.md' './**/*.html' - # Fail on broken links - fail: true - # Don't check private/internal links - # Format: json - format: markdown - # Output file - output: lychee-report.md - - - name: Upload link check report - if: always() - uses: actions/upload-artifact@v5 - with: - name: link-check-report - path: lychee-report.md - retention-days: 30 - - - name: Create summary - if: always() - run: | - echo "## 🔗 Link Check Results" >> $GITHUB_STEP_SUMMARY - echo "" >> $GITHUB_STEP_SUMMARY - if [ -f lychee-report.md ]; then - cat lychee-report.md >> $GITHUB_STEP_SUMMARY - else - echo "No broken links found! ✅" >> $GITHUB_STEP_SUMMARY - fi - - - name: Comment PR with results - if: failure() && github.event_name == 'pull_request' - uses: actions/github-script@v8 - with: - script: | - const fs = require('fs'); - let report = '## 🔗 Broken Links Found\n\n'; - - if (fs.existsSync('lychee-report.md')) { - report += fs.readFileSync('lychee-report.md', 'utf8'); - } else { - report += 'Please check the action logs for details.'; - } - - github.rest.issues.createComment({ - issue_number: context.issue.number, - owner: context.repo.owner, - repo: context.repo.repo, - body: report - }); From 616e198720c78a49fd1d7d2d5af59706f68252da Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 15 Nov 2025 01:19:37 +0000 Subject: [PATCH 4/5] fix: downgrade React to 18.2.0 in demo for Next.js compatibility Next.js 14.2.33 requires React ^18.2.0 as a peer dependency. Downgraded both react and react-dom from 19.2.0/18.2.0 to ^18.2.0 to resolve ERESOLVE errors in CI. Fixes Performance Audit workflow failure. --- demo/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/package.json b/demo/package.json index 47e7be8..8730a59 100644 --- a/demo/package.json +++ b/demo/package.json @@ -12,8 +12,8 @@ "babel-plugin-prismjs": "^2.1.0", "next": "14.2.33", "prismjs": "^1.27.0", - "react": "19.2.0", - "react-dom": "18.2.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-lite-youtube-embed": "2.6.0" }, "volta": { From fad1c59b3e7903d29e3dd01c1fb6c5c974fc7bb9 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 15 Nov 2025 01:22:33 +0000 Subject: [PATCH 5/5] Remove Lighthouse CI workflow and configuration - Deleted .github/workflows/lighthouse.yml - Deleted .github/lighthouse/ directory with lighthouserc.json - Removed Lighthouse CI section from GITHUB_ACTIONS.md - Removed Lighthouse Failures troubleshooting section The Performance Audit workflow was causing issues and is no longer needed. --- .github/GITHUB_ACTIONS.md | 43 ------------------ .github/lighthouse/lighthouserc.json | 33 -------------- .github/workflows/lighthouse.yml | 68 ---------------------------- 3 files changed, 144 deletions(-) delete mode 100644 .github/lighthouse/lighthouserc.json delete mode 100644 .github/workflows/lighthouse.yml diff --git a/.github/GITHUB_ACTIONS.md b/.github/GITHUB_ACTIONS.md index dce468b..0a3ab37 100644 --- a/.github/GITHUB_ACTIONS.md +++ b/.github/GITHUB_ACTIONS.md @@ -176,39 +176,6 @@ This document provides an overview of all GitHub Actions workflows configured fo --- -## Performance - -### Lighthouse CI (`lighthouse.yml`) - -**Trigger:** -- PRs touching source/demo files -- Manual workflow dispatch - -**Purpose:** Track performance metrics for the demo page - -**Metrics tested:** -- Performance score (min 90%) -- Accessibility (min 90%) -- Best Practices (min 90%) -- SEO (min 90%) -- Core Web Vitals: - - First Contentful Paint (< 2s) - - Largest Contentful Paint (< 2.5s) - - Cumulative Layout Shift (< 0.1) - - Total Blocking Time (< 300ms) - - Time to Interactive (< 3.5s) - -**Configuration:** `.github/lighthouse/lighthouserc.json` - -**Features:** -- Runs 3 times and averages results -- Uploads reports as artifacts -- Desktop preset with moderate throttling - -**Required:** Optional but highly recommended for web components - ---- - ## Release & Deployment ### Automated Release (`auto-release.yml`) @@ -432,16 +399,6 @@ npm run size **Fix:** Review and update code to be compatible with new versions -### Lighthouse Failures - -**Common issues:** -1. Performance regression in code -2. Accessibility issues added -3. Missing alt text or ARIA labels -4. Large bundle increases - -**Fix:** Review the Lighthouse report artifact for specific recommendations - --- ## Best Practices diff --git a/.github/lighthouse/lighthouserc.json b/.github/lighthouse/lighthouserc.json deleted file mode 100644 index 75df885..0000000 --- a/.github/lighthouse/lighthouserc.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "ci": { - "collect": { - "staticDistDir": "./demo/out", - "numberOfRuns": 3, - "settings": { - "preset": "desktop", - "throttling": { - "rttMs": 40, - "throughputKbps": 10240, - "cpuSlowdownMultiplier": 1 - } - } - }, - "assert": { - "preset": "lighthouse:recommended", - "assertions": { - "categories:performance": ["error", {"minScore": 0.9}], - "categories:accessibility": ["error", {"minScore": 0.9}], - "categories:best-practices": ["error", {"minScore": 0.9}], - "categories:seo": ["error", {"minScore": 0.9}], - "first-contentful-paint": ["warn", {"maxNumericValue": 2000}], - "largest-contentful-paint": ["warn", {"maxNumericValue": 2500}], - "cumulative-layout-shift": ["warn", {"maxNumericValue": 0.1}], - "total-blocking-time": ["warn", {"maxNumericValue": 300}], - "interactive": ["warn", {"maxNumericValue": 3500}] - } - }, - "upload": { - "target": "temporary-public-storage" - } - } -} diff --git a/.github/workflows/lighthouse.yml b/.github/workflows/lighthouse.yml deleted file mode 100644 index 9af7039..0000000 --- a/.github/workflows/lighthouse.yml +++ /dev/null @@ -1,68 +0,0 @@ -name: Lighthouse CI - -on: - pull_request: - branches: - - main - paths: - - 'src/**' - - 'demo/**' - - 'package.json' - workflow_dispatch: - -jobs: - lighthouse: - name: Performance Audit - runs-on: ubuntu-latest - - steps: - - name: Checkout repository - uses: actions/checkout@v5 - - - name: Setup Node 20 - uses: actions/setup-node@v6 - with: - node-version: 20 - cache: 'npm' - - - name: Install dependencies - run: npm ci - - - name: Build library - run: npm run build - - - name: Install demo dependencies - working-directory: ./demo - run: npm ci - - - name: Build demo - working-directory: ./demo - env: - NODE_ENV: production - run: npm run build - - - name: Serve demo and run Lighthouse - uses: treosh/lighthouse-ci-action@v12 - with: - # Serve the built demo - temporaryPublicStorage: true - runs: 3 - urls: | - http://localhost:3000 - uploadArtifacts: true - configPath: './.github/lighthouse/lighthouserc.json' - - - name: Create Lighthouse report summary - if: always() - run: | - echo "## ⚡ Lighthouse Performance Report" >> $GITHUB_STEP_SUMMARY - echo "" >> $GITHUB_STEP_SUMMARY - echo "Performance metrics for the demo page have been collected." >> $GITHUB_STEP_SUMMARY - echo "" >> $GITHUB_STEP_SUMMARY - echo "### Metrics Tested:" >> $GITHUB_STEP_SUMMARY - echo "- Performance" >> $GITHUB_STEP_SUMMARY - echo "- Accessibility" >> $GITHUB_STEP_SUMMARY - echo "- Best Practices" >> $GITHUB_STEP_SUMMARY - echo "- SEO" >> $GITHUB_STEP_SUMMARY - echo "" >> $GITHUB_STEP_SUMMARY - echo "See the detailed report in the artifacts section above." >> $GITHUB_STEP_SUMMARY