이어보기

TV SDK의 이어보기(Resume Playback) 기능을 사용하여 사용자가 마지막으로 시청한 위치부터 재생하는 방법을 안내합니다.

동작 원리

SDK는 onExit 콜백으로 종료 시 재생 정보를 제공하고,initialPosition으로 시작 위치를 지정합니다. 저장/복원 로직은 앱에서 구현합니다.

PlayerExitInfo

onExit 콜백에서 전달되는 정보입니다.

type PlayerExitInfo = {
    currentTime: number;    // 현재 재생 위치 (초)
    duration: number;       // 총 길이 (초)
    playIndex: number;      // 현재 플레이리스트 인덱스
    sourceUri: string;      // 현재 재생 중인 URL
};

전체 예제

import React, { useRef, useState, useEffect, useCallback } from 'react';
import { View, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { VpePlayer } from '@sgrsoft/vpe-reactnative-tv-sdk';
import type { PlayerHandle, PlayerExitInfo } from '@sgrsoft/vpe-reactnative-tv-sdk';

export default function ResumePlayer() {
    const playerRef = useRef<PlayerHandle>(null);
    const [initialPosition, setInitialPosition] = useState<number | undefined>();
    const [ready, setReady] = useState(false);

    const sourceUri = 'https://example.com/video.m3u8';

    useEffect(() => {
        AsyncStorage.getItem(`resume:${sourceUri}`).then(val => {
            if (val) {
                const saved = JSON.parse(val);
                // 완료 근처(5초 이내)면 처음부터
                if (saved.time >= saved.duration - 5) {
                    setInitialPosition(0);
                } else {
                    setInitialPosition(saved.time);
                }
            }
            setReady(true);
        });
    }, []);

    const handleExit = useCallback((info: PlayerExitInfo) => {
        AsyncStorage.setItem(`resume:${info.sourceUri}`, JSON.stringify({
            time: info.currentTime,
            duration: info.duration,
        }));
    }, []);

    if (!ready) return <View style={styles.container} />;

    return (
        <View style={styles.container}>
            <VpePlayer
                ref={playerRef}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{ file: sourceUri }],
                    autostart: true,
                }}
                initialPosition={initialPosition}
                onExit={handleExit}
                onBack={() => { /* navigation.goBack() */ }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#000' },
});