hibna/player
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: apply phase1 DX cleanup for private registry

Browse Source
This commit is contained in:
hibna
2026-02-12 18:27:50 +03:00
parent 8a32c5c1b3
commit fcd2a14a05
21 changed files with 281 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DOCUMENTATION.md
+65 -62
View File
@@ -1,9 +1,9 @@
# 🎬 @alper/video-player - Tam Dökümantasyon
# 🎬 @source/player - Tam Dökümantasyon
**Modern, zengin özellikli ve hafif React video oynatıcı kütüphanesi**
[![npm version](https://img.shields.io/npm/v/@alper/video-player.svg?style=flat-square)](https://www.npmjs.com/package/@alper/video-player)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@alper/video-player?style=flat-square)](https://bundlephobia.com/package/@alper/video-player)
[![npm version](https://img.shields.io/npm/v/@source/player.svg?style=flat-square)](https://www.npmjs.com/package/@source/player)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@source/player?style=flat-square)](https://bundlephobia.com/package/@source/player)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-blue?style=flat-square)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
@@ -47,15 +47,15 @@
## 🌟 Genel Bakış
`@alper/video-player`, React uygulamaları için özel olarak tasarlanmış, modern bir video oynatıcı kütüphanesidir. HLS streaming, RTMP/FLV desteği, çoklu altyazı ve ses parçaları, kalite değiştirme ve daha fazlası gibi gelişmiş özellikleri içerir.
`@source/player`, React uygulamaları için özel olarak tasarlanmış, modern bir video oynatıcı kütüphanesidir. HLS streaming, RTMP/FLV desteği, çoklu altyazı ve ses parçaları, kalite değiştirme ve daha fazlası gibi gelişmiş özellikleri içerir.
### Neden @alper/video-player?
### Neden @source/player?
| Özellik | @alper/video-player | video.js | react-player | plyr |
| Özellik | @source/player | video.js | react-player | plyr |
|---------|---------------------|----------|--------------|------|
| **Paket Boyutu (gzipped)** | **~15KB** ✅ | ~500KB ❌ | ~50KB ⚠️ | ~30KB ⚠️ |
| **Runtime Bağımlılıkları** | **0** ✅ | Çok ❌ | Az ⚠️ | Az ⚠️ |
| **React Native** | **Evet** ✅ | Wrapper ⚠️ | **Evet** ✅ | Wrapper ⚠️ |
| **React (Web)** | **Evet** ✅ | Wrapper ⚠️ | **Evet** ✅ | Wrapper ⚠️ |
| **TypeScript Native** | **Evet** ✅ | Types ⚠️ | Kısmi ⚠️ | Types ⚠️ |
| **HLS Desteği** | **Evet** ✅ | Evet ✅ | Evet ✅ | Hayır ❌ |
| **RTMP/FLV Desteği** | **Evet** ✅ | Hayır ❌ | Hayır ❌ | Hayır ❌ |
@@ -100,7 +100,7 @@ npm install -g pnpm
### 2. .npmrc Yapılandırması
`@alper` scope'lu paketlerin Gitea registry'den çekilmesi için projenizin kök dizininde bir `.npmrc` dosyası oluşturmanız gerekir.
`@source` scope'lu paketlerin Gitea registry'den çekilmesi için projenizin kök dizininde bir `.npmrc` dosyası oluşturmanız gerekir.
#### Adım 2.1: .npmrc Dosyası Oluşturma
@@ -119,20 +119,20 @@ New-Item -Path .npmrc -ItemType File
`.npmrc` dosyasını aşağıdaki içerikle doldurun:
```ini
# @alper scope'u için Gitea registry'yi kullan
@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/
# @source scope'u için private registry'yi kullan
@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/
# Authentication token
# Token'ınızı almak için: https://gitea.hibna.com.tr/user/settings/applications
# Token'ınızı almak için: https://gits.hibna.com.tr/user/settings/applications
# "Generate New Token" butonuna tıklayın ve "read:package" yetkisini seçin
//gitea.hibna.com.tr/api/packages/hibna/npm/:_authToken=YOUR_TOKEN_HERE
//gits.hibna.com.tr/api/packages/hibna/npm/:_authToken=YOUR_TOKEN_HERE
```
**ÖNEMLİ:** `YOUR_TOKEN_HERE` kısmını kendi Gitea access token'ınız ile değiştirin!
#### Adım 2.3: Gitea Access Token Alma
1. Gitea hesabınıza giriş yapın: https://gitea.hibna.com.tr
1. Gitea hesabınıza giriş yapın: https://gits.hibna.com.tr
2. Sağ üst köşeden profil ikonuna tıklayın → **Settings**
3. Sol menüden **Applications** seçeneğine tıklayın
4. **Manage Access Tokens** bölümünde **Generate New Token** butonuna tıklayın
@@ -168,28 +168,28 @@ Daha güvenli bir yöntem için token'ı environment variable olarak saklayabili
**.npmrc dosyası:**
```ini
@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/
//gitea.hibna.com.tr/api/packages/hibna/npm/:_authToken=${GITEA_TOKEN}
@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/
//gits.hibna.com.tr/api/packages/hibna/npm/:_authToken=${GITS_NPM_TOKEN}
```
**Environment variable ayarlama:**
```bash
# Linux/Mac (.bashrc veya .zshrc dosyasına ekleyin)
export GITEA_TOKEN=your-actual-token-here
export GITS_NPM_TOKEN=your-actual-token-here
# Windows (PowerShell)
$env:GITEA_TOKEN="your-actual-token-here"
$env:GITS_NPM_TOKEN="your-actual-token-here"
# Windows (Kalıcı - Sistem Environment Variables)
# Sistem Özellikler → Gelişmiş → Ortam Değişkenleri → Yeni
# Değişken adı: GITEA_TOKEN
# Değişken adı: GITS_NPM_TOKEN
# Değişken değeri: your-actual-token-here
```
**CI/CD için (GitHub Actions, GitLab CI, vb.):**
Repository settings → Secrets → `GITEA_TOKEN` adında bir secret oluşturun.
Repository settings → Secrets → `GITS_NPM_TOKEN` adında bir secret oluşturun.
### 3. Kütüphaneyi Yükleme
@@ -197,13 +197,13 @@ Repository settings → Secrets → `GITEA_TOKEN` adında bir secret oluşturun.
```bash
# npm ile
npm install @alper/video-player
npm install @source/player
# veya pnpm ile (önerilen - daha hızlı)
pnpm add @alper/video-player
pnpm add @source/player
# veya yarn ile
yarn add @alper/video-player
yarn add @source/player
```
### 4. Peer Dependencies
@@ -234,15 +234,15 @@ npm install --save-optional hls.js flv.js
Kurulumun başarılı olduğunu doğrulamak için:
```bash
npm list @alper/video-player
npm list @source/player
# veya
pnpm list @alper/video-player
pnpm list @source/player
```
Çıktı şöyle olmalı:
```
your-project@1.0.0
└─┬ @alper/video-player@0.1.5
└─┬ @source/player@0.1.5
```
### Sorun Giderme
@@ -254,11 +254,11 @@ your-project@1.0.0
**Problem: "404 Not Found" hatası**
- Registry URL'inin doğru olduğundan emin olun
- `@alper:registry=https://gitea.hibna.com.tr/api/packages/hibna/npm/`
- `@source:registry=https://gits.hibna.com.tr/api/packages/hibna/npm/`
- İnternet bağlantınızı kontrol edin
- Gitea sunucusunun erişilebilir olduğundan emin olun
**Problem: "Cannot find module '@alper/video-player'"**
**Problem: "Cannot find module '@source/player'"**
- `node_modules` klasörünü silin ve yeniden yükleyin:
```bash
rm -rf node_modules package-lock.json
@@ -272,8 +272,8 @@ your-project@1.0.0
### Temel Kullanım
```tsx
import { VideoPlayer } from '@alper/video-player'
import '@alper/video-player/styles.css'
import { VideoPlayer } from '@source/player'
import '@source/player/styles.css'
function App() {
return (
@@ -630,7 +630,7 @@ function detectVideoProtocol(url: string): {
**Kullanım:**
```typescript
import { detectVideoProtocol } from '@alper/video-player'
import { detectVideoProtocol } from '@source/player'
const info = detectVideoProtocol('https://example.com/stream.m3u8')
console.log(info.protocol) // 'hls'
@@ -690,7 +690,7 @@ Merhaba dünya
**Dönüşüm Fonksiyonu:**
```typescript
import { parseSRT, createSubtitleBlobURL } from '@alper/video-player'
import { parseSRT, createSubtitleBlobURL } from '@source/player'
const srtContent = '...' // SRT içeriği
const vttContent = parseSRT(srtContent)
@@ -737,7 +737,7 @@ const blobUrl = createSubtitleBlobURL(vttContent)
**Programmatic Control:**
```tsx
import { usePlayerContext } from '@alper/video-player'
import { usePlayerContext } from '@source/player'
function CustomSubtitleToggle() {
const { settings, setSubtitle } = usePlayerContext()
@@ -789,7 +789,7 @@ function CustomSubtitleToggle() {
**Programmatic Control:**
```tsx
import { usePlayerContext } from '@alper/video-player'
import { usePlayerContext } from '@source/player'
function AudioTrackSelector() {
const { settings, setAudioTrack } = usePlayerContext()
@@ -867,7 +867,7 @@ function AudioTrackSelector() {
**Otomatik Kalite (Adaptive Bitrate):**
```typescript
import { setHlsQualityLevel } from '@alper/video-player'
import { setHlsQualityLevel } from '@source/player'
setHlsQualityLevel(hlsInstance, null) // Auto
```
@@ -888,7 +888,7 @@ Kullanıcı Settings → Quality menüsünden kalite seçer.
**Programmatic Control:**
```tsx
import { usePlayerContext } from '@alper/video-player'
import { usePlayerContext } from '@source/player'
function QualitySelector() {
const { settings, setQuality } = usePlayerContext()
@@ -974,7 +974,7 @@ function QualitySelector() {
**Custom hook ile:**
```tsx
import { useKeyboardShortcuts } from '@alper/video-player'
import { useKeyboardShortcuts } from '@source/player'
function MyComponent() {
const { videoRef, containerRef } = usePlayerContext()
@@ -1039,7 +1039,7 @@ function MyComponent() {
**Custom hook ile:**
```tsx
import { useTouchGestures } from '@alper/video-player'
import { useTouchGestures } from '@source/player'
function MyComponent() {
const { videoRef, containerRef } = usePlayerContext()
@@ -1411,20 +1411,20 @@ interface PlayerContextValue {
```typescript
// Ana bileşen
import { VideoPlayer } from '@alper/video-player'
import { VideoPlayer } from '@source/player'
```
### Exported Hooks
```typescript
// Player context hook
import { usePlayerContext } from '@alper/video-player'
import { usePlayerContext } from '@source/player'
// Klavye kısayolları hook'u
import { useKeyboardShortcuts } from '@alper/video-player'
import { useKeyboardShortcuts } from '@source/player'
// Dokunmatik jest hook'u
import { useTouchGestures } from '@alper/video-player'
import { useTouchGestures } from '@source/player'
```
**usePlayerContext Kullanımı:**
@@ -1458,7 +1458,7 @@ function CustomControl() {
```typescript
// Zaman formatlama
import { formatTime, parseTime } from '@alper/video-player'
import { formatTime, parseTime } from '@source/player'
formatTime(125) // "2:05"
formatTime(3665) // "1:01:05"
@@ -1470,7 +1470,7 @@ import {
parseSRT,
createSubtitleBlobURL,
fetchSubtitle
} from '@alper/video-player'
} from '@source/player'
const srtContent = "1\n00:00:01,000 --> 00:00:04,000\nMerhaba"
const vttContent = parseSRT(srtContent)
@@ -1483,7 +1483,7 @@ import {
getCORSErrorMessage,
isCORSError,
checkVideoCORS
} from '@alper/video-player'
} from '@source/player'
const validation = validateVideoURL(url)
if (!validation.valid) {
@@ -1505,7 +1505,7 @@ import {
getTranslations,
detectBrowserLanguage,
translations
} from '@alper/video-player'
} from '@source/player'
const lang = detectBrowserLanguage() // "tr", "en", vb.
const t = getTranslations('tr')
@@ -1520,8 +1520,8 @@ console.log(translations.tr.quality) // "Kalite"
### Temel MP4 Oynatma
```tsx
import { VideoPlayer } from '@alper/video-player'
import '@alper/video-player/styles.css'
import { VideoPlayer } from '@source/player'
import '@source/player/styles.css'
function App() {
return (
@@ -1603,7 +1603,7 @@ function VideoWithAnalytics() {
### Custom Kontroller
```tsx
import { VideoPlayer, usePlayerContext } from '@alper/video-player'
import { VideoPlayer, usePlayerContext } from '@source/player'
function CustomControls() {
const {
@@ -1660,7 +1660,7 @@ function App() {
```tsx
import { useState } from 'react'
import { VideoPlayer } from '@alper/video-player'
import { VideoPlayer } from '@source/player'
const videos = [
{ id: 1, src: 'video1.mp4', title: 'Video 1' },
@@ -1706,7 +1706,7 @@ function Playlist() {
### CORS Hata Yönetimi
```tsx
import { VideoPlayer, isCORSError, getCORSErrorMessage } from '@alper/video-player'
import { VideoPlayer, isCORSError, getCORSErrorMessage } from '@source/player'
import { useState } from 'react'
function VideoWithCORSHandling() {
@@ -1762,7 +1762,7 @@ import {
hasTouch,
isIOSSafari,
hasVolumeControl
} from '@alper/video-player'
} from '@source/player'
// Safari'de native HLS var mı kontrol et
if (hasNativeHLS()) {
@@ -1795,7 +1795,7 @@ if (hasVolumeControl()) {
### Manual HLS.js Setup
```typescript
import { loadHls, setupHls } from '@alper/video-player'
import { loadHls, setupHls } from '@source/player'
async function customHlsSetup() {
const videoElement = document.querySelector('video')
@@ -1829,7 +1829,7 @@ async function customHlsSetup() {
### Custom Subtitle Processing
```typescript
import { parseSRT, createSubtitleBlobURL, fetchSubtitle } from '@alper/video-player'
import { parseSRT, createSubtitleBlobURL, fetchSubtitle } from '@source/player'
async function loadCustomSubtitle(url: string) {
// SRT dosyasını fetch et
@@ -2077,7 +2077,7 @@ interface Translations {
### Programmatic Access
```typescript
import { getTranslations, detectBrowserLanguage } from '@alper/video-player'
import { getTranslations, detectBrowserLanguage } from '@source/player'
// Tarayıcı dilini tespit et
const browserLang = detectBrowserLanguage() // "tr", "en-US", vb.
@@ -2170,7 +2170,7 @@ export const translations: Record<string, Translations> = {
```tsx
import { useEffect } from 'react'
import { VideoPlayer } from '@alper/video-player'
import { VideoPlayer } from '@source/player'
function MonitoredVideo() {
useEffect(() => {
@@ -2204,7 +2204,7 @@ function MonitoredVideo() {
import { lazy, Suspense } from 'react'
const VideoPlayer = lazy(() =>
import('@alper/video-player').then(module => ({
import('@source/player').then(module => ({
default: module.VideoPlayer
}))
)
@@ -2300,7 +2300,7 @@ Kütüphane, eski tarayıcılar için otomatik polyfill içerir:
**Tespit:**
```typescript
import { isCORSError, getCORSErrorMessage } from '@alper/video-player'
import { isCORSError, getCORSErrorMessage } from '@source/player'
const handleError = (error: Error) => {
if (isCORSError(error)) {
@@ -2437,7 +2437,7 @@ function RobustVideoPlayer() {
```bash
# Repository'yi klonlayın
git clone https://gitea.hibna.com.tr/hibna/video-player.git
git clone https://gits.hibna.com.tr/hibna/video-player.git
cd video-player
# Bağımlılıkları yükleyin
@@ -2542,7 +2542,7 @@ Katkılarınızı bekliyoruz! Lütfen şu adımları takip edin:
```bash
# Repository'yi fork edin (Gitea UI'dan)
# Fork'unuzu klonlayın
git clone https://gitea.hibna.com.tr/YOUR_USERNAME/video-player.git
git clone https://gits.hibna.com.tr/YOUR_USERNAME/video-player.git
cd video-player
```
@@ -2623,9 +2623,9 @@ SOFTWARE.
## 📞 İletişim
- **Repository:** https://gitea.hibna.com.tr/hibna/video-player
- **NPM Registry:** https://gitea.hibna.com.tr/api/packages/hibna/npm/
- **Issues:** https://gitea.hibna.com.tr/hibna/video-player/issues
- **Repository:** https://gits.hibna.com.tr/hibna/video-player
- **NPM Registry:** https://gits.hibna.com.tr/api/packages/hibna/npm/
- **Issues:** https://gits.hibna.com.tr/hibna/video-player/issues
- **Author:** Alper
---
@@ -2645,3 +2645,6 @@ Bu proje, aşağıdaki açık kaynak kütüphanelerden ilham almıştır:
**Built with ❤️ using React, TypeScript, and Vite**
*Son güncelleme: 2024*