CardActions.tsx

// Watch online
let dataWatchCard = Data({
    currentCardId: null,
    prevCardId: null,
    currentCardTitleId: null,
    prevCardTitleId: null,
    currentTitleId: null,
    prevTitleId: null,
    currentPlayBtnId: null,
    prevPlayBtnId: null
});

export const CardOpacity: Override = props => {
    const states = {
        opacity: {
            start: 0.2,
            end: 1
        }
    };

    const time = 0.3;

    let cardOpacity = Animatable(states.opacity.start);

    if (dataWatchCard.currentCardId === props.id) {
        animate.ease(cardOpacity, states.opacity.end, { duration: time });
    } else if (dataWatchCard.prevCardId === props.id) {
        cardOpacity = Animatable(states.opacity.end);
        animate.ease(cardOpacity, states.opacity.start, { duration: time });
    } else if (dataWatchCard.currentCardId === null) {
        dataWatchCard.currentCardId = props.id;
    }

    return {
        opacity: cardOpacity
    };
};

export const CardContentOpacity: Override = props => {
    const states = {
        opacity: {
            start: 0,
            end: 1
        }
    };
    const time = 0.3;
    let contentOpacity = Animatable(states.opacity.start);
    if (dataWatchCard.currentCardTitleId === props.id) {
        animate.ease(contentOpacity, states.opacity.end, { duration: time });
    } else if (dataWatchCard.prevCardTitleId === props.id) {
        contentOpacity = Animatable(states.opacity.end);
        animate.ease(contentOpacity, states.opacity.start, { duration: time });
    } else if (dataWatchCard.currentCardTitleId === null) {
        dataWatchCard.currentCardTitleId = props.id;
    }
    return {
        opacity: contentOpacity
    };
};

export const CardTitlePosition: Override = props => {
    const states = {
        left: {
            start: 20,
            end: 0
        }
    };
    const time = 0.2;
    let titleLeftPos = Animatable(states.left.start);
    if (dataWatchCard.currentTitleId === props.id) {
        animate.ease(titleLeftPos, states.left.end, { duration: time });
    } else if (dataWatchCard.prevTitleId === props.id) {
        titleLeftPos = Animatable(states.left.end);
        animate.ease(titleLeftPos, states.left.start, { duration: time });
    } else if (dataWatchCard.currentTitleId === null) {
        dataWatchCard.currentTitleId = props.id;
    }
    return {
        left: titleLeftPos
    };
};

export const PlayBtn: Override = props => {
    const states = {
        opacity: {
            start: 0,
            end: 1
        },
        scale: {
            start: 0.6,
            end: 1.2
        }
    };
    const time = 0.2;
    let playOpacity = Animatable(states.opacity.start);
    let playScale = Animatable(states.scale.start);
    if (dataWatchCard.currentPlayBtnId === props.id) {
        animate.ease(playOpacity, states.opacity.end, { duration: time });
        animate.ease(playScale, states.scale.end, { duration: time });
    } else if (dataWatchCard.prevPlayBtnId === props.id) {
        playOpacity = Animatable(states.opacity.end);
        playScale = Animatable(states.scale.end);
        animate.ease(playOpacity, states.opacity.start, { duration: time });
        animate.ease(playScale, states.scale.start, { duration: time });
    } else if (dataWatchCard.currentPlayBtnId === null) {
        dataWatchCard.currentPlayBtnId = props.id;
    }
    return {
        opacity: playOpacity,
        scale: playScale
    };
};

export const WatchOnlinePageComp: Override = props => {
    let cards = props.children[0].props.children;
    return {
        onChangePage(pageIndex, prevIndex) {
            dataWatchCard.currentCardId = cards[pageIndex].props.id;
            dataWatchCard.prevCardId = cards[prevIndex].props.id;

            dataWatchCard.currentCardTitleId =
                cards[pageIndex].props.children[2].props.id;
            dataWatchCard.prevCardTitleId =
                cards[prevIndex].props.children[2].props.id;

            dataWatchCard.currentTitleId =
                cards[pageIndex].props.children[1].props.id;
            dataWatchCard.prevTitleId =
                cards[prevIndex].props.children[1].props.id;

            dataWatchCard.currentPlayBtnId =
                cards[pageIndex].props.children[0].props.children[0].props.id;
            dataWatchCard.prevPlayBtnId =
                cards[prevIndex].props.children[0].props.children[0].props.id;
        }
    };
};