> העתק ציבורי של מדריך המפתחים של ViewStream (לקריאה גם על ידי סוכני AI). רשימת המדריכים: https://www.viewstream.co.il/he/developers/guide/index.md · תיעוד ה-API: https://api.viewstream.co.il/docs/

# Lovable ואפליקציות שרצות בדפדפן בלבד

[Lovable](https://lovable.dev) (וגם Bolt, ‏v0 במצב לקוח, או Vite + React רגיל) בונה אפליקציות שרצות כולן בדפדפן. כל מה
שנמצא בקוד שלהן גלוי לכולם, ולכן **אסור לשים בו מפתח API של ViewStream**. אפליקציה כזו מציגה וידאו מ-ViewStream בעזרת
שני רכיבים ציבוריים:

| מה | איך | מפתח? |
|---|---|---|
| רשימת הסרטונים, התוכניות והצפייה החוזרת | [Sites Delivery API](sites-delivery-api.md) (`https://api.viewstream.co.il/s/v1/{site}/…`), ציבורי ושמור במטמון | לא |
| ניגון | הנגן המתארח ב-`<iframe>` (`https://player.viewstream.co.il/e/{tenant}/vod/{id}`) | לא |

צריכים העלאות או מידע פרטי? השאירו אותם בשרת שלכם (Supabase Edge Function בפרויקט Lovable, או אתר Next.js — ראו
[nextjs.md](nextjs.md)); המפתח נמצא רק שם.

דוגמה עובדת (אותו קוד, Vite + React): https://nextjs.viewstream.co.il/lovable/ — הקוד ב-`integrations/lovable/example`
במאגר של ViewStream.

## 1. מאשרים את האפליקציה ב-Studio

Studio ← **אתרים** ← האתר שלכם ← **Headless**: הפעילו **Allow headless use** והוסיפו את כתובת האפליקציה, למשל
`https://my-app.lovable.app` (וגם הדומיין שלכם, ו-`http://localhost:5173` בזמן פיתוח). בלי זה הדפדפן חוסם את הבקשות (CORS).

כל בקשה מציינת את שם המארח של האפליקציה ב-`?o=` — `o=my-app.lovable.app`, לא כתובת מלאה — כך שהתשובה השמורה מתירה
בדיוק את המקור הזה.

אם בחשבון שלכם יש הגנת ניגון (Studio ← הפצה ← הגנה) עם רשימת אתרים מורשים להטמעה, הוסיפו גם שם את הדומיין של
האפליקציה, אחרת הנגן לא ייטען בתוכה.

## 2. מדביקים את ההנחיה ב-Lovable

החליפו את `<site>` (Studio ← אתרים, המזהה של האתר) ואת `<tenant>` (שם הנגן של החשבון — `GET …/s/v1/<site>/config`
← `player.tenant`).

```text
Build a Hebrew (RTL) video page with ViewStream. Do not use any API key.

Data (public, cached): let o = "o=" + window.location.host
1. GET https://api.viewstream.co.il/s/v1/<site>/route?path=/&<o>  → { page_id }
2. GET https://api.viewstream.co.il/s/v1/<site>/pages/<page_id>?sections=6&<o>
   → sections[].items[]; use the items with type "asset": id, title (a string or {he, en}), description,
     images.poster (16:9 thumbnail URL).
Show the first video in a player at the top and the others as a grid of thumbnails; clicking one plays it.

Player: <iframe src="https://player.viewstream.co.il/e/<tenant>/vod/<id>?lang=he"
  allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="width:100%;aspect-ratio:16/9;border:0">
```

## 3. הקוד שהיא צריכה

```jsx
const API = 'https://api.viewstream.co.il/s/v1/<site>';
const o = `o=${location.host}`;               // headless: this app's host, allowed in Studio

const route = await fetch(`${API}/route?path=/&${o}`).then((r) => r.json());
const page = await fetch(`${API}/pages/${route.page_id}?sections=6&${o}`).then((r) => r.json());
const videos = page.sections.flatMap((s) => s.items || []).filter((i) => i.type === 'asset');

<iframe src={`https://player.viewstream.co.il/e/<tenant>/vod/${video.id}?lang=he`}
  allow="autoplay; fullscreen; picture-in-picture" allowFullScreen />
```

נתיבים נוספים (סרטון אחד, תוכנית והפרקים שלה, ערוצים חיים עם עכשיו/הבא, לוח השידורים, חיפוש) נמצאים ב-
[sites-delivery-api.md](sites-delivery-api.md); ערוץ חי מתנגן עם `…/e/<tenant>/live/<channel>`.

## פתרון תקלות

| מה רואים | הסיבה |
|---|---|
| `blocked by CORS policy` בקונסולה של הדפדפן | כתובת האפליקציה לא ברשימת Headless של האתר, או ש-`o=` חסר או מכיל כתובת מלאה במקום שם מארח |
| אזור הנגן נשאר אפור | רשימת האתרים המורשים להטמעה במדיניות ההגנה לא כוללת את הדומיין של האפליקציה |
| רשימה ריקה | לאתר אין עמוד מפורסם ב-`/`, או שאין בעמוד שורות סרטונים — הוסיפו ב-Studio ← אתרים |