Feature/improvements v1.1.0 (#28)

* merging Douglas Rosa solution * Issues #17, #20, #21 fixed * Changing video example * update readme file Co-authored-by: Marco Fiorito <[email protected]>
MetaLabs-inc · Jun 2, 2022 · 6912cdb · 6912cdb
1 parent ac2ba5b
commit 6912cdb
Show file tree

Hide file tree

Showing 13 changed files with 336 additions and 398 deletions.
diff --git a/README.md b/README.md
@@ -8,33 +8,56 @@ the Vimeo player JS API (more information https://developer.vimeo.com/player/js-
 
 1. Go through the instructions for installing the
    `React Native Webview` library: https://github.com/react-native-webview/react-native-webview.
-
-1. Run `npm install react-native-vimeo-iframe` or `yarn add react-native-vimeo-iframe` within your project.
-
-1. Compile and build to make sure everything is set up properly.
+2. Run `npm install react-native-vimeo-iframe` or `yarn add react-native-web-video` within your project.
+3. Compile and build to make sure everything is set up properly.
 
 ## Usage
 
 ```
-        <Vimeo
-          videoId={'76979871'}
-          onReady={() => console.log('Video is ready')}
-          onPlay={() => console.log('Video is playing')}
-          onPlayProgress={(data) => console.log('Video progress data:', data)}
-          onFinish={() => console.log('Video is finished')}
-          loop={false}
-          autoPlay={false}
-          controls={true}
-          speed={false}
-          time={'0m0s'}
-        />
+  const videoCallbacks = {
+    timeupdate: (data: any) => console.log('timeupdate: ', data),
+    play: (data: any) => console.log('play: ', data),
+    pause: (data: any) => console.log('pause: ', data),
+    fullscreenchange: (data: any) => console.log('fullscreenchange: ', data),
+    ended: (data: any) => console.log('ended: ', data),
+    controlschange: (data: any) => console.log('controlschange: ', data),
+  };
+
+  return (
+     <Vimeo
+            videoId={'712158285'}
+            params={'api=1&autoplay=0'}
+            handlers={videoCallbacks}
+          />
+  )
 ```
 
-## How it works
+## Supported listeners
 
-Internally, a webview loads a HTML page. This HTML page loads your
-Vimeo video in an iFrame, then uses the Froogaloop JS library provided by Vimeo to pass event
-information to your application.
+```
+'controlschange', // The visibility of the controls changed.
+'fullscreenchange', // The orientation was changed.
+'audioprocess', // A entrada do buffer de ScriptProcessorNode está pronta para ser processada
+'canplay', // The browser can play the file, but estimates that there will not be enough data to play the file without interruption to reload the buffer.
+'canplaythrough', // The browser estimates that it will be able to play the file without interruption until the end.
+'complete', // OfflineAudioContext rendering is finished.
+'durationchange', // The duration attribute has been updated.
+'emptied', // Absence of content. For example, this event is sent if the media has been loaded (or partially) and the load() method has been called to reload the content.
+'ended', // Playback ended due to end of content
+'loadeddata', // The first frame of media has been loaded.
+'loadedmetadata', // The metadata has been loaded.
+'pause', // Playback has been paused.
+'play', // Playback has started.
+'playing', // Playback is ready to start after being paused, or delayed due to lack of data.
+'ratechange', // Playback rate has changed.
+'seeked', // Search operation completed.
+'seeking', // Search operation started.
+'stalled', // The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
+'suspend', // Media data loading has been suspended.
+'timeupdate', // The time indicated by the currentTime attribute has been updated.
+'volumechange', // The volume has changed.
+'waiting'
+```
 
 ## Example
 
@@ -47,7 +70,9 @@ If you want to see `MetaLabs-inc/react-native-vimeo-iframe` in action, just move
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://github.com/Marcoo09"><img src="https://avatars.githubusercontent.com/Marcoo09" width="100px;" alt=""/><br /><sub><b>Marco Fiorito</b></sub></a><br />💻</td>
+    <td align="center"><a href="https://github.com/Marcoo09"><img src="https://avatars.githubusercontent.com/Marcoo09" width="100px;" alt=""/><br /><sub><b>Marco Fiorito</b></sub></a></td>
+    <td align="center"><a href="https://github.com/douglasrosa0110"><img src="https://avatars.githubusercontent.com/douglasrosa0110" width="100px;" alt=""/><br /><sub><b>Douglas Rosa</b></sub></a></td>
+    <td align="center"><a href="https://github.com/felipe-najson"><img src="https://avatars.githubusercontent.com/felipe-najson" width="100px;" alt=""/><br /><sub><b>Felipe Najson</b></sub></a></td>
   </tr>
 </table>
 

diff --git a/example/android/settings.gradle b/example/android/settings.gradle
@@ -1,4 +1,7 @@
 include ':react-native-module-template'
+include ':react-native-webview'
+
+project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 project(':react-native-module-template').projectDir = new File(rootProject.projectDir, '../../android')
 
 include ':app'
diff --git a/example/ios/Podfile b/example/ios/Podfile
@@ -12,7 +12,7 @@ target 'example' do
   #
   # Note that if you have use_frameworks! enabled, Flipper will not work and
   # you should disable these next few lines.
-  use_flipper!({ 'Flipper' => '0.73.0' })
+  use_flipper!({ 'Flipper-Folly' => '2.6.7', 'Flipper-RSocket' => '1.4.3' , 'Flipper' => '0.88.0' })
   post_install do |installer|
     flipper_post_install(installer)
   end

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -1,7 +1,6 @@
 PODS:
   - boost-for-react-native (1.63.0)
   - CocoaAsyncSocket (7.6.5)
-  - CocoaLibEvent (1.0.0)
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.63.4)
   - FBReactNativeSpec (0.63.4):
@@ -11,50 +10,64 @@ PODS:
     - React-Core (= 0.63.4)
     - React-jsi (= 0.63.4)
     - ReactCommon/turbomodule/core (= 0.63.4)
-  - Flipper (0.73.0):
-    - Flipper-Folly (~> 2.3)
-    - Flipper-RSocket (~> 1.1)
+  - Flipper (0.88.0):
+    - Flipper-Folly (~> 2.6)
+    - Flipper-RSocket (~> 1.4)
+  - Flipper-Boost-iOSX (1.76.0.1.11)
   - Flipper-DoubleConversion (1.1.7)
-  - Flipper-Folly (2.3.0):
-    - boost-for-react-native
-    - CocoaLibEvent (~> 1.0)
+  - Flipper-Fmt (7.1.7)
+  - Flipper-Folly (2.6.7):
+    - Flipper-Boost-iOSX
     - Flipper-DoubleConversion
+    - Flipper-Fmt (= 7.1.7)
     - Flipper-Glog
-    - OpenSSL-Universal (= 1.0.2.20)
+    - libevent (~> 2.1.12)
+    - OpenSSL-Universal (= 1.1.180)
   - Flipper-Glog (0.3.6)
   - Flipper-PeerTalk (0.0.4)
-  - Flipper-RSocket (1.1.0):
-    - Flipper-Folly (~> 2.2)
-  - FlipperKit (0.73.0):
-    - FlipperKit/Core (= 0.73.0)
-  - FlipperKit/Core (0.73.0):
-    - Flipper (~> 0.73.0)
+  - Flipper-RSocket (1.4.3):
+    - Flipper-Folly (~> 2.6)
+  - FlipperKit (0.88.0):
+    - FlipperKit/Core (= 0.88.0)
+  - FlipperKit/Core (0.88.0):
+    - Flipper (~> 0.88.0)
     - FlipperKit/CppBridge
     - FlipperKit/FBCxxFollyDynamicConvert
     - FlipperKit/FBDefines
     - FlipperKit/FKPortForwarding
-  - FlipperKit/CppBridge (0.73.0):
-    - Flipper (~> 0.73.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (0.73.0):
-    - Flipper-Folly (~> 2.3)
-  - FlipperKit/FBDefines (0.73.0)
-  - FlipperKit/FKPortForwarding (0.73.0):
+  - FlipperKit/CppBridge (0.88.0):
+    - Flipper (~> 0.88.0)
+  - FlipperKit/FBCxxFollyDynamicConvert (0.88.0):
+    - Flipper-Folly (~> 2.6)
+  - FlipperKit/FBDefines (0.88.0)
+  - FlipperKit/FKPortForwarding (0.88.0):
     - CocoaAsyncSocket (~> 7.6)
     - Flipper-PeerTalk (~> 0.0.4)
-  - FlipperKit/FlipperKitHighlightOverlay (0.73.0)
-  - FlipperKit/FlipperKitLayoutPlugin (0.73.0):
+  - FlipperKit/FlipperKitHighlightOverlay (0.88.0)
+  - FlipperKit/FlipperKitLayoutHelpers (0.88.0):
+    - FlipperKit/Core
+    - FlipperKit/FlipperKitHighlightOverlay
+    - FlipperKit/FlipperKitLayoutTextSearchable
+  - FlipperKit/FlipperKitLayoutIOSDescriptors (0.88.0):
+    - FlipperKit/Core
+    - FlipperKit/FlipperKitHighlightOverlay
+    - FlipperKit/FlipperKitLayoutHelpers
+    - YogaKit (~> 1.18)
+  - FlipperKit/FlipperKitLayoutPlugin (0.88.0):
     - FlipperKit/Core
     - FlipperKit/FlipperKitHighlightOverlay
+    - FlipperKit/FlipperKitLayoutHelpers
+    - FlipperKit/FlipperKitLayoutIOSDescriptors
     - FlipperKit/FlipperKitLayoutTextSearchable
     - YogaKit (~> 1.18)
-  - FlipperKit/FlipperKitLayoutTextSearchable (0.73.0)
-  - FlipperKit/FlipperKitNetworkPlugin (0.73.0):
+  - FlipperKit/FlipperKitLayoutTextSearchable (0.88.0)
+  - FlipperKit/FlipperKitNetworkPlugin (0.88.0):
     - FlipperKit/Core
-  - FlipperKit/FlipperKitReactPlugin (0.73.0):
+  - FlipperKit/FlipperKitReactPlugin (0.88.0):
     - FlipperKit/Core
-  - FlipperKit/FlipperKitUserDefaultsPlugin (0.73.0):
+  - FlipperKit/FlipperKitUserDefaultsPlugin (0.88.0):
     - FlipperKit/Core
-  - FlipperKit/SKIOSNetworkPlugin (0.73.0):
+  - FlipperKit/SKIOSNetworkPlugin (0.88.0):
     - FlipperKit/Core
     - FlipperKit/FlipperKitNetworkPlugin
   - Folly (2020.01.13.00):
@@ -67,9 +80,8 @@ PODS:
     - DoubleConversion
     - glog
   - glog (0.3.5)
-  - OpenSSL-Universal (1.0.2.20):
-    - OpenSSL-Universal/Static (= 1.0.2.20)
-  - OpenSSL-Universal/Static (1.0.2.20)
+  - libevent (2.1.12)
+  - OpenSSL-Universal (1.1.180)
   - RCTRequired (0.63.4)
   - RCTTypeSafety (0.63.4):
     - FBLazyVector (= 0.63.4)
@@ -306,25 +318,25 @@ DEPENDENCIES:
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
   - FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
-  - Flipper (= 0.73.0)
+  - Flipper (= 0.88.0)
   - Flipper-DoubleConversion (= 1.1.7)
-  - Flipper-Folly (~> 2.2)
+  - Flipper-Folly (= 2.6.7)
   - Flipper-Glog (= 0.3.6)
   - Flipper-PeerTalk (~> 0.0.4)
-  - Flipper-RSocket (~> 1.1)
-  - FlipperKit (= 0.73.0)
-  - FlipperKit/Core (= 0.73.0)
-  - FlipperKit/CppBridge (= 0.73.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (= 0.73.0)
-  - FlipperKit/FBDefines (= 0.73.0)
-  - FlipperKit/FKPortForwarding (= 0.73.0)
-  - FlipperKit/FlipperKitHighlightOverlay (= 0.73.0)
-  - FlipperKit/FlipperKitLayoutPlugin (= 0.73.0)
-  - FlipperKit/FlipperKitLayoutTextSearchable (= 0.73.0)
-  - FlipperKit/FlipperKitNetworkPlugin (= 0.73.0)
-  - FlipperKit/FlipperKitReactPlugin (= 0.73.0)
-  - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.73.0)
-  - FlipperKit/SKIOSNetworkPlugin (= 0.73.0)
+  - Flipper-RSocket (= 1.4.3)
+  - FlipperKit (= 0.88.0)
+  - FlipperKit/Core (= 0.88.0)
+  - FlipperKit/CppBridge (= 0.88.0)
+  - FlipperKit/FBCxxFollyDynamicConvert (= 0.88.0)
+  - FlipperKit/FBDefines (= 0.88.0)
+  - FlipperKit/FKPortForwarding (= 0.88.0)
+  - FlipperKit/FlipperKitHighlightOverlay (= 0.88.0)
+  - FlipperKit/FlipperKitLayoutPlugin (= 0.88.0)
+  - FlipperKit/FlipperKitLayoutTextSearchable (= 0.88.0)
+  - FlipperKit/FlipperKitNetworkPlugin (= 0.88.0)
+  - FlipperKit/FlipperKitReactPlugin (= 0.88.0)
+  - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.88.0)
+  - FlipperKit/SKIOSNetworkPlugin (= 0.88.0)
   - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
@@ -356,14 +368,16 @@ SPEC REPOS:
   trunk:
     - boost-for-react-native
     - CocoaAsyncSocket
-    - CocoaLibEvent
     - Flipper
+    - Flipper-Boost-iOSX
     - Flipper-DoubleConversion
+    - Flipper-Fmt
     - Flipper-Folly
     - Flipper-Glog
     - Flipper-PeerTalk
     - Flipper-RSocket
     - FlipperKit
+    - libevent
     - OpenSSL-Universal
     - YogaKit
 
@@ -426,20 +440,22 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f
   DoubleConversion: cde416483dac037923206447da6e1454df403714
   FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
   FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
-  Flipper: 48e20395802172f863b54778a5743b9243acc1f4
+  Flipper: bbba2bf26e3377be472c5afd4113a4c77c4af07a
+  Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c
   Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
-  Flipper-Folly: e4493b013c02d9347d5e0cb4d128680239f6c78a
+  Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b
+  Flipper-Folly: 83af37379faa69497529e414bd43fbfc7cae259a
   Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
-  Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
-  FlipperKit: e2cb951c44da9b58eff31ad1c7463691fc75f3fc
+  Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
+  FlipperKit: 44a312ebace6e44d98d078e044178bedd42ea0c8
   Folly: b73c3869541e86821df3c387eb0af5f65addfab4
   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
-  OpenSSL-Universal: ff34003318d5e1163e9529b08470708e389ffcdd
+  libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
   RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
   RCTTypeSafety: 8c9c544ecbf20337d069e4ae7fd9a377aadf504b
   React: b0a957a2c44da4113b0c4c9853d8387f8e64e615
@@ -464,6 +480,6 @@ SPEC CHECKSUMS:
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 
-PODFILE CHECKSUM: 67546a31292453d5d7519f46729a35755310976e
+PODFILE CHECKSUM: d16f833076e5488f4e11af1120436fa867f55278
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.11.2
diff --git a/example/package.json b/example/package.json
@@ -11,24 +11,24 @@
     "test": "jest"
   },
   "dependencies": {
-    "react": "^17.0.1",
-    "react-native": "^0.63.4",
+    "react": "17.0.1",
+    "react-native": "0.63.4",
     "react-native-webview": "11.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/runtime": "^7.12.5",
-    "@react-native-community/eslint-config": "^2.0.0",
-    "@types/jest": "^26.0.20",
-    "@types/react-native": "^0.63.46",
-    "@types/react-test-renderer": "^17.0.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.19.0",
-    "eslint-plugin-simple-import-sort": "^7.0.0",
-    "jest": "^26.6.3",
-    "metro-react-native-babel-preset": "^0.65.0",
-    "react-test-renderer": "^17.0.1",
-    "typescript": "^4.1.3"
+    "@babel/core": "7.12.10",
+    "@babel/runtime": "7.18.3",
+    "@react-native-community/eslint-config": "2.0.0",
+    "@types/jest": "26.0.20",
+    "@types/react-native": "0.63.46",
+    "@types/react-test-renderer": "17.0.0",
+    "babel-jest": "26.6.3",
+    "eslint": "7.19.0",
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "jest": "26.6.3",
+    "metro-react-native-babel-preset": "0.65.0",
+    "react-test-renderer": "17.0.1",
+    "typescript": "4.1.3"
   },
   "jest": {
     "preset": "react-native",