react-native-media-controls
Version:
A sweet UI component to manipulate your media. Strongly typed using Typescript.
3 lines (2 loc) • 5.36 kB
JavaScript
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t,n=require("react"),r=e(n),o=require("react-native"),i=e(require("react-native-slider")),a=o.StyleSheet.create({container:{alignItems:"center",backgroundColor:"rgba(45, 59, 62, 0.4)",bottom:0,flex:1,flexDirection:"column",justifyContent:"space-between",left:0,paddingHorizontal:20,paddingVertical:13,position:"absolute",right:0,top:0},controlsRow:{alignItems:"center",alignSelf:"stretch",flex:1,justifyContent:"center"},fullScreenContainer:{alignItems:"center",alignSelf:"stretch",justifyContent:"center",paddingLeft:20},playButton:{alignItems:"center",borderColor:"rgba(255,255,255,0.5)",borderRadius:3,borderWidth:1.5,height:50,justifyContent:"center",width:50},playIcon:{height:22,resizeMode:"contain",width:22},progressColumnContainer:{flex:1},progressContainer:{flexDirection:"row",justifyContent:"flex-end",marginBottom:-25},progressSlider:{alignSelf:"stretch"},replayIcon:{height:20,resizeMode:"stretch",width:25},thumb:{backgroundColor:"#fff",borderRadius:50,borderWidth:3,height:20,width:20},timeRow:{alignSelf:"stretch"},timerLabel:{color:"#fff",fontSize:12},timerLabelsContainer:{alignSelf:"stretch",flexDirection:"row",justifyContent:"space-between",marginBottom:-7},toolbar:{flexDirection:"row",flex:1,justifyContent:"flex-end"},toolbarRow:{alignItems:"flex-start",flexDirection:"row",justifyContent:"flex-start"},track:{borderRadius:1,height:5}});(t=exports.PLAYER_STATES||(exports.PLAYER_STATES={}))[t.PLAYING=0]="PLAYING",t[t.PAUSED=1]="PAUSED",t[t.ENDED=2]="ENDED";var l=function(e){var t=e>=3600?[11,8]:[14,5],n=t[0],r=t[1],o=new Date(0);return o.setSeconds(e),o.toISOString().substr(n,r)},s=function(e){var t=e.isLoading,n=e.mainColor,i=e.playerState,l=e.onReplay,s=e.onPause,c=function(e){switch(e){case exports.PLAYER_STATES.PAUSED:return require("./assets/ic_play.png");case exports.PLAYER_STATES.PLAYING:return require("./assets/ic_pause.png");case exports.PLAYER_STATES.ENDED:return require("./assets/ic_replay.png");default:return null}}(i),u=i===exports.PLAYER_STATES.ENDED?l:s,d=t?r.createElement(o.ActivityIndicator,{size:"large",color:"#FFF"}):r.createElement(o.TouchableOpacity,{style:[a.playButton,{backgroundColor:n}],onPress:u,accessibilityLabel:exports.PLAYER_STATES.PAUSED?"Tap to Play":"Tap to Pause",accessibilityHint:"Plays and Pauses the Video"},r.createElement(o.Image,{source:c,style:a.playIcon}));return r.createElement(o.View,{style:[a.controlsRow]},d)},c=require("./assets/ic_fullscreen.png"),u=function(e){var t=e.customSliderStyle,n=e.duration,s=e.mainColor,u=e.onFullScreen,d=e.onPause,S=e.progress,f=(null==t?void 0:t.trackStyle)||{},m=(null==t?void 0:t.thumbStyle)||{};return r.createElement(o.View,{style:[a.controlsRow,a.progressContainer,(null==t?void 0:t.containerStyle)||{}]},r.createElement(o.View,{style:a.progressColumnContainer},r.createElement(o.View,{style:[a.timerLabelsContainer]},r.createElement(o.Text,{style:a.timerLabel},l(S)),r.createElement(o.Text,{style:a.timerLabel},l(n))),r.createElement(i,{style:[a.progressSlider],onValueChange:function(t){var n=e.playerState;(0,e.onSeeking)(t),n!==exports.PLAYER_STATES.PAUSED&&d()},onSlidingComplete:function(t){e.onSeek(t),d()},maximumValue:Math.floor(n),value:Math.floor(S),trackStyle:[a.track,f],thumbStyle:[a.thumb,m,{borderColor:s}],minimumTrackTintColor:s})),Boolean(u)&&r.createElement(o.TouchableOpacity,{style:a.fullScreenContainer,onPress:u},r.createElement(o.Image,{source:c})))},d=function(e){var t=e.children,i=e.containerStyle,l=void 0===i?{}:i,c=e.duration,d=e.fadeOutDelay,S=void 0===d?5e3:d,f=e.isLoading,m=void 0!==f&&f,y=e.mainColor,p=void 0===y?"rgba(12, 83, 175, 0.9)":y,g=e.onFullScreen,E=e.onReplay,b=e.onSeek,h=e.onSeeking,A=e.playerState,P=e.progress,v=e.showOnStart,C=e.sliderStyle,T=e.toolbarStyle,w=void 0===T?{}:T,x=void 0===v||v?{initialOpacity:1,initialIsVisible:!0}:{initialOpacity:0,initialIsVisible:!1},L=x.initialIsVisible,D=n.useState(new o.Animated.Value(x.initialOpacity))[0],R=n.useState(L),I=R[0],V=R[1];n.useEffect((function(){k(S)}),[]);var k=function(e){void 0===e&&(e=0),o.Animated.timing(D,{toValue:0,duration:300,delay:e,useNativeDriver:!1}).start((function(e){e.finished&&V(!1)}))},_=function(){var t=e.playerState,n=e.onPaused,r=exports.PLAYER_STATES.PLAYING,o=exports.PLAYER_STATES.PAUSED;switch(t){case r:D.stopAnimation((function(){return V(!0)}));break;case o:k(S)}return n(t===r?o:r)};return r.createElement(o.TouchableWithoutFeedback,{accessible:!1,onPress:function(){D.stopAnimation((function(e){return V(!!e),e?k():(void 0===t&&(t=!0),V(!0),void o.Animated.timing(D,{toValue:1,duration:300,delay:0,useNativeDriver:!1}).start((function(){t&&k(S)})));var t}))}},r.createElement(o.Animated.View,{style:[a.container,l,{opacity:D}]},I&&r.createElement(o.View,{style:[a.container,l]},r.createElement(o.View,{style:[a.controlsRow,a.toolbarRow,w]},t),r.createElement(s,{onPause:_,onReplay:function(){k(S),E()},isLoading:m,mainColor:p,playerState:A}),r.createElement(u,{progress:P,duration:c,mainColor:p,onFullScreen:g,playerState:A,onSeek:b,onSeeking:h,onPause:_,customSliderStyle:C}))))};d.Toolbar=function(e){return r.createElement(r.Fragment,null,e.children)},exports.default=d;
//# sourceMappingURL=react-native-media-controls.cjs.production.min.js.map