Feature Request: Zoom into Video

[pateljoel]

I was looking at YouTube Video on my phone and noticed you can Zoom into areas of the video, would be awesome if this library can do the same, I have a preview below so that you can look at just so that you get a better idea why this feature is needed.

https://user-images.githubusercontent.com/64401775/233341385-0df25c2f-2c09-4a90-9fbc-f461209204b7.mov

[freeboub]

Isn't it possible to implement this feature with styling ? Did you try it ?

[pateljoel]

No, I tried using styling on this and this had no effect on the video. I believe this feature should be integrated into react-native-video library.

[canven]

The is wonderful idea, hope to be added, it is big thanks to someone who had a workaround solutioa.

[pateljoel]

@freeboub What do you mean by implement this feature with 'styling' could you explain in detail? I am unsure if this is even possible to implement with styling in React Native unless you know otherwise.

[canven]

I use library react-native-zoomable-view to implement it , hope help someone who need it .

/**
 * #####prerequisite#####
 *
 * yarn add react-native-video@6.0.0-alpha.6
 * yarn add @types/react-native-video
 * yarn add @openspacelabs/react-native-zoomable-view
 *
 */
import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
import React from 'react';
import { Dimensions, StyleSheet, View } from 'react-native';
import Video, { OnLoadData } from 'react-native-video';

// get screen width and height
let { width, height } = Dimensions.get('window');
//video width assume your video dimension is 16:9
export function getVideoWidth() {
  return Math.floor(width);
}

//video height, assume your video dimension is 16:9
export function getVideoHeight() {
  return Math.floor((9 * Math.floor(width)) / 16);
}

const NoticePlayScreen = () => {
  return (
    <View style={styles.container}>
      <View
        style={{
          alignItems: 'center',
          flex: 1,
        }}
      >
        <ReactNativeZoomableView
          maxZoom={16}
          minZoom={1}
          zoomStep={0.5}
          initialZoom={1}
          bindToBorders={true}
          doubleTapZoomToCenter={true}
          disablePanOnInitialZoom={false}
          panBoundaryPadding={0}
          contentWidth={getVideoWidth()}
          contentHeight={getVideoHeight()}
          movementSensibility={3}
        >
          <Video
            style={{
              width: getVideoWidth(),
              height: getVideoHeight(),
              marginBottom: 17,
            }}
            source={{
              uri: 'https://videos.clwy.cn/node-express/21/c4b86b_hls/fhd/c4b86b.m3u8',
            }} // the video file
            paused={false} // make it start
            repeat={false} // make it a loop
            onProgress={(data: any) => {}}
            onLoad={(data: OnLoadData) => {
              //   const remainTime = changeSecondToRemainTime(data.duration);
              //   setRemailTime(remainTime);
              //   setTotalTime(Math.floor(data.duration));
            }}
            onEnd={() => {}}
          />
        </ReactNativeZoomableView>
      </View>
    </View>
  );
};

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

export default NoticePlayScreen;

use it as :

<View style={{ flex: 1 }}>
      <NoticePlayScreen />
</View>

[coofzilla]

@canven with that solution, are you able to play the video and have it zoomed/pan at the same time?

[canven]

@canven with that solution, are you able to play the video and have it zoomed/pan at the same time?

@coofzilla yes, It can zoom and pan when video is playing, you can copy it to try.