react-native-video-player/lib/module/Thumbnail.js

A <VideoPlayer /> component for React Native with controls

"use strict";

import { Image, ImageBackground, StyleSheet, TouchableOpacity } from 'react-native';
import { memo } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export const StartButton = ({
  onStart,
  customStylesPlayButton,
  customStylesPlayArrow
}) => {
  return /*#__PURE__*/_jsx(TouchableOpacity, {
    style: [styles.playButton, customStylesPlayButton],
    onPress: onStart,
    children: /*#__PURE__*/_jsx(Image, {
      source: require('./img/play.png'),
      style: [styles.playArrow, customStylesPlayArrow]
    })
  });
};
export const Thumbnail = /*#__PURE__*/memo(({
  thumbnailSource,
  style,
  sizeStyles,
  onStart,
  customStylesThumbnail,
  customStylesThumbnailImage,
  customStylesPlayButton,
  customStylesPlayArrow
}) => {
  return /*#__PURE__*/_jsx(ImageBackground, {
    source: thumbnailSource,
    imageStyle: customStylesThumbnailImage,
    style: [styles.thumbnail, sizeStyles, style, customStylesThumbnail],
    children: /*#__PURE__*/_jsx(StartButton, {
      customStylesPlayButton: customStylesPlayButton,
      onStart: onStart,
      customStylesPlayArrow: customStylesPlayArrow
    })
  });
});
const styles = StyleSheet.create({
  thumbnail: {
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center'
  },
  playButton: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    borderRadius: 32,
    width: 64,
    height: 64,
    justifyContent: 'center',
    alignItems: 'center'
  },
  playArrow: {
    width: 28,
    height: 28,
    marginLeft: 2
  }
});
//# sourceMappingURL=Thumbnail.js.map