@rehberimsensin/agora-video-conference

Vue 3 Agora Video Conference Module - Factory Pattern ile getActivePinia hatası çözüldü!

🚀 Özellikler

• ✅ Factory Pattern - getActivePinia hatası yok!
• 🎥 Video Konferans - Agora SDK ile
• 📱 Responsive Design - Mobil ve desktop uyumlu
• 🖥️ Ekran Paylaşımı - Gelişmiş ekran paylaşımı
• 🎨 Whiteboard - Netless whiteboard entegrasyonu
• 📹 Recording - Cloud recording desteği
• 💬 RTM - Real-time messaging
• 🎯 Multi-Layout - 4 farklı layout seçeneği
• 📊 Logging - JSON tabanlı dosya logging
• 🌈 Tema Sistemi - Dinamik tema değişimi

📦 Kurulum

npm install @rehberimsensin/agora-video-conference

🔧 Kullanım

1. Store'ları Oluştur

import { createPinia } from 'pinia'
import { 
  createAgoraStore, 
  createLayoutStore, 
  createNotificationStore
} from '@rehberimsensin/agora-video-conference'

// Pinia instance oluştur
const pinia = createPinia()

// Store'ları oluştur
const agoraStore = createAgoraStore(pinia)
const layoutStore = createLayoutStore(pinia)
const notificationStore = createNotificationStore(pinia)

2. Bileşeni Kullan

<template>
  <div id="app">
    <AgoraConference 
      :options="agoraOptions"
      :agoraStore="agoraStore"
      :layoutStore="layoutStore"
      :notificationStore="notificationStore"
      @change="handleChange"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { createPinia } from 'pinia'
import { 
  AgoraConference,
  createAgoraStore,
  createLayoutStore,
  createNotificationStore,
  registerAgoraStores
} from '@rehberimsensin/agora-video-conference'

// Pinia instance oluştur
const pinia = createPinia()

// Store'ları oluştur
const agoraStore = createAgoraStore(pinia)
const layoutStore = createLayoutStore(pinia)
const notificationStore = createNotificationStore(pinia)

// Store'ları Pinia'ya register et
registerAgoraStores(pinia)

// Konfigürasyon
const agoraOptions = ref({
  channelName: 'test-123456',
  autoJoin: true,
  userUid: null,
  tokenEndpoint: null,
  logActive: true
})

// Event handler
const handleChange = (event) => {
  const { type, data } = event
  console.log('Event:', type, data)
}
</script>

🏗️ Factory Pattern Avantajları

❌ Eski Yöntem (getActivePinia Hatası)

// ❌ Bu hata verir!
import { useAgoraStore } from '@agora-package'

export function useMeeting() {
  const agoraStore = useAgoraStore() // ❌ getActivePinia hatası!
  // ...
}

✅ Yeni Yöntem (Factory Pattern)

// ✅ Bu çalışır!
import { createAgoraStore } from '@rehberimsensin/agora-video-conference'

export function useMeeting(agoraStore) {
  // Store parametre olarak geçilir
  if (!agoraStore) {
    throw new Error('agoraStore gerekli!')
  }
  // ...
}

🔍 Neden Factory Pattern?

1. Pinia Context Paylaşımı: Ana uygulama ile paket arasında Pinia context'i paylaşılır
2. getActivePinia Hatası Yok: Store'lar ana uygulamadan alınan Pinia instance ile oluşturulur
3. Daha İyi Kontrol: Store'ların ne zaman ve nasıl oluşturulacağı kontrol edilir
4. NPM Paketi Uyumlu: NPM paketi olarak yayınlandığında çalışır

📚 API Referansı

Store Factory Functions

// Agora Store
const agoraStore = createAgoraStore(piniaInstance)

// Layout Store  
const layoutStore = createLayoutStore(piniaInstance)

// Notification Store
const notificationStore = createNotificationStore(piniaInstance)

// Tüm store'ları register et
registerAgoraStores(piniaInstance)

Composable Functions

// Store parametresi gerekli
const meeting = useMeeting(agoraStore)
const video = useVideo(agoraStore)
const rtm = useRTM(agoraStore)
const whiteboard = useNetlessWhiteboard(agoraStore)
const deviceSettings = useDeviceSettings(agoraStore)

🎯 Event Types

const handleChange = (event) => {
  const { type, data } = event
  
  switch (type) {
    case 'joined':           // Kanala katılım
    case 'left':            // Kanaldan ayrılım
    case 'error':           // Hata durumu
    case 'user-joined':     // Yeni kullanıcı
    case 'user-left':       // Kullanıcı ayrıldı
    case 'connection-state-change': // Bağlantı durumu
    case 'token-requested': // Token istendi
    case 'token-received':  // Token alındı
    case 'settings-changed': // Ayar değişikliği
  }
}

🌟 Örnek Projeler

• Test Uygulaması - Basit entegrasyon örneği
• Ana Proje - Orijinal implementasyon

📄 Lisans

MIT License - Detaylar

🤝 Katkıda Bulunma

1. Fork yapın
2. Feature branch oluşturun (git checkout -b feature/amazing-feature)
3. Commit yapın (git commit -m 'Add amazing feature')
4. Push yapın (git push origin feature/amazing-feature)
5. Pull Request oluşturun

📞 İletişim

• Geliştirici: Umran Terece
• Proje: Rehberim Sensin
• GitHub: @umranterece

Not: Bu modül, getActivePinia hatasını çözmek için Factory Pattern kullanır. Store'ları ana uygulamadan alınan Pinia instance ile oluşturur.