From c83f9025e13337862c7f38a27d80e320fd5c8e6a Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Fri, 21 Jan 2022 10:45:15 +0500 Subject: [PATCH 01/24] added iframe support --- ios/Podfile.lock | 2 +- package.json | 1 + .../postHtmlRenderer/postHtmlRenderer.tsx | 59 +++++++++++++++++-- yarn.lock | 25 ++++++++ 4 files changed, 81 insertions(+), 6 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a160089bc..c052bc551 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -772,4 +772,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 9c48318ea254e2c78005a7a0c2d8bfc14ddd783d -COCOAPODS: 1.10.1 +COCOAPODS: 1.11.2 diff --git a/package.json b/package.json index 2595cf0f5..75b70516b 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@esteemapp/react-native-multi-slider": "^1.1.0", "@esteemapp/react-native-slider": "^0.12.0", "@hiveio/dhive": "^1.0.1", + "@native-html/iframe-plugin": "^2.6.1", "@react-native-community/async-storage": "^1.11.0", "@react-native-community/cameraroll": "^1.3.0", "@react-native-community/cli-platform-ios": "^4.10.1", diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index 1f0bd0e41..b51853058 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -1,10 +1,11 @@ -import React, { memo } from "react"; +import React, { memo, } from "react"; import RenderHTML, { CustomRendererProps, Element, TNode } from "react-native-render-html"; import styles from "./postHtmlRendererStyles"; import { LinkData, parseLinkData } from "./linkDataParser"; import VideoThumb from "./videoThumb"; import { AutoHeightImage } from "../autoHeightImage/autoHeightImage"; - +import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin'; +import WebView from "react-native-webview"; interface PostHtmlRendererProps { contentWidth:number; @@ -37,6 +38,14 @@ export const PostHtmlRenderer = memo(({ //new renderer functions body = body.replace(/
/g, '
').replace(/<\/center>/g,'
'); +// body = `

+//

+//

+//
+//

Demo Text

+//
+// +//

` console.log("Comment body:", body); @@ -137,7 +146,30 @@ export const PostHtmlRenderer = memo(({ const data = parseLinkData(tnode); _handleOnLinkPress(data); }; - + console.log("parseLinkData(tnode) : ", parseLinkData(tnode)); + + if (tnode.classes?.indexOf('markdown-video-link') >= 0) { + return ( + { + console.log('load end'); + }} + onLoadStart={() => { + console.log('load start'); + }} + source={{ uri: parseLinkData(tnode).videoHref }} + style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} + startInLoadingState={true} + onShouldStartLoadWithRequest={() => true} + mediaPlaybackRequiresUserAction={true} + allowsInlineMediaPlayback={true} + /> + ); + } if(tnode.classes?.indexOf('markdown-video-link') >= 0){ const imgElement = tnode.children.find((child)=>{ return child.classes.indexOf('video-thumbnail') > 0 ? true:false @@ -156,7 +188,7 @@ export const PostHtmlRenderer = memo(({ onPress={_onPress} {...props} /> - ); + ) } //this method checks if image is a child of table column @@ -264,12 +296,29 @@ export const PostHtmlRenderer = memo(({ renderers={{ img:_imageRenderer, a:_anchorRenderer, - p:_paraRenderer + p:_paraRenderer, + iframe: IframeRenderer }} onHTMLLoaded={onLoaded && onLoaded} defaultTextProps={{ selectable:true }} + customHTMLElementModels={{ + iframe: iframeModel + }} + renderersProps={{ + iframe: { + scalesPageToFit: true, + webViewProps: { + startInLoadingState:true, + onShouldStartLoadWithRequest: () => true , + mediaPlaybackRequiresUserAction: true, + allowsFullscreenVideo: false, + /* Any prop you want to pass to iframe WebViews */ + } + } + }} + WebView={WebView} /> ) }, (next, prev)=>next.body === prev.body) diff --git a/yarn.lock b/yarn.lock index 82d76faf5..f2bb770ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1118,6 +1118,11 @@ resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.3.0.tgz#2dc8c57044de0340eb53a7ba602e59abf80dc799" integrity sha512-KWk80UPIzPmUg+P0rKh6TqspRw0G6eux1PuJr+zz47ftMaZ9QDwbGzHZbtzWkl5hgayM/qrKRutllRC7D/vVXQ== +"@formidable-webview/webshell@^2.6.0": + version "2.6.0" + resolved "https://registry.yarnpkg.com/@formidable-webview/webshell/-/webshell-2.6.0.tgz#64704c0b513206e71b23118b3c9d096f0d545005" + integrity sha512-FwQQDajg1xs7W3CUiUNJMvdjgLjKLDGzs0XPzoVg0Dunhold1Jg7w5pihUdvVugFlNtkSpXMA+du9QDHE8lmpg== + "@hapi/address@2.x.x": version "2.1.4" resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5" @@ -1412,6 +1417,21 @@ css-to-react-native "^3.0.0" csstype "^3.0.8" +"@native-html/iframe-plugin@^2.6.1": + version "2.6.1" + resolved "https://registry.yarnpkg.com/@native-html/iframe-plugin/-/iframe-plugin-2.6.1.tgz#5b9c36d9d500f82f0bcf654bc005922df4211158" + integrity sha512-PM2vFNT44n/UkCm9+OUn+cNSKgiMjaw7c7/2JnnztHDLVMtPIf52K/86miWNpQpxFoy1ouoLVOvfjFRhoPXjag== + dependencies: + "@formidable-webview/webshell" "^2.6.0" + "@native-html/plugins-core" "1.3.0" + "@types/prop-types" "^15.7.4" + prop-types "^15.7.2" + +"@native-html/plugins-core@1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@native-html/plugins-core/-/plugins-core-1.3.0.tgz#f1f24622097551930d9dab0214c4929d00f7446e" + integrity sha512-vce35gqGJKa2oPDZVa2sKjucFFVK+3g8quLayeXiJtj5LzuS8TWGrBFTS5O4ToUtE02AJkCDOLwAguCzK2HWdQ== + "@native-html/transient-render-engine@^9.2.2": version "9.2.2" resolved "https://registry.yarnpkg.com/@native-html/transient-render-engine/-/transient-render-engine-9.2.2.tgz#00691518926ea47709185c3a25a786472c99a1f0" @@ -1784,6 +1804,11 @@ resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw== +"@types/prop-types@^15.7.4": + version "15.7.4" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11" + integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ== + "@types/ramda@^0.27.40": version "0.27.44" resolved "https://registry.yarnpkg.com/@types/ramda/-/ramda-0.27.44.tgz#ba2283d67fcff366f7e68bd5124a0466e467967f" From 68a94dd2c13541ab5c11b77430c98f66fc35f9d5 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Fri, 21 Jan 2022 16:09:30 +0500 Subject: [PATCH 02/24] added custom iframe renderer --- .../postHtmlRenderer/postHtmlRenderer.tsx | 58 ++++++++++++++----- 1 file changed, 43 insertions(+), 15 deletions(-) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index b51853058..ef8ee54b2 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -4,7 +4,7 @@ import styles from "./postHtmlRendererStyles"; import { LinkData, parseLinkData } from "./linkDataParser"; import VideoThumb from "./videoThumb"; import { AutoHeightImage } from "../autoHeightImage/autoHeightImage"; -import IframeRenderer, { iframeModel } from '@native-html/iframe-plugin'; +import { useHtmlIframeProps,iframeModel } from '@native-html/iframe-plugin'; import WebView from "react-native-webview"; interface PostHtmlRendererProps { @@ -38,15 +38,6 @@ export const PostHtmlRenderer = memo(({ //new renderer functions body = body.replace(/
/g, '
').replace(/<\/center>/g,'
'); -// body = `

-//

-//

-//
-//

Demo Text

-//
-// -//

` - console.log("Comment body:", body); const _handleOnLinkPress = (data:LinkData) => { @@ -266,6 +257,47 @@ export const PostHtmlRenderer = memo(({ ) } + // iframe renderer for rendering iframes in body + const _iframeRenderer = function IframeRenderer(props) { + const iframeProps = useHtmlIframeProps(props); + // console.log('iframeProps : ', iframeProps); + const checkSrcRegex = /(.*?)\.(mp4|webm|ogg)$/gi; + const isVideoType = iframeProps.source.uri.match(checkSrcRegex); + + // check if source contain video source then wrap it with video tag + // else pass the source directly to webview + const src = isVideoType + ? { + html: ` + + `, + } + : { + uri: iframeProps.source.uri, + }; + return ( + { + console.log('load end'); + }} + onLoadStart={() => { + console.log('load start'); + }} + source={src} + style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} + startInLoadingState={true} + onShouldStartLoadWithRequest={() => true} + mediaPlaybackRequiresUserAction={true} + allowsInlineMediaPlayback={true} + /> + ); + }; return ( true , - mediaPlaybackRequiresUserAction: true, - allowsFullscreenVideo: false, /* Any prop you want to pass to iframe WebViews */ } } From 8b4e2ea013c661cb4f03d881e255eb3fdadfd670 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Fri, 21 Jan 2022 18:30:20 +0500 Subject: [PATCH 03/24] changed uri source to support all videos in anchor renderer --- src/components/postHtmlRenderer/postHtmlRenderer.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index ef8ee54b2..88437cb71 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -137,9 +137,11 @@ export const PostHtmlRenderer = memo(({ const data = parseLinkData(tnode); _handleOnLinkPress(data); }; - console.log("parseLinkData(tnode) : ", parseLinkData(tnode)); if (tnode.classes?.indexOf('markdown-video-link') >= 0) { + // get video src + let videoHref = tnode.attributes['data-embed-src'] || tnode.attributes['data-video-href'] || tnode.children[0].attributes['src']; + return ( { console.log('load start'); }} - source={{ uri: parseLinkData(tnode).videoHref }} + source={{ uri: videoHref }} style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} startInLoadingState={true} onShouldStartLoadWithRequest={() => true} From 9c3f12e06e4b52dac0c3328382f12dbfc6f828bc Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Sat, 22 Jan 2022 15:32:19 +0500 Subject: [PATCH 04/24] refactored video player --- src/components/index.js | 2 + .../postHtmlRenderer/postHtmlRenderer.tsx | 452 ++++++++---------- .../videoPlayer/videoPlayerStyles.ts | 5 + .../videoPlayer/videoPlayerView.tsx | 98 ++++ 4 files changed, 310 insertions(+), 247 deletions(-) create mode 100644 src/components/videoPlayer/videoPlayerStyles.ts create mode 100644 src/components/videoPlayer/videoPlayerView.tsx diff --git a/src/components/index.js b/src/components/index.js index 459ff3f4c..55747394c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -93,6 +93,7 @@ import { ForegroundNotification } from './foregroundNotification'; import { PostHtmlRenderer } from './postHtmlRenderer'; import { QuickProfileModal } from './organisms'; import QuickReplyModal from './quickReplyModal/quickReplyModalView'; +import VideoPlayer from './videoPlayer/videoPlayerView'; // Basic UI Elements import { @@ -234,4 +235,5 @@ export { PostHtmlRenderer, QuickProfileModal, QuickReplyModal, + VideoPlayer, }; diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index 88437cb71..2d94b0754 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -1,27 +1,31 @@ -import React, { memo, } from "react"; -import RenderHTML, { CustomRendererProps, Element, TNode } from "react-native-render-html"; -import styles from "./postHtmlRendererStyles"; -import { LinkData, parseLinkData } from "./linkDataParser"; -import VideoThumb from "./videoThumb"; -import { AutoHeightImage } from "../autoHeightImage/autoHeightImage"; -import { useHtmlIframeProps,iframeModel } from '@native-html/iframe-plugin'; -import WebView from "react-native-webview"; +import React, { memo } from 'react'; +import RenderHTML, { CustomRendererProps, Element, TNode } from 'react-native-render-html'; +import styles from './postHtmlRendererStyles'; +import { LinkData, parseLinkData } from './linkDataParser'; +import VideoThumb from './videoThumb'; +import { AutoHeightImage } from '../autoHeightImage/autoHeightImage'; +import { useHtmlIframeProps, iframeModel } from '@native-html/iframe-plugin'; +import WebView from 'react-native-webview'; +import { View } from 'react-native'; +import YoutubeIframe from 'react-native-youtube-iframe'; +import { VideoPlayer } from '..'; interface PostHtmlRendererProps { - contentWidth:number; - body:string; - onLoaded?:()=>void; - setSelectedImage:(imgUrl:string)=>void; - setSelectedLink:(url:string)=>void; - onElementIsImage:(imgUrl:string)=>void; - handleOnPostPress:(permlink:string, authro:string)=>void; - handleOnUserPress:(username:string)=>void; - handleTagPress:(tag:string, filter?:string)=>void; - handleVideoPress:(videoUrl:string)=>void; - handleYoutubePress:(videoId:string, startTime:number)=>void; + contentWidth: number; + body: string; + onLoaded?: () => void; + setSelectedImage: (imgUrl: string) => void; + setSelectedLink: (url: string) => void; + onElementIsImage: (imgUrl: string) => void; + handleOnPostPress: (permlink: string, authro: string) => void; + handleOnUserPress: (username: string) => void; + handleTagPress: (tag: string, filter?: string) => void; + handleVideoPress: (videoUrl: string) => void; + handleYoutubePress: (videoId: string, startTime: number) => void; } -export const PostHtmlRenderer = memo(({ +export const PostHtmlRenderer = memo( + ({ contentWidth, body, onLoaded, @@ -33,209 +37,174 @@ export const PostHtmlRenderer = memo(({ handleTagPress, handleVideoPress, handleYoutubePress, - }:PostHtmlRendererProps) => { + }: PostHtmlRendererProps) => { + //new renderer functions + body = body.replace(/
/g, '
').replace(/<\/center>/g, '
'); - //new renderer functions - body = body.replace(/
/g, '
').replace(/<\/center>/g,'
'); + console.log('Comment body:', body); - console.log("Comment body:", body); - - const _handleOnLinkPress = (data:LinkData) => { - - if(!data){ - return; - } - - const { - type, - href, - author, - permlink, - tag, - youtubeId, - startTime, - filter, - videoHref, - community - } = data; - - try { - - switch (type) { - case '_external': - case 'markdown-external-link': - setSelectedLink(href); - break; - case 'markdown-author-link': - if (handleOnUserPress) { - handleOnUserPress(author); - } - break; - case 'markdown-post-link': - if (handleOnPostPress) { - handleOnPostPress(permlink, author); - } - break; - case 'markdown-tag-link': - if(handleTagPress){ - handleTagPress(tag, filter); - } - break; - - case 'markdown-video-link': - if(handleVideoPress){ - handleVideoPress(videoHref) - } - break; - case 'markdown-video-link-youtube': - if(handleYoutubePress){ - handleYoutubePress(youtubeId, startTime) - } - - break; - - //unused cases - case 'markdown-witnesses-link': - setSelectedLink(href); - break; - - case 'markdown-proposal-link': - setSelectedLink(href); - break; - - case 'markdown-community-link': - //tag press also handles community by default - if(handleTagPress){ - handleTagPress(community, filter) - } - break; - - default: - break; + const _handleOnLinkPress = (data: LinkData) => { + if (!data) { + return; } - } catch (error) {} - }; - - - const _onElement = (element:Element) => { - if(element.tagName === 'img' && element.attribs.src){ + + const { + type, + href, + author, + permlink, + tag, + youtubeId, + startTime, + filter, + videoHref, + community, + } = data; + + try { + switch (type) { + case '_external': + case 'markdown-external-link': + setSelectedLink(href); + break; + case 'markdown-author-link': + if (handleOnUserPress) { + handleOnUserPress(author); + } + break; + case 'markdown-post-link': + if (handleOnPostPress) { + handleOnPostPress(permlink, author); + } + break; + case 'markdown-tag-link': + if (handleTagPress) { + handleTagPress(tag, filter); + } + break; + + case 'markdown-video-link': + if (handleVideoPress) { + handleVideoPress(videoHref); + } + break; + case 'markdown-video-link-youtube': + if (handleYoutubePress) { + handleYoutubePress(youtubeId, startTime); + } + + break; + + //unused cases + case 'markdown-witnesses-link': + setSelectedLink(href); + break; + + case 'markdown-proposal-link': + setSelectedLink(href); + break; + + case 'markdown-community-link': + //tag press also handles community by default + if (handleTagPress) { + handleTagPress(community, filter); + } + break; + + default: + break; + } + } catch (error) {} + }; + + const _onElement = (element: Element) => { + if (element.tagName === 'img' && element.attribs.src) { const imgUrl = element.attribs.src; - console.log("img element detected", imgUrl); - onElementIsImage(imgUrl) + console.log('img element detected', imgUrl); + onElementIsImage(imgUrl); } }; - - const _anchorRenderer = ({ - InternalRenderer, - tnode, - ...props - }:CustomRendererProps) => { - + const _anchorRenderer = ({ InternalRenderer, tnode, ...props }: CustomRendererProps) => { + const parsedTnode = parseLinkData(tnode); const _onPress = () => { - console.log("Link Pressed:", tnode) + console.log('Link Pressed:', tnode); const data = parseLinkData(tnode); _handleOnLinkPress(data); }; - if (tnode.classes?.indexOf('markdown-video-link') >= 0) { - // get video src - let videoHref = tnode.attributes['data-embed-src'] || tnode.attributes['data-video-href'] || tnode.children[0].attributes['src']; - + if (parsedTnode.type === 'markdown-video-link-youtube') { return ( - { - console.log('load end'); - }} - onLoadStart={() => { - console.log('load start'); - }} - source={{ uri: videoHref }} - style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} - startInLoadingState={true} - onShouldStartLoadWithRequest={() => true} - mediaPlaybackRequiresUserAction={true} - allowsInlineMediaPlayback={true} + ); } - if(tnode.classes?.indexOf('markdown-video-link') >= 0){ - const imgElement = tnode.children.find((child)=>{ - return child.classes.indexOf('video-thumbnail') > 0 ? true:false - }) - if(!imgElement){ - return ( - - ) + if (tnode.classes?.indexOf('markdown-video-link') >= 0) { + return ( + + ); + } + if (tnode.classes?.indexOf('markdown-video-link') >= 0) { + const imgElement = tnode.children.find((child) => { + return child.classes.indexOf('video-thumbnail') > 0 ? true : false; + }); + if (!imgElement) { + return ; } } - - - return ( - - ) - } + + return ; + }; //this method checks if image is a child of table column //and calculates img width accordingly, //returns full width if img is not part of table - const getMaxImageWidth = (tnode:TNode)=>{ - + const getMaxImageWidth = (tnode: TNode) => { //return full width if not parent exist - if(!tnode.parent || tnode.parent.tagName === 'body'){ + if (!tnode.parent || tnode.parent.tagName === 'body') { return contentWidth; } //return divided width based on number td tags - if(tnode.parent.tagName === 'td'){ - const cols = tnode.parent.parent.children.length - return contentWidth/cols; + if (tnode.parent.tagName === 'td') { + const cols = tnode.parent.parent.children.length; + return contentWidth / cols; } //check next parent return getMaxImageWidth(tnode.parent); - } - - - const _imageRenderer = ({ - tnode, - }:CustomRendererProps) => { - + }; + + const _imageRenderer = ({ tnode }: CustomRendererProps) => { const imgUrl = tnode.attributes.src; const _onPress = () => { - console.log("Image Pressed:", imgUrl) + console.log('Image Pressed:', imgUrl); setSelectedImage(imgUrl); }; - + const isVideoThumb = tnode.classes?.indexOf('video-thumbnail') >= 0; const isAnchored = tnode.parent?.tagName === 'a'; - - if(isVideoThumb){ - return ; - } - else { + if (isVideoThumb) { + return ; + } else { const maxImgWidth = getMaxImageWidth(tnode); return ( - - ) + ); } - - } - + }; /** * the para renderer is designd to remove margins from para @@ -243,31 +212,18 @@ export const PostHtmlRenderer = memo(({ * a weired misalignment of bullet and content * @returns Default Renderer */ - const _paraRenderer = ({ - TDefaultRenderer, - ...props - }:CustomRendererProps) => { + const _paraRenderer = ({ TDefaultRenderer, ...props }: CustomRendererProps) => { + props.style = props.tnode.parent.tagName === 'li' ? styles.pLi : styles.p; - props.style = props.tnode.parent.tagName === 'li' - ? styles.pLi - : styles.p + return ; + }; - return ( - - ) - } - // iframe renderer for rendering iframes in body const _iframeRenderer = function IframeRenderer(props) { const iframeProps = useHtmlIframeProps(props); - // console.log('iframeProps : ', iframeProps); const checkSrcRegex = /(.*?)\.(mp4|webm|ogg)$/gi; const isVideoType = iframeProps.source.uri.match(checkSrcRegex); - // check if source contain video source then wrap it with video tag - // else pass the source directly to webview const src = isVideoType ? { html: ` @@ -300,55 +256,57 @@ export const PostHtmlRenderer = memo(({ /> ); }; - - return ( - - ) - }, (next, prev)=>next.body === prev.body) + + return ( + + ); + }, + (next, prev) => next.body === prev.body, +); diff --git a/src/components/videoPlayer/videoPlayerStyles.ts b/src/components/videoPlayer/videoPlayerStyles.ts new file mode 100644 index 000000000..b64e4c5cf --- /dev/null +++ b/src/components/videoPlayer/videoPlayerStyles.ts @@ -0,0 +1,5 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; + +export default EStyleSheet.create({ + +}); diff --git a/src/components/videoPlayer/videoPlayerView.tsx b/src/components/videoPlayer/videoPlayerView.tsx new file mode 100644 index 000000000..500aa5fbf --- /dev/null +++ b/src/components/videoPlayer/videoPlayerView.tsx @@ -0,0 +1,98 @@ +import React, { useState } from 'react'; +import style from './videoPlayerStyles'; +import { Dimensions } from 'react-native'; +import { View, StyleSheet, ActivityIndicator } from 'react-native'; +import WebView from 'react-native-webview'; +import YoutubeIframe, { InitialPlayerParams } from 'react-native-youtube-iframe'; + +interface VideoPlayerProps { + youtubeVideoId?: string; + videoUrl?: string; + startTime?: number; + contentWidth?: number; +} + +const VideoPlayer = ({ youtubeVideoId, videoUrl, startTime, contentWidth }: VideoPlayerProps) => { + const PLAYER_HEIGHT = Dimensions.get('screen').width * (9 / 16); + + const [shouldPlay, setShouldPlay] = useState(false); + const [loading, setLoading] = useState(true); + + const _onReady = () => { + setLoading(false); + setShouldPlay(true); + console.log('ready'); + }; + + const _onChangeState = (event: string) => { + console.log(event); + setShouldPlay(!(event == 'paused' || event == 'ended')); + }; + + const _onError = () => { + console.log('error!'); + setLoading(false); + }; + + const initialParams: InitialPlayerParams = { + start: startTime, + }; + + return ( + + {youtubeVideoId && ( + + + + )} + {videoUrl && ( + + { + setLoading(false); + }} + onLoadStart={() => { + setLoading(true); + }} + source={{ uri: videoUrl }} + style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} + startInLoadingState={true} + onShouldStartLoadWithRequest={() => true} + mediaPlaybackRequiresUserAction={true} + allowsInlineMediaPlayback={true} + /> + + )} + {loading && } + + ); +}; + +export default VideoPlayer; + +const styles = StyleSheet.create({ + container: { + paddingVertical: 16, + }, + activityIndicator: { + position: 'absolute', + alignItems: 'center', + justifyContent: 'center', + top: 0, + bottom: 0, + left: 0, + right: 0, + }, +}); From ddd4de5b37be593abd9c6df9fb159ef72fe20d73 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Sat, 22 Jan 2022 16:10:01 +0500 Subject: [PATCH 05/24] changed condition causing crash --- src/components/postHtmlRenderer/postHtmlRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index 2d94b0754..3853c94b7 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -133,7 +133,7 @@ export const PostHtmlRenderer = memo( _handleOnLinkPress(data); }; - if (parsedTnode.type === 'markdown-video-link-youtube') { + if (tnode.classes?.indexOf('markdown-video-link-youtube') >= 0) { return ( Date: Sun, 23 Jan 2022 01:11:17 +0500 Subject: [PATCH 06/24] unified video player component --- .../body/view/commentBodyView.tsx | 11 ++- .../postElements/body/view/postBodyView.js | 6 +- .../body/view/videoPlayerSheet.tsx | 83 ------------------- .../postHtmlRenderer/postHtmlRenderer.tsx | 52 +++++------- .../videoPlayer/videoPlayerView.tsx | 26 ++++-- 5 files changed, 48 insertions(+), 130 deletions(-) delete mode 100644 src/components/postElements/body/view/videoPlayerSheet.tsx diff --git a/src/components/postElements/body/view/commentBodyView.tsx b/src/components/postElements/body/view/commentBodyView.tsx index bf7b79d29..52b518d5e 100644 --- a/src/components/postElements/body/view/commentBodyView.tsx +++ b/src/components/postElements/body/view/commentBodyView.tsx @@ -13,7 +13,7 @@ import { navigate } from '../../../../navigation/service'; // Constants import { default as ROUTES } from '../../../../constants/routeNames'; -import { PostHtmlRenderer, TextButton } from '../../..'; +import { PostHtmlRenderer, TextButton, VideoPlayer } from '../../..'; // Styles import styles from './commentBodyStyles'; @@ -21,14 +21,12 @@ import styles from './commentBodyStyles'; // Services and Actions import { writeToClipboard } from '../../../../utils/clipboard'; import { toastNotification } from '../../../../redux/actions/uiAction'; -import VideoPlayerSheet from './videoPlayerSheet'; import { LongPressGestureHandler, State } from 'react-native-gesture-handler'; import { useCallback } from 'react'; import { OptionsModal } from '../../../atoms'; import { useAppDispatch } from '../../../../hooks'; import { isCommunity } from '../../../../utils/communityValidation'; import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters'; -import { startsWith } from 'core-js/core/string'; const WIDTH = Dimensions.get('window').width; @@ -368,7 +366,12 @@ const CommentBody = ({ setVideoUrl(null); }} > - + ); diff --git a/src/components/postElements/body/view/postBodyView.js b/src/components/postElements/body/view/postBodyView.js index 052931d6b..8979014ad 100644 --- a/src/components/postElements/body/view/postBodyView.js +++ b/src/components/postElements/body/view/postBodyView.js @@ -15,11 +15,10 @@ import { toastNotification } from '../../../../redux/actions/uiAction'; // Constants import { default as ROUTES } from '../../../../constants/routeNames'; -import VideoPlayerSheet from './videoPlayerSheet'; import { OptionsModal } from '../../../atoms'; import { isCommunity } from '../../../../utils/communityValidation'; import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters'; -import { PostHtmlRenderer } from '../../..'; +import { PostHtmlRenderer, VideoPlayer } from '../../..'; const WIDTH = Dimensions.get('window').width; @@ -294,7 +293,8 @@ const PostBody = ({ navigation, body, dispatch, onLoadEnd }) => { setVideoUrl(null); }} > - { - - const PLAYER_HEIGHT = Dimensions.get('screen').width * (9/16); - - const [shouldPlay, setShouldPlay] = useState(false); - const [loading, setLoading] = useState(true); - - const _onReady = () => { - setLoading(false) - setShouldPlay(true); - } - - const _onChangeState = (event:string) => { - setShouldPlay(!(event == 'paused' || event == 'ended')); - } - - const _onError = () => { - setLoading(false) - } - - const initialParams:InitialPlayerParams = { - start:startTime - } - - return ( - - - {youtubeVideoId && - - - }{ - videoUrl && - - { - setLoading(false); - }} - onLoadStart={()=>{ - setLoading(true); - }} - source={{uri:videoUrl}} - /> - - - } - {loading && } - - ); -}; - -export default VideoPlayerSheet; - -const styles = StyleSheet.create({ - container: { - paddingVertical:16, - }, - activityIndicator: { - position:'absolute', alignItems:'center', justifyContent:'center', top:0, bottom:0, left:0, right:0} -}); diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index 3853c94b7..a66dfdff9 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -218,43 +218,31 @@ export const PostHtmlRenderer = memo( return ; }; + // iframe renderer for rendering iframes in body const _iframeRenderer = function IframeRenderer(props) { const iframeProps = useHtmlIframeProps(props); const checkSrcRegex = /(.*?)\.(mp4|webm|ogg)$/gi; - const isVideoType = iframeProps.source.uri.match(checkSrcRegex); + const isVideoFormat = iframeProps.source.uri.match(checkSrcRegex); - const src = isVideoType - ? { - html: ` - - `, - } - : { - uri: iframeProps.source.uri, - }; - return ( - { - console.log('load end'); - }} - onLoadStart={() => { - console.log('load start'); - }} - source={src} - style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} - startInLoadingState={true} - onShouldStartLoadWithRequest={() => true} - mediaPlaybackRequiresUserAction={true} - allowsInlineMediaPlayback={true} - /> - ); + //this hack help avoid autoplaying fullscreened iframe videos; + const src = isVideoFormat ? + { + html: ` + `, + }:{ + uri: iframeProps.source.uri, + }; + + return ( + + ); }; return ( diff --git a/src/components/videoPlayer/videoPlayerView.tsx b/src/components/videoPlayer/videoPlayerView.tsx index 500aa5fbf..65e9dfc91 100644 --- a/src/components/videoPlayer/videoPlayerView.tsx +++ b/src/components/videoPlayer/videoPlayerView.tsx @@ -1,19 +1,29 @@ import React, { useState } from 'react'; -import style from './videoPlayerStyles'; import { Dimensions } from 'react-native'; import { View, StyleSheet, ActivityIndicator } from 'react-native'; import WebView from 'react-native-webview'; import YoutubeIframe, { InitialPlayerParams } from 'react-native-youtube-iframe'; +import { WebViewSource } from 'react-native-webview/lib/WebViewTypes'; interface VideoPlayerProps { + mode: 'source'|'youtube'|'url'; + contentWidth?: number; youtubeVideoId?: string; videoUrl?: string; startTime?: number; - contentWidth?: number; + source?: WebViewSource; } -const VideoPlayer = ({ youtubeVideoId, videoUrl, startTime, contentWidth }: VideoPlayerProps) => { - const PLAYER_HEIGHT = Dimensions.get('screen').width * (9 / 16); +const VideoPlayer = ({ + youtubeVideoId, + videoUrl, + startTime, + source, + contentWidth = Dimensions.get('screen').width, + mode + }: VideoPlayerProps) => { + + const PLAYER_HEIGHT = contentWidth * (9 / 16); const [shouldPlay, setShouldPlay] = useState(false); const [loading, setLoading] = useState(true); @@ -40,7 +50,7 @@ const VideoPlayer = ({ youtubeVideoId, videoUrl, startTime, contentWidth }: Vide return ( - {youtubeVideoId && ( + {mode === 'youtube' && youtubeVideoId && ( )} - {videoUrl && ( + {((mode === 'source' && source) || (mode === 'url' && videoUrl)) && ( { setLoading(true); }} - source={{ uri: videoUrl }} - style={{ width: contentWidth, height: (contentWidth * 9) / 16 }} + source={source || { uri: videoUrl }} + style={{ width: contentWidth, height: PLAYER_HEIGHT}} startInLoadingState={true} onShouldStartLoadWithRequest={() => true} mediaPlaybackRequiresUserAction={true} From aa963f5f8b219ee5fcb075d4ccf40c05cfe681f4 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Sun, 23 Jan 2022 01:12:11 +0500 Subject: [PATCH 07/24] cleaned up video link processor in anchorRenderer, using sheet based players for comments --- .../body/view/commentBodyView.tsx | 1 + .../postHtmlRenderer/postHtmlRenderer.tsx | 57 +++++++++++-------- 2 files changed, 33 insertions(+), 25 deletions(-) diff --git a/src/components/postElements/body/view/commentBodyView.tsx b/src/components/postElements/body/view/commentBodyView.tsx index 52b518d5e..730816e4d 100644 --- a/src/components/postElements/body/view/commentBodyView.tsx +++ b/src/components/postElements/body/view/commentBodyView.tsx @@ -335,6 +335,7 @@ const CommentBody = ({ void; setSelectedImage: (imgUrl: string) => void; setSelectedLink: (url: string) => void; @@ -28,6 +27,7 @@ export const PostHtmlRenderer = memo( ({ contentWidth, body, + isComment, onLoaded, setSelectedImage, setSelectedLink, @@ -133,35 +133,42 @@ export const PostHtmlRenderer = memo( _handleOnLinkPress(data); }; - if (tnode.classes?.indexOf('markdown-video-link-youtube') >= 0) { - return ( - - ); - } - if (tnode.classes?.indexOf('markdown-video-link') >= 0) { - return ( - - ); - } - if (tnode.classes?.indexOf('markdown-video-link') >= 0) { - const imgElement = tnode.children.find((child) => { - return child.classes.indexOf('video-thumbnail') > 0 ? true : false; - }); - if (!imgElement) { - return ; + + //process video link + if(tnode.classes?.indexOf('markdown-video-link') >= 0){ + if(isComment){ + const imgElement = tnode.children.find((child) => { + return child.classes.indexOf('video-thumbnail') > 0 ? true : false; + }); + if (!imgElement) { + return ; + } + } + else if(tnode.classes?.indexOf('markdown-video-link-youtube') >= 0){ + return ( + + ); + } else { + return ( + + ); } } + return ; }; + //this method checks if image is a child of table column //and calculates img width accordingly, //returns full width if img is not part of table From 2f167af102872f260e945a7b1077ce02bbcf727b Mon Sep 17 00:00:00 2001 From: noumantahir Date: Sun, 23 Jan 2022 01:22:13 +0500 Subject: [PATCH 08/24] improved player response and refined logic --- .../postHtmlRenderer/postHtmlRenderer.tsx | 15 ++++----------- src/components/videoPlayer/videoPlayerView.tsx | 8 ++++++-- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index eacb47841..01d7c9430 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -143,22 +143,15 @@ export const PostHtmlRenderer = memo( if (!imgElement) { return ; } - } - else if(tnode.classes?.indexOf('markdown-video-link-youtube') >= 0){ - return ( - - ); } else { return ( ); } diff --git a/src/components/videoPlayer/videoPlayerView.tsx b/src/components/videoPlayer/videoPlayerView.tsx index 65e9dfc91..60bd9fb67 100644 --- a/src/components/videoPlayer/videoPlayerView.tsx +++ b/src/components/videoPlayer/videoPlayerView.tsx @@ -12,6 +12,9 @@ interface VideoPlayerProps { videoUrl?: string; startTime?: number; source?: WebViewSource; + + //prop for youtube player + disableAutoplay?:boolean; } const VideoPlayer = ({ @@ -20,7 +23,8 @@ const VideoPlayer = ({ startTime, source, contentWidth = Dimensions.get('screen').width, - mode + mode, + disableAutoplay }: VideoPlayerProps) => { const PLAYER_HEIGHT = contentWidth * (9 / 16); @@ -30,7 +34,7 @@ const VideoPlayer = ({ const _onReady = () => { setLoading(false); - setShouldPlay(true); + setShouldPlay(disableAutoplay ? false : true); console.log('ready'); }; From 304fe07e826d34fb94ee3fe5ed1163aaeb044b5e Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 27 Jan 2022 18:17:51 +0500 Subject: [PATCH 09/24] replaced action sheet in commentView --- ios/Podfile.lock | 2 +- src/components/comment/view/commentView.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a160089bc..c052bc551 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -772,4 +772,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 9c48318ea254e2c78005a7a0c2d8bfc14ddd783d -COCOAPODS: 1.10.1 +COCOAPODS: 1.11.2 diff --git a/src/components/comment/view/commentView.tsx b/src/components/comment/view/commentView.tsx index 13881e3c8..0a0a42a97 100644 --- a/src/components/comment/view/commentView.tsx +++ b/src/components/comment/view/commentView.tsx @@ -1,6 +1,5 @@ import React, { Fragment, useState, useRef, useEffect } from 'react'; import { View } from 'react-native'; -import ActionSheet from 'react-native-actionsheet'; import { useIntl } from 'react-intl'; import get from 'lodash/get'; import { View as AnimatedView } from 'react-native-animatable'; @@ -18,6 +17,7 @@ import { TextWithIcon } from '../../basicUIElements'; // Styles import styles from './commentStyles'; import { useAppSelector } from '../../../hooks'; +import { OptionsModal } from '../../atoms'; const CommentView = ({ avatarSize, @@ -203,7 +203,7 @@ const CommentView = ({ onPress={() => actionSheet.current.show()} iconType="MaterialIcons" /> - Date: Thu, 27 Jan 2022 18:45:32 +0500 Subject: [PATCH 10/24] replaced actionsheet in draftListItem --- src/components/draftListItem/view/draftListItemView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/draftListItem/view/draftListItemView.js b/src/components/draftListItem/view/draftListItemView.js index a11de8f17..313d7b60b 100644 --- a/src/components/draftListItem/view/draftListItemView.js +++ b/src/components/draftListItem/view/draftListItemView.js @@ -1,5 +1,4 @@ import React, { useRef, useState, useEffect, Fragment } from 'react'; -import ActionSheet from 'react-native-actionsheet'; import { View, Text, TouchableOpacity, Dimensions } from 'react-native'; import { injectIntl } from 'react-intl'; import ImageSize from 'react-native-image-size'; @@ -11,6 +10,7 @@ import { getTimeFromNow } from '../../../utils/time'; import { PostHeaderDescription } from '../../postElements'; import { IconButton } from '../../iconButton'; import ProgressiveImage from '../../progressiveImage'; +import { OptionsModal } from '../../atoms'; // Styles import styles from './draftListItemStyles'; @@ -95,7 +95,7 @@ const DraftListItemView = ({ - Date: Thu, 27 Jan 2022 18:52:11 +0500 Subject: [PATCH 11/24] replaced actionsheet in markDownEditor --- src/components/markdownEditor/view/markdownEditorView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/markdownEditor/view/markdownEditorView.js b/src/components/markdownEditor/view/markdownEditorView.js index 6d7241413..c33e28c94 100644 --- a/src/components/markdownEditor/view/markdownEditorView.js +++ b/src/components/markdownEditor/view/markdownEditorView.js @@ -8,7 +8,6 @@ import { ScrollView, TouchableOpacity, } from 'react-native'; -import ActionSheet from 'react-native-actionsheet'; import { renderPostBody } from '@ecency/render-helper'; import { useDispatch, useSelector } from 'react-redux'; import { View as AnimatedView } from 'react-native-animatable'; @@ -46,6 +45,7 @@ import styles from './markdownEditorStyles'; import applySnippet from './formats/applySnippet'; import { MainButton } from '../../mainButton'; import isAndroidOreo from '../../../utils/isAndroidOreo'; +import { OptionsModal } from '../../atoms'; const MIN_BODY_INPUT_HEIGHT = 300; @@ -474,7 +474,7 @@ const MarkdownEditorView = ({ uploadedImage={uploadedImage} /> - - Date: Thu, 27 Jan 2022 18:55:46 +0500 Subject: [PATCH 12/24] replaced actionsheet in postBoostView --- src/components/postBoost/postBoostView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/postBoost/postBoostView.js b/src/components/postBoost/postBoostView.js index 74717a98c..c2c5a4560 100644 --- a/src/components/postBoost/postBoostView.js +++ b/src/components/postBoost/postBoostView.js @@ -3,7 +3,6 @@ import { injectIntl } from 'react-intl'; import { Text, View, ScrollView, TouchableOpacity, Alert } from 'react-native'; import { WebView } from 'react-native-webview'; import get from 'lodash/get'; -import ActionSheet from 'react-native-actionsheet'; import Autocomplete from '@esteemapp/react-native-autocomplete-input'; import { Icon, TextInput } from '..'; import { hsOptions } from '../../constants/hsOptions'; @@ -21,6 +20,7 @@ import { Modal } from '../modal'; // Styles import styles from './postBoostStyles'; +import { OptionsModal } from '../atoms'; class BoostPostScreen extends PureComponent { /* Props @@ -240,7 +240,7 @@ class BoostPostScreen extends PureComponent { - Date: Thu, 27 Jan 2022 18:59:07 +0500 Subject: [PATCH 13/24] replaced actionsheet in postDropdownContainer --- .../postDropdown/container/postDropdownContainer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/postDropdown/container/postDropdownContainer.tsx b/src/components/postDropdown/container/postDropdownContainer.tsx index c16e29133..fc958a5ca 100644 --- a/src/components/postDropdown/container/postDropdownContainer.tsx +++ b/src/components/postDropdown/container/postDropdownContainer.tsx @@ -2,7 +2,6 @@ import React, { PureComponent, Fragment } from 'react'; import { connect } from 'react-redux'; import { withNavigation } from 'react-navigation'; import { Share } from 'react-native'; -import ActionSheet from 'react-native-actionsheet'; import { injectIntl } from 'react-intl'; import get from 'lodash/get'; @@ -22,6 +21,7 @@ import { getPostUrl } from '../../../utils/post'; // Component import PostDropdownView from '../view/postDropdownView'; +import { OptionsModal } from '../../atoms'; /* * Props Name Description Value @@ -278,7 +278,7 @@ class PostDropdownContainer extends PureComponent { handleOnDropdownSelect={this._handleOnDropdownSelect} {...this.props} /> - (this.ActionSheet = o)} options={['Reblog', intl.formatMessage({ id: 'alert.cancel' })]} title={intl.formatMessage({ id: 'post.reblog_alert' })} From f9d1dc6391cd2b4beb3fda4df6e363de1fa3bf74 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 27 Jan 2022 19:01:36 +0500 Subject: [PATCH 14/24] replaced actionsheet in postDisplayView --- src/components/postView/view/postDisplayView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/postView/view/postDisplayView.js b/src/components/postView/view/postDisplayView.js index e75028763..d2643216f 100644 --- a/src/components/postView/view/postDisplayView.js +++ b/src/components/postView/view/postDisplayView.js @@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState, Fragment } from 'react import { View, Text, ScrollView, Dimensions, SafeAreaView, RefreshControl } from 'react-native'; import { injectIntl } from 'react-intl'; import get from 'lodash/get'; -import ActionSheet from 'react-native-actionsheet'; // Providers import { userActivity } from '../../../providers/ecency/ePoint'; @@ -20,6 +19,7 @@ import { ParentPost } from '../../parentPost'; // Styles import styles from './postDisplayStyles'; +import { OptionsModal } from '../../atoms'; const HEIGHT = Dimensions.get('window').width; @@ -251,7 +251,7 @@ const PostDisplayView = ({ )} {post && _getTabBar(true)} - Date: Thu, 27 Jan 2022 19:04:31 +0500 Subject: [PATCH 15/24] replaced actionsheet in promoteView --- src/components/promote/promoteView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/promote/promoteView.js b/src/components/promote/promoteView.js index ca5828cd9..7b33e4dad 100644 --- a/src/components/promote/promoteView.js +++ b/src/components/promote/promoteView.js @@ -3,7 +3,6 @@ import { injectIntl } from 'react-intl'; import { Text, View, ScrollView, TouchableOpacity, Alert } from 'react-native'; import { WebView } from 'react-native-webview'; import get from 'lodash/get'; -import ActionSheet from 'react-native-actionsheet'; import Autocomplete from '@esteemapp/react-native-autocomplete-input'; import { ScaleSlider, TextInput } from '..'; import { hsOptions } from '../../constants/hsOptions'; @@ -23,6 +22,7 @@ import { PROMOTE_PRICING, PROMOTE_DAYS } from '../../constants/options/points'; // Styles import styles from './promoteStyles'; +import { OptionsModal } from '../atoms'; const PromoteView = ({ intl, @@ -214,7 +214,7 @@ const PromoteView = ({ - Date: Thu, 27 Jan 2022 19:06:11 +0500 Subject: [PATCH 16/24] replaced actionsheet in sideMenuView --- src/components/sideMenu/view/sideMenuView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/sideMenu/view/sideMenuView.js b/src/components/sideMenu/view/sideMenuView.js index 8d3365df4..0f859fac8 100644 --- a/src/components/sideMenu/view/sideMenuView.js +++ b/src/components/sideMenu/view/sideMenuView.js @@ -10,7 +10,6 @@ import { } from 'react-native'; import { injectIntl, useIntl } from 'react-intl'; import LinearGradient from 'react-native-linear-gradient'; -import ActionSheet from 'react-native-actionsheet'; import VersionNumber from 'react-native-version-number'; import { isEmpty } from 'lodash'; import { getStorageType } from '../../../realm/realm'; @@ -28,6 +27,7 @@ import { getVotingPower } from '../../../utils/manaBar'; // Styles import styles from './sideMenuStyles'; +import { OptionsModal } from '../../atoms'; // Images const SIDE_MENU_BACKGROUND = require('../../../assets/side_menu_background.png'); @@ -165,7 +165,7 @@ const SideMenuView = ({ item.id} renderItem={_renderItem} /> {`v${appVersion}, ${buildVersion}${storageT}`} - Date: Thu, 27 Jan 2022 19:29:08 +0500 Subject: [PATCH 17/24] replaced actionsheet in profileEditScreen --- src/screens/profileEdit/screen/profileEditScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/profileEdit/screen/profileEditScreen.js b/src/screens/profileEdit/screen/profileEditScreen.js index fa71e0702..5b5df2897 100644 --- a/src/screens/profileEdit/screen/profileEditScreen.js +++ b/src/screens/profileEdit/screen/profileEditScreen.js @@ -2,11 +2,11 @@ import React, { PureComponent, Fragment } from 'react'; import { StatusBar } from 'react-native'; import { injectIntl } from 'react-intl'; import get from 'lodash/get'; -import ActionSheet from 'react-native-actionsheet'; import { ProfileEditContainer } from '../../../containers'; import { AvatarHeader, ProfileEditForm } from '../../../components'; +import { OptionsModal } from '../../../components/atoms'; class ProfileEditScreen extends PureComponent { /* Props @@ -81,7 +81,7 @@ class ProfileEditScreen extends PureComponent { handleOnSubmit={handleOnSubmit} /> - Date: Thu, 27 Jan 2022 19:34:19 +0500 Subject: [PATCH 18/24] replaced actionSheet in addressScreen --- src/screens/transfer/screen/addressScreen.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/src/screens/transfer/screen/addressScreen.js b/src/screens/transfer/screen/addressScreen.js index 9f7dbb5e8..85c00d2f2 100644 --- a/src/screens/transfer/screen/addressScreen.js +++ b/src/screens/transfer/screen/addressScreen.js @@ -1,17 +1,9 @@ -import React, { Fragment, Component } from 'react'; -import { Text, View, ScrollView, TouchableOpacity } from 'react-native'; -import { WebView } from 'react-native-webview'; -import ActionSheet from 'react-native-actionsheet'; +import React, { Fragment } from 'react'; +import { Text, View, ScrollView } from 'react-native'; import { injectIntl } from 'react-intl'; -import get from 'lodash/get'; import QRCode from 'react-native-qrcode-svg'; -import { connect, useDispatch } from 'react-redux'; - -import { hsOptions } from '../../../constants/hsOptions'; -import AUTH_TYPE from '../../../constants/authType'; -import { encryptKey, decryptKey } from '../../../utils/crypto'; - -import { BasicHeader, MainButton } from '../../../components'; +import { connect } from 'react-redux'; +import { BasicHeader } from '../../../components'; import styles from './transferStyles'; From 6b18b8c84281e622f57e896d4444b051b058c1ac Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 27 Jan 2022 19:35:22 +0500 Subject: [PATCH 19/24] replaced actionsheet in delegateScreen --- src/screens/transfer/screen/delegateScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/transfer/screen/delegateScreen.js b/src/screens/transfer/screen/delegateScreen.js index 2b04542e1..0e3b49365 100644 --- a/src/screens/transfer/screen/delegateScreen.js +++ b/src/screens/transfer/screen/delegateScreen.js @@ -4,7 +4,6 @@ import { WebView } from 'react-native-webview'; import { injectIntl } from 'react-intl'; import Slider from '@esteemapp/react-native-slider'; import get from 'lodash/get'; -import ActionSheet from 'react-native-actionsheet'; // Constants import AUTH_TYPE from '../../../constants/authType'; @@ -28,6 +27,7 @@ import { vestsToHp } from '../../../utils/conversions'; // Styles import styles from './transferStyles'; +import { OptionsModal } from '../../../components/atoms'; class DelegateScreen extends Component { constructor(props) { @@ -222,7 +222,7 @@ class DelegateScreen extends Component { - Date: Thu, 27 Jan 2022 19:36:40 +0500 Subject: [PATCH 20/24] replaced actionsheet in powerDownScreen --- src/screens/transfer/screen/powerDownScreen.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/screens/transfer/screen/powerDownScreen.js b/src/screens/transfer/screen/powerDownScreen.js index 63be9de32..a289922db 100644 --- a/src/screens/transfer/screen/powerDownScreen.js +++ b/src/screens/transfer/screen/powerDownScreen.js @@ -1,7 +1,6 @@ /* eslint-disable react/no-unused-state */ import React, { Fragment, Component } from 'react'; import { Text, View, ScrollView, Alert } from 'react-native'; -import ActionSheet from 'react-native-actionsheet'; import { injectIntl } from 'react-intl'; import Slider from '@esteemapp/react-native-slider'; import get from 'lodash/get'; @@ -28,6 +27,7 @@ import { vestsToHp } from '../../../utils/conversions'; import { isEmptyDate } from '../../../utils/time'; import styles from './transferStyles'; +import { OptionsModal } from '../../../components/atoms'; /* Props * ------------------------------------------------ * @prop { type } name - Description.... @@ -327,7 +327,7 @@ class PowerDownView extends Component { - (index === 0 ? this._handleTransferAction() : null)} /> - Date: Thu, 27 Jan 2022 19:38:06 +0500 Subject: [PATCH 21/24] replaced actionsheet in transferScreen --- src/screens/transfer/screen/transferScreen.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/screens/transfer/screen/transferScreen.js b/src/screens/transfer/screen/transferScreen.js index ee3ab2ae8..6ca7aa983 100644 --- a/src/screens/transfer/screen/transferScreen.js +++ b/src/screens/transfer/screen/transferScreen.js @@ -1,7 +1,6 @@ -import React, { Fragment, Component, useState, useRef, useEffect } from 'react'; +import React, { Fragment, useState, useRef } from 'react'; import { Text, View, ScrollView, TouchableOpacity } from 'react-native'; import { WebView } from 'react-native-webview'; -import ActionSheet from 'react-native-actionsheet'; import { injectIntl } from 'react-intl'; import get from 'lodash/get'; @@ -20,6 +19,7 @@ import { } from '../../../components'; import styles from './transferStyles'; +import { OptionsModal } from '../../../components/atoms'; const TransferView = ({ currentAccountName, @@ -275,7 +275,7 @@ const TransferView = ({ - Date: Thu, 27 Jan 2022 19:39:09 +0500 Subject: [PATCH 22/24] replaced actionsheet in transferTokenScreen --- src/screens/transfer/screen/transferTokenScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/transfer/screen/transferTokenScreen.js b/src/screens/transfer/screen/transferTokenScreen.js index 4f5fb057b..0fc2abfed 100644 --- a/src/screens/transfer/screen/transferTokenScreen.js +++ b/src/screens/transfer/screen/transferTokenScreen.js @@ -1,7 +1,6 @@ import React, { Fragment, Component } from 'react'; import { Text, View, ScrollView, TouchableOpacity } from 'react-native'; import { WebView } from 'react-native-webview'; -import ActionSheet from 'react-native-actionsheet'; import { injectIntl } from 'react-intl'; import get from 'lodash/get'; @@ -20,6 +19,7 @@ import { } from '../../../components'; import styles from './transferStyles'; +import { OptionsModal } from '../../../components/atoms'; /* Props * ------------------------------------------------ @@ -260,7 +260,7 @@ class TransferTokenView extends Component { - (this.ActionSheet = o)} options={[ intl.formatMessage({ id: 'alert.confirm' }), From b80320f0b331cedd62460dda519900f3b4c1c603 Mon Sep 17 00:00:00 2001 From: Sadaqat Ali Date: Thu, 27 Jan 2022 19:40:20 +0500 Subject: [PATCH 23/24] replaced actionsheet in basicHeader --- src/components/basicHeader/view/basicHeaderView.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/basicHeader/view/basicHeaderView.js b/src/components/basicHeader/view/basicHeaderView.js index a618653d3..432488ecc 100644 --- a/src/components/basicHeader/view/basicHeaderView.js +++ b/src/components/basicHeader/view/basicHeaderView.js @@ -1,7 +1,6 @@ import React, { useState, Fragment, useRef } from 'react'; import { View, Text, ActivityIndicator, SafeAreaView } from 'react-native'; import { injectIntl } from 'react-intl'; -import ActionSheet from 'react-native-actionsheet'; import { useSelector } from 'react-redux'; import moment from 'moment'; @@ -15,6 +14,7 @@ import { DateTimePicker } from '../../dateTimePicker'; // Constants // Styles import styles from './basicHeaderStyles'; +import { OptionsModal } from '../../atoms'; const BasicHeaderView = ({ disabled, @@ -324,7 +324,7 @@ const BasicHeaderView = ({ /> - - Date: Fri, 28 Jan 2022 18:50:07 +0500 Subject: [PATCH 24/24] exclusively setting div width apparently if div is present as post content parent, it was overriding the base contentWidth and taking whole available space, now setting div width exclusively to avoid this behaviour --- src/components/postHtmlRenderer/postHtmlRenderer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/postHtmlRenderer/postHtmlRenderer.tsx b/src/components/postHtmlRenderer/postHtmlRenderer.tsx index 1f0bd0e41..8fc5ce417 100644 --- a/src/components/postHtmlRenderer/postHtmlRenderer.tsx +++ b/src/components/postHtmlRenderer/postHtmlRenderer.tsx @@ -251,6 +251,7 @@ export const PostHtmlRenderer = memo(({ img:styles.img, th:styles.th, tr:{...styles.tr, width:contentWidth}, //center tag causes tr to have 0 width if not exclusivly set, contentWidth help avoid that + div:{width:contentWidth}, td:styles.td, blockquote:styles.blockquote, code:styles.code,