Add npm registry configuration for Gitea
This commit is contained in:
hibna
+3
-3
@@ -11,6 +11,8 @@ node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
public
|
||||
.npmrc
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
@@ -21,6 +23,4 @@ dist-ssr
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
public/
|
||||
*.sw?
|
||||
@@ -0,0 +1,27 @@
|
||||
# .npmrc Örnek Dosyası
|
||||
# Bu dosyayı diğer projelerinize kopyalayın ve .npmrc olarak kaydedin
|
||||
|
||||
# @alper scope'u için Gitea registry'yi kullan
|
||||
@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
|
||||
# Authentication token (environment variable kullanımı - ÖNERİLEN)
|
||||
//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
|
||||
|
||||
# Alternatif: Doğrudan token (GÜVENLİ DEĞİL - sadece local geliştirme için)
|
||||
# //gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=your-gitea-access-token-here
|
||||
|
||||
# Environment variable nasıl ayarlanır:
|
||||
#
|
||||
# Linux/Mac:
|
||||
# export GITEA_TOKEN=your-token-here
|
||||
# # veya ~/.bashrc veya ~/.zshrc dosyasına ekleyin
|
||||
#
|
||||
# Windows (PowerShell):
|
||||
# $env:GITEA_TOKEN="your-token-here"
|
||||
# # veya sistem environment variables'a ekleyin
|
||||
#
|
||||
# .env dosyası (projede):
|
||||
# GITEA_TOKEN=your-token-here
|
||||
|
||||
# Not: Bu dosyayı .gitignore'a ekleyin!
|
||||
# Asla token'ınızı git'e commit etmeyin.
|
||||
+397
@@ -0,0 +1,397 @@
|
||||
# Gitea Self-Hosted npm Registry'ye Yayınlama Kılavuzu
|
||||
|
||||
Bu kılavuz, `@alper/video-player` paketinin Gitea self-hosted npm registry'ye nasıl yayınlanacağını adım adım açıklar.
|
||||
|
||||
---
|
||||
|
||||
## 📋 Ön Gereksinimler
|
||||
|
||||
- ✅ Çalışan bir Gitea sunucusu
|
||||
- ✅ Gitea hesabınıza erişim
|
||||
- ✅ Node.js ve pnpm/npm kurulu
|
||||
- ✅ Bu proje build edilmiş durumda
|
||||
|
||||
---
|
||||
|
||||
## 🔑 Adım 1: Gitea Access Token Oluşturma
|
||||
|
||||
1. **Gitea web arayüzüne giriş yapın**
|
||||
- Tarayıcınızda `https://gitea.yourdomain.com` adresine gidin
|
||||
- Kullanıcı adı ve şifrenizle giriş yapın
|
||||
|
||||
2. **Settings sayfasına gidin**
|
||||
- Sağ üst köşedeki profil resmine tıklayın
|
||||
- "Settings" seçeneğini seçin
|
||||
|
||||
3. **Applications bölümüne gidin**
|
||||
- Sol menüden "Applications" seçeneğini tıklayın
|
||||
|
||||
4. **Yeni token oluşturun**
|
||||
- "Generate New Token" butonuna tıklayın
|
||||
- **Token Name:** `npm-publish-video-player` (veya istediğiniz bir isim)
|
||||
- **Permissions (Yetkiler):**
|
||||
- ✅ `write:package` - Paket yükleme yetkisi
|
||||
- ✅ `read:package` - Paket okuma yetkisi (diğer projelerde kullanmak için)
|
||||
- "Generate Token" butonuna tıklayın
|
||||
|
||||
5. **Token'ı kopyalayın**
|
||||
- ⚠️ **ÖNEMLİ:** Token sadece bir kez gösterilir!
|
||||
- Token'ı güvenli bir yere kaydedin (örn: password manager)
|
||||
- Örnek token: `1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t`
|
||||
|
||||
---
|
||||
|
||||
## 📝 Adım 2: package.json Dosyasını Düzenleme
|
||||
|
||||
`package.json` dosyasını açın ve aşağıdaki bilgileri **kendi Gitea sunucunuza göre** düzenleyin:
|
||||
|
||||
```json
|
||||
{
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.yourdomain.com/your-username/video-player.git"
|
||||
},
|
||||
"publishConfig": {
|
||||
"registry": "https://gitea.yourdomain.com/api/packages/your-username/npm/"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Değiştirilmesi gerekenler:**
|
||||
- `gitea.yourdomain.com` → Gitea sunucunuzun domain'i
|
||||
- `your-username` → Gitea kullanıcı adınız
|
||||
|
||||
**Örnek:**
|
||||
```json
|
||||
{
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.example.com/alper/video-player.git"
|
||||
},
|
||||
"publishConfig": {
|
||||
"registry": "https://git.example.com/api/packages/alper/npm/"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Adım 3: npm Login ile Kimlik Doğrulama
|
||||
|
||||
Terminal'de aşağıdaki komutu çalıştırın:
|
||||
|
||||
```bash
|
||||
npm config set @alper:registry https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
|
||||
npm login --scope=@alper --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
```
|
||||
|
||||
**Değiştirin:**
|
||||
- `gitea.yourdomain.com` → Gitea domain'iniz
|
||||
- `your-username` → Gitea kullanıcı adınız
|
||||
|
||||
**Giriş bilgileri istenecek:**
|
||||
|
||||
```
|
||||
Username: your-gitea-username
|
||||
Password: 1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t (Adım 1'de oluşturduğunuz token)
|
||||
Email: your-email@example.com
|
||||
```
|
||||
|
||||
**Not:** Password kısmına Gitea şifrenizi değil, **token**'ı girin!
|
||||
|
||||
Başarılı olursa şu mesajı görmelisiniz:
|
||||
```
|
||||
Logged in as your-username on https://gitea.yourdomain.com/api/packages/your-username/npm/.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🏗️ Adım 4: Library Build
|
||||
|
||||
Paketi yayınlamadan önce production build alın:
|
||||
|
||||
```bash
|
||||
# TypeScript compile ve Vite build
|
||||
pnpm run build:lib
|
||||
```
|
||||
|
||||
**Build başarılı olduysa:**
|
||||
- `dist/` klasöründe şu dosyalar oluşacak:
|
||||
- ✅ `video-player.js` (ESM format)
|
||||
- ✅ `video-player.umd.cjs` (UMD format)
|
||||
- ✅ `index.d.ts` (TypeScript type definitions)
|
||||
- ✅ `style.css` (CSS dosyası)
|
||||
|
||||
**Kontrol edin:**
|
||||
```bash
|
||||
ls dist/
|
||||
# veya Windows'ta:
|
||||
dir dist\
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📤 Adım 5: npm Publish
|
||||
|
||||
Artık paketi Gitea registry'ye yayınlayabilirsiniz:
|
||||
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
**Başarılı olursa şu çıktıyı görmelisiniz:**
|
||||
```
|
||||
npm notice
|
||||
npm notice package: @alper/video-player@0.1.0
|
||||
npm notice === Tarball Contents ===
|
||||
npm notice 1.2kB package.json
|
||||
npm notice 8.5kB dist/video-player.js
|
||||
npm notice 7.8kB dist/video-player.umd.cjs
|
||||
npm notice 2.1kB dist/index.d.ts
|
||||
npm notice 3.4kB dist/style.css
|
||||
npm notice === Tarball Details ===
|
||||
npm notice name: @alper/video-player
|
||||
npm notice version: 0.1.0
|
||||
npm notice package size: 23.0 kB
|
||||
npm notice unpacked size: 45.2 kB
|
||||
npm notice total files: 5
|
||||
+ @alper/video-player@0.1.0
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Adım 6: Yayını Doğrulama
|
||||
|
||||
### Gitea Web Arayüzünde Kontrol
|
||||
|
||||
1. Gitea'ya giriş yapın
|
||||
2. Üst menüden "Packages" seçeneğine tıklayın
|
||||
3. `@alper/video-player` paketini görmelisiniz
|
||||
4. Pakete tıklayarak detayları görüntüleyin
|
||||
|
||||
### Komut Satırından Kontrol
|
||||
|
||||
```bash
|
||||
npm view @alper/video-player --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Adım 7: Güncelleme Yayınlama
|
||||
|
||||
Paket üzerinde değişiklik yaptığınızda yeni versiyon yayınlamak için:
|
||||
|
||||
### 1. Versiyonu Güncelle
|
||||
|
||||
```bash
|
||||
# Patch version (0.1.0 → 0.1.1) - Bug fix
|
||||
npm version patch
|
||||
|
||||
# Minor version (0.1.0 → 0.2.0) - Yeni özellik
|
||||
npm version minor
|
||||
|
||||
# Major version (0.1.0 → 1.0.0) - Breaking change
|
||||
npm version major
|
||||
|
||||
# Veya manuel olarak package.json'da version'ı değiştirin
|
||||
```
|
||||
|
||||
### 2. Build Al
|
||||
|
||||
```bash
|
||||
pnpm run build:lib
|
||||
```
|
||||
|
||||
### 3. Yayınla
|
||||
|
||||
```bash
|
||||
npm publish
|
||||
```
|
||||
|
||||
### 4. Git'e Push Et (Opsiyonel)
|
||||
|
||||
```bash
|
||||
git push && git push --tags
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Diğer Projelerde Kullanma
|
||||
|
||||
### Adım 1: Diğer Projenizde .npmrc Oluşturun
|
||||
|
||||
Projenizin root dizininde `.npmrc` dosyası oluşturun:
|
||||
|
||||
```ini
|
||||
@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
|
||||
```
|
||||
|
||||
### Adım 2: Environment Variable Ayarlayın
|
||||
|
||||
```bash
|
||||
# Linux/Mac
|
||||
export GITEA_TOKEN=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t
|
||||
|
||||
# Windows (PowerShell)
|
||||
$env:GITEA_TOKEN="1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t"
|
||||
|
||||
# Veya .env dosyasına ekleyin:
|
||||
echo "GITEA_TOKEN=1a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7q8r9s0t" >> .env
|
||||
```
|
||||
|
||||
### Adım 3: Paketi Yükleyin
|
||||
|
||||
```bash
|
||||
pnpm add @alper/video-player
|
||||
```
|
||||
|
||||
### Adım 4: Kullanın
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function App() {
|
||||
return <VideoPlayer src="/video.mp4" />;
|
||||
}
|
||||
```
|
||||
|
||||
Detaylı kullanım örnekleri için [README-USAGE.md](./README-USAGE.md) dosyasına bakın.
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Sorun Giderme
|
||||
|
||||
### 1. "401 Unauthorized" Hatası
|
||||
|
||||
**Sebep:** Token yanlış veya süresi dolmuş
|
||||
|
||||
**Çözüm:**
|
||||
```bash
|
||||
# Tekrar login olun
|
||||
npm login --scope=@alper --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
```
|
||||
|
||||
### 2. "403 Forbidden" Hatası
|
||||
|
||||
**Sebep:** Token'da `write:package` yetkisi yok
|
||||
|
||||
**Çözüm:**
|
||||
- Gitea'da yeni token oluşturun (Adım 1)
|
||||
- `write:package` yetkisini seçin
|
||||
- Yeni token ile login olun
|
||||
|
||||
### 3. "Package already exists" Hatası
|
||||
|
||||
**Sebep:** Aynı versiyonu tekrar yayınlamaya çalışıyorsunuz
|
||||
|
||||
**Çözüm:**
|
||||
```bash
|
||||
# Versiyonu artırın
|
||||
npm version patch
|
||||
npm publish
|
||||
```
|
||||
|
||||
### 4. "dist/ folder not found" Hatası
|
||||
|
||||
**Sebep:** Build alınmamış
|
||||
|
||||
**Çözüm:**
|
||||
```bash
|
||||
pnpm run build:lib
|
||||
npm publish
|
||||
```
|
||||
|
||||
### 5. ".npmrc not working" Sorunu
|
||||
|
||||
**Sebep:** Environment variable ayarlanmamış
|
||||
|
||||
**Çözüm:**
|
||||
```bash
|
||||
# Token'ı kontrol edin
|
||||
echo $GITEA_TOKEN # Linux/Mac
|
||||
echo $env:GITEA_TOKEN # Windows PowerShell
|
||||
|
||||
# Ayarlanmamışsa ayarlayın
|
||||
export GITEA_TOKEN=your-token # Linux/Mac
|
||||
```
|
||||
|
||||
### 6. "Cannot find module" Hatası (Diğer Projelerde)
|
||||
|
||||
**Sebep:** .npmrc dosyası yok veya yanlış yapılandırılmış
|
||||
|
||||
**Çözüm:**
|
||||
- `.npmrc` dosyasının proje root'unda olduğundan emin olun
|
||||
- Registry URL'inin doğru olduğunu kontrol edin
|
||||
- `pnpm install` veya `npm install` komutunu tekrar çalıştırın
|
||||
|
||||
---
|
||||
|
||||
## 📚 Faydalı Komutlar
|
||||
|
||||
```bash
|
||||
# Hangi registry kullanılıyor?
|
||||
npm config get @alper:registry
|
||||
|
||||
# Login durumunu kontrol et
|
||||
npm whoami --registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
|
||||
# Paket bilgilerini görüntüle
|
||||
npm view @alper/video-player
|
||||
|
||||
# Yüklü versiyonu kontrol et (diğer projelerde)
|
||||
pnpm list @alper/video-player
|
||||
|
||||
# Tüm npm ayarlarını temizle (sorun yaşıyorsanız)
|
||||
npm config delete @alper:registry
|
||||
|
||||
# Package-lock veya pnpm-lock dosyasını temizle
|
||||
rm package-lock.json # veya pnpm-lock.yaml
|
||||
pnpm install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Güvenlik Notları
|
||||
|
||||
1. **Token'ları asla git'e commit etmeyin**
|
||||
- `.npmrc` dosyasını `.gitignore`'a ekleyin
|
||||
- Token'ları environment variable olarak kullanın
|
||||
|
||||
2. **Token yetkilerini minimumda tutun**
|
||||
- Sadece gerekli yetkileri verin (`read:package`, `write:package`)
|
||||
|
||||
3. **Token'ları düzenli olarak yenileyin**
|
||||
- Eski token'ları silin
|
||||
- Yeni token oluşturun ve güncelleyin
|
||||
|
||||
4. **Production ortamda environment variables kullanın**
|
||||
- `.env` dosyasını git'e eklemeyin
|
||||
- CI/CD sistemlerinde secret manager kullanın
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist
|
||||
|
||||
Video Player Yayınlama:
|
||||
- [ ] Gitea access token oluşturdum
|
||||
- [ ] `package.json`'da `repository` ve `publishConfig` güncelledim
|
||||
- [ ] `npm login` ile kimlik doğrulaması yaptım
|
||||
- [ ] `pnpm run build:lib` ile build aldım
|
||||
- [ ] `npm publish` ile yayınladım
|
||||
- [ ] Gitea web arayüzünde paketi gördüm
|
||||
|
||||
Diğer Projelerde Kullanma:
|
||||
- [ ] Projede `.npmrc` dosyası oluşturdum
|
||||
- [ ] `GITEA_TOKEN` environment variable'ını ayarladım
|
||||
- [ ] `pnpm add @alper/video-player` ile yükledim
|
||||
- [ ] CSS dosyasını import ettim
|
||||
- [ ] VideoPlayer component'ini kullandım
|
||||
|
||||
---
|
||||
|
||||
**Başarılar! 🎉**
|
||||
|
||||
Artık video player kütüphanenizi tüm projelerinizde kullanabilirsiniz.
|
||||
+601
@@ -0,0 +1,601 @@
|
||||
# @alper/video-player - Kullanım Kılavuzu
|
||||
|
||||
Modern, özellik zengin React video player kütüphanesi. HLS streaming, altyazılar, klavye kısayolları, dokunmatik hareketler ve daha fazlasını destekler.
|
||||
|
||||
## 📦 Kurulum
|
||||
|
||||
### Gitea Self-Hosted Registry'den Yükleme
|
||||
|
||||
1. **Projenizde `.npmrc` dosyası oluşturun:**
|
||||
|
||||
```ini
|
||||
@alper:registry=https://gitea.yourdomain.com/api/packages/your-username/npm/
|
||||
//gitea.yourdomain.com/api/packages/your-username/npm/:_authToken=${GITEA_TOKEN}
|
||||
```
|
||||
|
||||
2. **Environment variable ayarlayın (önerilen):**
|
||||
|
||||
```bash
|
||||
# Linux/Mac
|
||||
export GITEA_TOKEN=your-gitea-access-token
|
||||
|
||||
# Windows (PowerShell)
|
||||
$env:GITEA_TOKEN="your-gitea-access-token"
|
||||
|
||||
# veya .env dosyasına ekleyin
|
||||
GITEA_TOKEN=your-gitea-access-token
|
||||
```
|
||||
|
||||
3. **Paketi yükleyin:**
|
||||
|
||||
```bash
|
||||
pnpm add @alper/video-player
|
||||
# veya
|
||||
npm install @alper/video-player
|
||||
# veya
|
||||
yarn add @alper/video-player
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Temel Kullanım
|
||||
|
||||
### Minimum Örnek
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="https://example.com/video.mp4"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Özelliklerle Birlikte
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="https://example.com/video.mp4"
|
||||
poster="https://example.com/poster.jpg"
|
||||
autoplay={false}
|
||||
loop={false}
|
||||
muted={false}
|
||||
controls={true}
|
||||
keyboardShortcuts={true}
|
||||
pictureInPicture={true}
|
||||
className="my-video-player"
|
||||
onPlay={() => console.log('Video başladı!')}
|
||||
onPause={() => console.log('Video durdu!')}
|
||||
onTimeUpdate={(time) => console.log('Zaman:', time)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Tema Özelleştirme
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer, PlayerTheme } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
const myTheme: PlayerTheme = {
|
||||
primaryColor: '#3b82f6', // Ana buton rengi
|
||||
accentColor: '#2563eb', // Hover rengi
|
||||
backgroundColor: '#1f2937', // Arka plan
|
||||
textColor: '#f9fafb', // Metin rengi
|
||||
};
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="/video.mp4"
|
||||
theme={myTheme}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📺 HLS Streaming Desteği
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function StreamingVideo() {
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="https://example.com/stream/master.m3u8"
|
||||
poster="/poster.jpg"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Not:** HLS desteği için `hls.js` otomatik olarak yüklenir (optional dependency).
|
||||
|
||||
---
|
||||
|
||||
## 📝 Altyazı Desteği
|
||||
|
||||
### VTT veya SRT Formatında
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer, SubtitleTrack } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
const subtitles: SubtitleTrack[] = [
|
||||
{
|
||||
label: 'Türkçe',
|
||||
src: '/subtitles/turkish.vtt',
|
||||
srcLang: 'tr',
|
||||
},
|
||||
{
|
||||
label: 'English',
|
||||
src: '/subtitles/english.vtt',
|
||||
srcLang: 'en',
|
||||
},
|
||||
{
|
||||
label: 'Español',
|
||||
src: '/subtitles/spanish.srt',
|
||||
srcLang: 'es',
|
||||
},
|
||||
];
|
||||
|
||||
function VideoWithSubtitles() {
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="/video.mp4"
|
||||
subtitles={subtitles}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Desteklenen formatlar:** VTT, SRT
|
||||
|
||||
---
|
||||
|
||||
## ⌨️ Klavye Kısayolları
|
||||
|
||||
Varsayılan olarak aktif. Devre dışı bırakmak için `keyboardShortcuts={false}` kullanın.
|
||||
|
||||
| Tuş | Eylem |
|
||||
|-----|-------|
|
||||
| `Space` | Oynat/Duraklat |
|
||||
| `←` | 5 saniye geri |
|
||||
| `→` | 5 saniye ileri |
|
||||
| `↑` | Sesi artır (%5) |
|
||||
| `↓` | Sesi azalt (%5) |
|
||||
| `M` | Sesi kapat/aç |
|
||||
| `F` | Tam ekran |
|
||||
| `P` | Picture-in-Picture |
|
||||
| `0-9` | Videonun %0-%90'ına git |
|
||||
|
||||
---
|
||||
|
||||
## 👆 Dokunmatik Hareketler
|
||||
|
||||
Mobil cihazlarda otomatik olarak aktiftir:
|
||||
|
||||
- **Tek dokunma:** Kontrolleri göster/gizle
|
||||
- **Çift dokunma:** Oynat/Duraklat
|
||||
- **Sağa kaydır:** 10 saniye ileri
|
||||
- **Sola kaydır:** 10 saniye geri
|
||||
|
||||
---
|
||||
|
||||
## 🎛️ İleri Seviye: Context API Kullanımı
|
||||
|
||||
Kendi özel kontrollerinizi oluşturabilirsiniz:
|
||||
|
||||
```tsx
|
||||
import {
|
||||
PlayerProvider,
|
||||
usePlayerContext,
|
||||
VideoPlayer
|
||||
} from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function CustomControls() {
|
||||
const {
|
||||
videoState,
|
||||
play,
|
||||
pause,
|
||||
seek,
|
||||
setVolume,
|
||||
toggleFullscreen,
|
||||
setPlaybackRate
|
||||
} = usePlayerContext();
|
||||
|
||||
return (
|
||||
<div className="custom-controls">
|
||||
{/* Oynat/Duraklat */}
|
||||
<button onClick={() => videoState.playing ? pause() : play()}>
|
||||
{videoState.playing ? '⏸ Duraklat' : '▶ Oynat'}
|
||||
</button>
|
||||
|
||||
{/* İleri/Geri */}
|
||||
<button onClick={() => seek(videoState.currentTime - 10)}>
|
||||
⏪ -10s
|
||||
</button>
|
||||
<button onClick={() => seek(videoState.currentTime + 10)}>
|
||||
+10s ⏩
|
||||
</button>
|
||||
|
||||
{/* Ses Kontrolü */}
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
value={videoState.volume}
|
||||
onChange={(e) => setVolume(parseFloat(e.target.value))}
|
||||
/>
|
||||
<span>{Math.round(videoState.volume * 100)}%</span>
|
||||
|
||||
{/* Zaman Göstergesi */}
|
||||
<div>
|
||||
{formatTime(videoState.currentTime)} / {formatTime(videoState.duration)}
|
||||
</div>
|
||||
|
||||
{/* Oynatma Hızı */}
|
||||
<select
|
||||
value={videoState.playbackRate}
|
||||
onChange={(e) => setPlaybackRate(parseFloat(e.target.value))}
|
||||
>
|
||||
<option value="0.5">0.5x</option>
|
||||
<option value="1">Normal</option>
|
||||
<option value="1.5">1.5x</option>
|
||||
<option value="2">2x</option>
|
||||
</select>
|
||||
|
||||
{/* Tam Ekran */}
|
||||
<button onClick={toggleFullscreen}>
|
||||
{videoState.fullscreen ? '🗗 Çıkış' : '🗖 Tam Ekran'}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatTime(seconds: number): string {
|
||||
const mins = Math.floor(seconds / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
return `${mins}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<PlayerProvider>
|
||||
<VideoPlayer
|
||||
src="/video.mp4"
|
||||
controls={false} // Yerleşik kontrolleri gizle
|
||||
/>
|
||||
<CustomControls />
|
||||
</PlayerProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔌 Next.js Entegrasyonu
|
||||
|
||||
Next.js'te SSR (Server-Side Rendering) sorunlarını önlemek için:
|
||||
|
||||
```tsx
|
||||
'use client'; // App Router için
|
||||
|
||||
import dynamic from 'next/dynamic';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
// VideoPlayer'ı client-side only olarak yükle
|
||||
const VideoPlayer = dynamic(
|
||||
() => import('@alper/video-player').then(mod => mod.VideoPlayer),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
export default function VideoPage() {
|
||||
return (
|
||||
<div className="container">
|
||||
<h1>Video Player</h1>
|
||||
<VideoPlayer
|
||||
src="/videos/demo.mp4"
|
||||
poster="/images/poster.jpg"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📊 Props API Referansı
|
||||
|
||||
### VideoPlayerProps
|
||||
|
||||
| Prop | Tip | Varsayılan | Açıklama |
|
||||
|------|-----|-----------|----------|
|
||||
| `src` | `string` | **zorunlu** | Video URL'i (MP4, HLS, vb.) |
|
||||
| `poster` | `string` | - | Poster resim URL'i |
|
||||
| `autoplay` | `boolean` | `false` | Otomatik oynat |
|
||||
| `loop` | `boolean` | `false` | Döngü modu |
|
||||
| `muted` | `boolean` | `false` | Sessiz başlat |
|
||||
| `controls` | `boolean` | `true` | Kontrolleri göster |
|
||||
| `subtitles` | `SubtitleTrack[]` | - | Altyazı listesi |
|
||||
| `theme` | `PlayerTheme` | - | Renk teması |
|
||||
| `keyboardShortcuts` | `boolean` | `true` | Klavye desteği |
|
||||
| `pictureInPicture` | `boolean` | `true` | PiP desteği |
|
||||
| `className` | `string` | - | CSS sınıfı |
|
||||
| `style` | `CSSProperties` | - | Inline stil |
|
||||
|
||||
### Event Callbacks
|
||||
|
||||
| Callback | Parametre | Açıklama |
|
||||
|----------|-----------|----------|
|
||||
| `onPlay` | `() => void` | Video başladığında |
|
||||
| `onPause` | `() => void` | Video durduğunda |
|
||||
| `onEnded` | `() => void` | Video bittiğinde |
|
||||
| `onTimeUpdate` | `(time: number) => void` | Zaman güncellendiğinde |
|
||||
| `onVolumeChange` | `(volume: number) => void` | Ses değiştiğinde |
|
||||
| `onError` | `(error: Error) => void` | Hata oluştuğunda |
|
||||
| `onLoadedMetadata` | `() => void` | Metadata yüklendiğinde |
|
||||
| `onSeeking` | `() => void` | Arama başladığında |
|
||||
| `onSeeked` | `() => void` | Arama bittiğinde |
|
||||
|
||||
### SubtitleTrack
|
||||
|
||||
```typescript
|
||||
interface SubtitleTrack {
|
||||
label: string; // Görünen isim (ör: "Türkçe")
|
||||
src: string; // Altyazı dosya URL'i
|
||||
srcLang: string; // Dil kodu (ör: "tr", "en")
|
||||
}
|
||||
```
|
||||
|
||||
### PlayerTheme
|
||||
|
||||
```typescript
|
||||
interface PlayerTheme {
|
||||
primaryColor?: string; // Ana renk (varsayılan: #ef4444)
|
||||
accentColor?: string; // Vurgu rengi (varsayılan: #dc2626)
|
||||
backgroundColor?: string; // Arka plan rengi
|
||||
textColor?: string; // Metin rengi
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 usePlayerContext Hook API
|
||||
|
||||
```typescript
|
||||
const {
|
||||
// Video State
|
||||
videoState: {
|
||||
playing: boolean;
|
||||
currentTime: number;
|
||||
duration: number;
|
||||
buffered: TimeRanges;
|
||||
volume: number;
|
||||
muted: boolean;
|
||||
playbackRate: number;
|
||||
fullscreen: boolean;
|
||||
pictureInPicture: boolean;
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
seeking: boolean;
|
||||
},
|
||||
|
||||
// UI State
|
||||
uiState: {
|
||||
controlsVisible: boolean;
|
||||
settingsOpen: boolean;
|
||||
volumeControlOpen: boolean;
|
||||
},
|
||||
|
||||
// Settings
|
||||
settings: {
|
||||
quality: string | null;
|
||||
subtitle: string | null;
|
||||
playbackRate: number;
|
||||
},
|
||||
|
||||
// Actions
|
||||
play: () => void;
|
||||
pause: () => void;
|
||||
seek: (time: number) => void;
|
||||
setVolume: (volume: number) => void;
|
||||
toggleMute: () => void;
|
||||
setPlaybackRate: (rate: number) => void;
|
||||
toggleFullscreen: () => void;
|
||||
togglePictureInPicture: () => void;
|
||||
|
||||
} = usePlayerContext();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 💡 Kullanım Örnekleri
|
||||
|
||||
### 1. Analytics Entegrasyonu
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function AnalyticsVideo() {
|
||||
const trackEvent = (event: string, data?: any) => {
|
||||
// Analytics servisinize gönderin
|
||||
console.log('Analytics:', event, data);
|
||||
};
|
||||
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="/video.mp4"
|
||||
onPlay={() => trackEvent('video_play')}
|
||||
onPause={() => trackEvent('video_pause')}
|
||||
onEnded={() => trackEvent('video_complete')}
|
||||
onTimeUpdate={(time) => {
|
||||
// Her %25'te bir event gönder
|
||||
if (time % 25 === 0) {
|
||||
trackEvent('video_progress', { percentage: time });
|
||||
}
|
||||
}}
|
||||
onError={(error) => trackEvent('video_error', { message: error.message })}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 2. Playlist Sistemi
|
||||
|
||||
```tsx
|
||||
import { useState } from 'react';
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
const playlist = [
|
||||
{ id: 1, title: 'Video 1', src: '/videos/1.mp4' },
|
||||
{ id: 2, title: 'Video 2', src: '/videos/2.mp4' },
|
||||
{ id: 3, title: 'Video 3', src: '/videos/3.mp4' },
|
||||
];
|
||||
|
||||
function PlaylistPlayer() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const currentVideo = playlist[currentIndex];
|
||||
|
||||
const handleEnded = () => {
|
||||
// Sonraki videoya geç
|
||||
if (currentIndex < playlist.length - 1) {
|
||||
setCurrentIndex(currentIndex + 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<VideoPlayer
|
||||
key={currentVideo.id}
|
||||
src={currentVideo.src}
|
||||
onEnded={handleEnded}
|
||||
/>
|
||||
|
||||
<div className="playlist">
|
||||
{playlist.map((video, index) => (
|
||||
<button
|
||||
key={video.id}
|
||||
onClick={() => setCurrentIndex(index)}
|
||||
className={index === currentIndex ? 'active' : ''}
|
||||
>
|
||||
{video.title}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Çoklu Kalite Desteği
|
||||
|
||||
```tsx
|
||||
import { VideoPlayer } from '@alper/video-player';
|
||||
import '@alper/video-player/styles.css';
|
||||
|
||||
function QualityVideo() {
|
||||
// HLS kullanıyorsanız otomatik kalite seçimi vardır
|
||||
// Manuel kalite için farklı kaynak URL'leri kullanabilirsiniz
|
||||
|
||||
return (
|
||||
<VideoPlayer
|
||||
src="/videos/stream/master.m3u8" // HLS master playlist
|
||||
// Otomatik olarak kaliteler algılanır ve ayarlarda gösterilir
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Sorun Giderme
|
||||
|
||||
### CSS Stilleri Yüklenmiyor
|
||||
|
||||
Emin olun ki CSS dosyasını import ettiniz:
|
||||
|
||||
```tsx
|
||||
import '@alper/video-player/styles.css';
|
||||
```
|
||||
|
||||
### HLS Videoları Çalışmıyor
|
||||
|
||||
1. `hls.js` yüklü mü kontrol edin:
|
||||
```bash
|
||||
pnpm add hls.js
|
||||
```
|
||||
|
||||
2. Video URL'inin `.m3u8` uzantılı olduğundan emin olun
|
||||
|
||||
### TypeScript Hataları
|
||||
|
||||
`tsconfig.json`'da `skipLibCheck: true` ayarlayın veya paketi güncelleyin:
|
||||
|
||||
```bash
|
||||
pnpm update @alper/video-player
|
||||
```
|
||||
|
||||
### Next.js'te Hydration Hatası
|
||||
|
||||
VideoPlayer'ı `dynamic` import ile yükleyin (`ssr: false`):
|
||||
|
||||
```tsx
|
||||
const VideoPlayer = dynamic(
|
||||
() => import('@alper/video-player').then(mod => mod.VideoPlayer),
|
||||
{ ssr: false }
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📦 Bundle Boyutu
|
||||
|
||||
- **Gzipped:** ~8KB (hls.js hariç)
|
||||
- **hls.js ile:** ~100KB (optional, sadece HLS kullanıyorsanız yüklenir)
|
||||
|
||||
---
|
||||
|
||||
## 🔄 Güncelleme
|
||||
|
||||
```bash
|
||||
# En son versiyonu yükle
|
||||
pnpm update @alper/video-player
|
||||
|
||||
# Belirli bir versiyonu yükle
|
||||
pnpm add @alper/video-player@0.2.0
|
||||
|
||||
# Hangi versiyon yüklü?
|
||||
pnpm list @alper/video-player
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Lisans
|
||||
|
||||
MIT
|
||||
|
||||
---
|
||||
|
||||
## 💬 Destek
|
||||
|
||||
Sorularınız için projeyi geliştiren kişiyle iletişime geçin.
|
||||
+1
-1
@@ -8,7 +8,7 @@ function App() {
|
||||
const [useDemo, setUseDemo] = useState(true)
|
||||
|
||||
// Demo video URLs (you can replace with your own)
|
||||
const demoVideoUrl = '/Stormy Weather_98515ce9/master.m3u8'
|
||||
const demoVideoUrl = '/Stormy Weather_c7e908aa/master.m3u8'
|
||||
const demoPoster = undefined
|
||||
|
||||
const demoSubtitles: SubtitleTrack[] = [
|
||||
|
||||
+8
-1
@@ -57,5 +57,12 @@
|
||||
"media"
|
||||
],
|
||||
"author": "Alper",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.hibna.com.tr/hibna/video-player.git"
|
||||
},
|
||||
"publishConfig": {
|
||||
"registry": "https://gitea.hibna.com.tr/api/packages/hibna/npm/"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user