Skip to content

Add Heritage Sites Viewer with YouTube video player - #78

Open
fnobi wants to merge 8 commits into
mainfrom
claude/heritage-site-viewer-VZreA
Open

Add Heritage Sites Viewer with YouTube video player#78
fnobi wants to merge 8 commits into
mainfrom
claude/heritage-site-viewer-VZreA

Conversation

@fnobi

@fnobi fnobi commented May 5, 2026

Copy link
Copy Markdown
Owner

Summary

Introduces a new Heritage Sites Viewer component that displays a curated list of world heritage sites and scenic locations with an embedded YouTube video player. Users can browse through 100+ locations in a sidebar and watch video segments corresponding to each site.

Key Changes

  • New Component: HeritageViewerScene - A full-screen viewer with a sidebar navigation and embedded YouTube player

    • Left sidebar displays a searchable list of heritage sites with Japanese and English names
    • Main area shows an embedded YouTube video player that auto-starts at the correct timestamp for the selected site
    • Bottom info bar displays the currently selected site's name in both languages
    • Empty state guidance when no site is selected
  • New Schema: HeritageSite type and HERITAGE_SITES dataset

    • Defines structure with Japanese name, English name, and video start time
    • Includes 100 heritage sites and scenic locations with precise video timestamps
  • Updated Home Page: Replaced TopScene with HeritageViewerScene as the main page component

Implementation Details

  • Built with React hooks (useState) for site selection state management
  • Styled with Emotion for component-scoped CSS with dark theme (dark gray/gold accent colors)
  • YouTube embed URL dynamically constructed with start parameter for precise video positioning
  • Responsive layout using flexbox with fixed sidebar (280px) and flexible main content area
  • Custom scrollbar styling for the site list
  • Keyboard-accessible list items with hover and active states

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo

YouTube動画のチャプターリスト(93か所)からサイトを選ぶとその映像が埋め込みプレイヤーで再生されるアプリ。サイドバーに全リストを表示し、クリックすると対応する開始秒数からYouTubeが自動再生される。

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo
@vercel

vercel Bot commented May 5, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hinagata-next Ready Ready Preview, Comment May 6, 2026 1:09am

HeritageSiteスキーマにlat/lngフィールドを追加し、全件に座標を付与。

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo
初期表示を世界地図に変更。全スポットに金色ピンを配置し、
ピンクリックでInfoWindowが開き「動画を見る」ボタンから
右パネルに動画を表示する。サイドバーリストクリックで
地図をズームインしInfoWindowを自動表示。

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo
google.maps.MarkerをOverlayViewF+カスタムDOMピンに差し替え。
mapId不要のまま非推奨警告を解消。

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo
- useJsApiLoaderにlanguage:"ja"を追加してマップUIを日本語化
- 動画パネルをサイドカラムからMapArea上の絶対配置オーバーレイに変更し、マップ全面に動画を表示

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo
ピンを22px円に拡大して番号を内側に表示。
サイドバーも同じ番号バッジを先頭に配置し、対応関係を視認可能に。

https://claude.ai/code/session_01G1Ase8ZwqLxkFBW1fBRYjo
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.

2 participants