@draftbit/core 49.2.3 → 49.2.5-c53d23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "49.2.3",
+  "version": "49.2.5-c53d23.2+c53d23d",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/src/index.d.ts",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "49.0.4",
+    "@draftbit/types": "^49.2.5-c53d23.2+c53d23d",
     "@expo/vector-icons": "^13.0.0",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.4",
     "@material-ui/core": "^4.11.0",
@@ -112,5 +112,5 @@
     ],
     "testEnvironment": "node"
   },
-  "gitHead": "233267735bce5c2e1cf858e52c823c2b6baaa21a"
+  "gitHead": "c53d23d61b72a4db64bfee35cfe212a6549ab3c1"
 }

package/src/components/YoutubePlayer/YoutubePlayer.js

@@ -15,7 +15,7 @@ const YoutubePlayer = ({ videoId, playlist, autoplay = false, style, }) => {
         },
     };
     return (React.createElement(View, { style: viewStyles },
-        React.createElement(YouTube, { videoId: !videoId && !playlist ? defaultVideoId : videoId, opts: options })));
+        React.createElement(YouTube, { style: { flex: 1 }, videoId: !videoId && !playlist ? defaultVideoId : videoId, opts: options })));
 };
 export default YoutubePlayer;
 //# sourceMappingURL=YoutubePlayer.js.map

package/src/components/YoutubePlayer/YoutubePlayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubePlayer.js","sourceRoot":"","sources":["YoutubePlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,OAAyB,MAAM,eAAe,CAAC;AAEtD,MAAM,aAAa,GAAiC,CAAC,EACnD,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC;IAErC,MAAM,OAAO,GAAyB;QACpC,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,UAAU,EAAE;YACV,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,UAAU;SACrB;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;QACrB,oBAAC,OAAO,IACN,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACzD,IAAI,EAAE,OAAO,GACb,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"YoutubePlayer.js","sourceRoot":"","sources":["YoutubePlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,OAAyB,MAAM,eAAe,CAAC;AAEtD,MAAM,aAAa,GAAiC,CAAC,EACnD,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC;IAErC,MAAM,OAAO,GAAyB;QACpC,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,MAAM,EAAE,UAAU,CAAC,MAAM;QACzB,UAAU,EAAE;YACV,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC1B,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,UAAU;SACrB;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,IAAI,IAAC,KAAK,EAAE,UAAU;QACrB,oBAAC,OAAO,IACN,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAClB,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACzD,IAAI,EAAE,OAAO,GACb,CACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/YoutubePlayer/YoutubePlayer.native.js

@@ -4,7 +4,33 @@ import { extractStyles } from "../../utilities";
 const YoutubePlayer = ({ videoId, playlist, autoplay = false, style, }) => {
     const { viewStyles } = extractStyles(style);
     const defaultVideoId = "nwMUpDESXrI";
-    return (React.createElement(YoutubePlayerIFrame, { width: viewStyles.width, height: viewStyles.height, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, webViewStyle: viewStyles, webViewProps: { androidLayerType: "software" } }));
+    return (React.createElement(YoutubePlayerIFrame, { width: viewStyles.width, height: viewStyles.height, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, webViewStyle: [
+            viewStyles,
+            {
+                /**
+                 * Addresses a WebView and react-navigation bug that causes apps to crash
+                 * Alternate solution is set `androidLayerType` prop to `"software"`, but that leads to player playing without video
+                 * See:
+                 * https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash/#change-webview-opacity-to-099-issue-comment
+                 * https://github.com/LonelyCpp/react-native-youtube-iframe/issues/110#issuecomment-779848787
+                 * https://github.com/react-native-webview/react-native-webview/issues/811
+                 */
+                opacity: viewStyles.opacity < 0.99 ? viewStyles.opacity : 0.99,
+            },
+        ], 
+        /**
+         * Addresses issue where webview is locked by aspect ratio and refuses to
+         * change height according to provided style props.
+         * See:
+         * https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123
+         */
+        webViewProps: {
+            injectedJavaScript: `
+            var element = document.getElementsByClassName('container')[0];
+            element.style.position = 'unset';
+            true;
+          `,
+        } }));
 };
 export default YoutubePlayer;
 //# sourceMappingURL=YoutubePlayer.native.js.map

package/src/components/YoutubePlayer/YoutubePlayer.native.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubePlayer.native.js","sourceRoot":"","sources":["YoutubePlayer.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,mBAAmB,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,aAAa,GAAiC,CAAC,EACnD,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC;IAErC,OAAO,CACL,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACzD,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,EAAE,gBAAgB,EAAE,UAAU,EAAE,GAC9C,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"YoutubePlayer.native.js","sourceRoot":"","sources":["YoutubePlayer.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,mBAAmB,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,MAAM,aAAa,GAAiC,CAAC,EACnD,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GACN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,cAAc,GAAG,aAAa,CAAC;IAErC,OAAO,CACL,oBAAC,mBAAmB,IAClB,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,MAAM,EAAE,UAAU,CAAC,MAAM,EACzB,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,EACzD,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE;YACZ,UAAU;YACV;gBACE;;;;;;;mBAOG;gBACH,OAAO,EAAE,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;aAC/D;SACF;QACD;;;;;WAKG;QACH,YAAY,EAAE;YACZ,kBAAkB,EAAE;;;;WAIjB;SACJ,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/src/components/YoutubePlayer/YoutubePlayer.native.tsx

@@ -19,8 +19,33 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
       play={autoplay}
       videoId={!videoId && !playlist ? defaultVideoId : videoId}
       playList={playlist}
-      webViewStyle={viewStyles}
-      webViewProps={{ androidLayerType: "software" }} //Addresses a webview bug causing crashes on android: https://stackoverflow.com/a/71642894/8805150
+      webViewStyle={[
+        viewStyles,
+        {
+          /**
+           * Addresses a WebView and react-navigation bug that causes apps to crash
+           * Alternate solution is set `androidLayerType` prop to `"software"`, but that leads to player playing without video
+           * See:
+           * https://lonelycpp.github.io/react-native-youtube-iframe/navigation-crash/#change-webview-opacity-to-099-issue-comment
+           * https://github.com/LonelyCpp/react-native-youtube-iframe/issues/110#issuecomment-779848787
+           * https://github.com/react-native-webview/react-native-webview/issues/811
+           */
+          opacity: viewStyles.opacity < 0.99 ? viewStyles.opacity : 0.99,
+        },
+      ]}
+      /**
+       * Addresses issue where webview is locked by aspect ratio and refuses to
+       * change height according to provided style props.
+       * See:
+       * https://github.com/LonelyCpp/react-native-youtube-iframe/issues/13#issuecomment-611753123
+       */
+      webViewProps={{
+        injectedJavaScript: `
+            var element = document.getElementsByClassName('container')[0];
+            element.style.position = 'unset';
+            true;
+          `,
+      }}
     />
   );
 };

package/src/components/YoutubePlayer/YoutubePlayer.tsx

@@ -26,6 +26,7 @@ const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
   return (
     <View style={viewStyles}>
       <YouTube
+        style={{ flex: 1 }}
         videoId={!videoId && !playlist ? defaultVideoId : videoId}
         opts={options}
       />