ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-24 05:42:33 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #2094 from ecency/nt/native-post

Browse Source 
WIP - Nt/native post
This commit is contained in:
Feruz M 2021-11-17 21:07:02 +05:00 committed by GitHub
commit 00685cc91a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 233 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

415
src/components/postElements/body/view/postBodyView.js
View File

@ -24,6 +24,7 @@ import VideoPlayerSheet from './videoPlayerSheet';
import { OptionsModal } from '../../../atoms'; import { OptionsModal } from '../../../atoms';
import { isCommunity } from '../../../../utils/communityValidation'; import { isCommunity } from '../../../../utils/communityValidation';
import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters'; import { GLOBAL_POST_FILTERS_VALUE } from '../../../../constants/options/filters';
import { PostHtmlRenderer } from '../../..';
const WIDTH = Dimensions.get('window').width; const WIDTH = Dimensions.get('window').width;
@ -44,6 +45,7 @@ const PostBody = ({
const [selectedLink, setSelectedLink] = useState(null); const [selectedLink, setSelectedLink] = useState(null);
const [html, setHtml] = useState(''); const [html, setHtml] = useState('');
const [youtubeVideoId, setYoutubeVideoId] = useState(null); const [youtubeVideoId, setYoutubeVideoId] = useState(null);
const [videoUrl, setVideoUrl] = useState(null);
const intl = useIntl(); const intl = useIntl();
const actionImage = useRef(null); const actionImage = useRef(null);
@ -56,76 +58,76 @@ const PostBody = ({
} }
}, [body]); }, [body]);
const _handleOnLinkPress = (event) => { // const _handleOnLinkPress = (event) => {
if ((!event && !get(event, 'nativeEvent.data'), false)) { // if ((!event && !get(event, 'nativeEvent.data'), false)) {
return; // return;
} // }
try { // try {
let data = {}; // let data = {};
try { // try {
data = JSON.parse(get(event, 'nativeEvent.data')); // data = JSON.parse(get(event, 'nativeEvent.data'));
} catch (error) { // } catch (error) {
data = {}; // data = {};
} // }
const { // const {
type, // type,
href, // href,
images, // images,
image, // image,
author, // author,
category, // category,
permlink, // permlink,
tag, // tag,
filter, // filter,
proposal, // proposal,
videoHref, // videoHref,
} = data; // } = data;
switch (type) { // switch (type) {
case '_external': // case '_external':
case 'markdown-external-link': // case 'markdown-external-link':
setSelectedLink(href); // setSelectedLink(href);
actionLink.current.show(); // actionLink.current.show();
break; // break;
case 'markdown-author-link': // case 'markdown-author-link':
if (!handleOnUserPress) { // if (!handleOnUserPress) {
_handleOnUserPress(author); // _handleOnUserPress(author);
} else { // } else {
handleOnUserPress(author); // handleOnUserPress(author);
} // }
break; // break;
case 'markdown-post-link': // case 'markdown-post-link':
if (!handleOnPostPress) { // if (!handleOnPostPress) {
_handleOnPostPress(permlink, author); // _handleOnPostPress(permlink, author);
} else { // } else {
handleOnPostPress(permlink, author); // handleOnPostPress(permlink, author);
} // }
break; // break;
case 'markdown-tag-link': // case 'markdown-tag-link':
_handleTagPress(tag, filter); // _handleTagPress(tag, filter);
break; // break;
case 'markdown-witnesses-link': // case 'markdown-witnesses-link':
break; // break;
case 'markdown-proposal-link': // case 'markdown-proposal-link':
break; // break;
case 'markdown-video-link-youtube': // case 'markdown-video-link-youtube':
_handleYoutubePress(tag); // _handleYoutubePress(tag);
break; // break;
case 'markdown-video-link': // case 'markdown-video-link':
break; // break;
case 'image': // case 'image':
setPostImages(images); // setPostImages(images);
setSelectedImage(image); // setSelectedImage(image);
actionImage.current.show(); // actionImage.current.show();
break; // break;
default: // default:
break; // break;
} // }
} catch (error) {} // } catch (error) {}
}; // };
const _handleYoutubePress = (embedUrl) => { const _handleYoutubePress = (embedUrl) => {
const videoId = getYoutubeId(embedUrl); const videoId = getYoutubeId(embedUrl);
@ -135,6 +137,13 @@ const PostBody = ({
} }
}; };
const _handleVideoPress = (embedUrl) => {
if (embedUrl && youtubePlayerRef.current) {
setVideoUrl(embedUrl);
youtubePlayerRef.current.setModalVisible(true);
}
};
const handleImagePress = (ind) => { const handleImagePress = (ind) => {
if (ind === 1) { if (ind === 1) {
//open gallery mode //open gallery mode
@ -329,129 +338,147 @@ const PostBody = ({
} }
}; };
const customStyle = ` // const customStyle = `
* { // * {
color: ${EStyleSheet.value('$primaryBlack')}; // color: ${EStyleSheet.value('$primaryBlack')};
font-family: Roboto, sans-serif; // font-family: Roboto, sans-serif;
max-width: 100%; // max-width: 100%;
line-height: 140%; // line-height: 140%;
overflow-wrap: break-word; // overflow-wrap: break-word;
word-wrap: break-word; // word-wrap: break-word;
-ms-word-break: break-all; // -ms-word-break: break-all;
word-break: break-all; // word-break: break-all;
word-break: break-word; // word-break: break-word;
-ms-hyphens: auto; // -ms-hyphens: auto;
-moz-hyphens: auto; // -moz-hyphens: auto;
-webkit-hyphens: auto; // -webkit-hyphens: auto;
hyphens: auto; // hyphens: auto;
} // }
body { // body {
color: ${EStyleSheet.value('$primaryBlack')}; // color: ${EStyleSheet.value('$primaryBlack')};
font-size: 17; // font-size: 17;
} // }
h1 { // h1 {
font-size: 20; // font-size: 20;
} // }
a { // a {
color: ${EStyleSheet.value('$primaryBlue')}; // color: ${EStyleSheet.value('$primaryBlue')};
cursor: pointer; // cursor: pointer;
margin-right: 5; // margin-right: 5;
} // }
img { // img {
align-self: 'center'; // align-self: 'center';
max-width: 100%; // max-width: 100%;
} // }
center { // center {
text-align: 'center'; // text-align: 'center';
align-items: 'center'; // align-items: 'center';
justify-content: 'center'; // justify-content: 'center';
} // }
table { // table {
table-layout: fixed; // table-layout: fixed;
width: 100%; // width: 100%;
} // }
th { // th {
flex: 1; // flex: 1;
justify-content: 'center'; // justify-content: 'center';
font-weight: 'bold'; // font-weight: 'bold';
color: ${EStyleSheet.value('$primaryBlack')}; // color: ${EStyleSheet.value('$primaryBlack')};
font-size: 14; // font-size: 14;
padding: 5; // padding: 5;
} // }
tr { // tr {
background-color: ${EStyleSheet.value('$darkIconColor')}; // background-color: ${EStyleSheet.value('$darkIconColor')};
flex-direction: 'row'; // flex-direction: 'row';
} // }
td { // td {
border-width: 0.5; // border-width: 0.5;
border-color: ${EStyleSheet.value('$tableBorderColor')}; // border-color: ${EStyleSheet.value('$tableBorderColor')};
flex: 1; // flex: 1;
padding: 10; // padding: 10;
background-color: ${EStyleSheet.value('$tableTrColor')}; // background-color: ${EStyleSheet.value('$tableTrColor')};
} // }
blockquote { // blockquote {
border-left-width: 5; // border-left-width: 5;
border-left-style: solid; // border-left-style: solid;
border-color: ${EStyleSheet.value('$darkIconColor')}; // border-color: ${EStyleSheet.value('$darkIconColor')};
margin-left: 5; // margin-left: 5;
padding-left: 5; // padding-left: 5;
} // }
code { // code {
background-color: ${EStyleSheet.value('$darkIconColor')}; // background-color: ${EStyleSheet.value('$darkIconColor')};
font-family: ${EStyleSheet.value('$editorFont')}; // font-family: ${EStyleSheet.value('$editorFont')};
} // }
center { // center {
text-align: 'center'; // text-align: 'center';
align-items: 'center'; // align-items: 'center';
justify-content: 'center'; // justify-content: 'center';
} // }
.markdown-video-link { // .markdown-video-link {
max-width: 100%; // max-width: 100%;
position: relative; // position: relative;
} // }
.markdown-video-play { // .markdown-video-play {
position: absolute; // position: absolute;
width: 100px; // width: 100px;
height: 100px; // height: 100px;
background: url('data:image/png;base64,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') no-repeat center center; // background: url('data:image/png;base64,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') no-repeat center center;
z-index: 20; // z-index: 20;
opacity: 0.9; // opacity: 0.9;
left: 50%; // left: 50%;
top: 50%; // top: 50%;
margin-top: -100px; // margin-top: -100px;
transform: translateX(-50%) translateY(-50%); // transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%); // -webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%); // -moz-transform: translateX(-50%) translateY(-50%);
} // }
iframe {
width: 100%;
height: 240px;
}
.phishy { // iframe {
display: inline; // width: 100%;
color: red; // height: 240px;
} // }
.text-justify { // .phishy {
text-align: justify; // display: inline;
} // color: red;
// }
.pull-left { // .text-justify {
margin-right: 10px; // text-align: justify;
padding-right: 10px; // }
float: left;
} // .pull-left {
// margin-right: 10px;
// padding-right: 10px;
// float: left;
// }
// .pull-right {
// margin-right: 10px;
// padding-right: 10px;
// float: right;
// }
// `;
const _onElementIsImage = (imgUrl) => {
if (postImages.indexOf(imgUrl) == -1) {
postImages.push(imgUrl);
setPostImages(postImages);
}
};
const _handleSetSelectedLink = (link) => {
setSelectedLink(link);
actionLink.current.show();
};
const _handleSetSelectedImage = (imageLink) => {
setSelectedImage(imageLink);
actionImage.current.show();
};
.pull-right {
margin-right: 10px;
padding-right: 10px;
float: right;
}
`;
return ( return (
<Fragment> <Fragment>
<Modal visible={isImageModalOpen} transparent={true}> <Modal visible={isImageModalOpen} transparent={true}>
@ -471,9 +498,10 @@ const PostBody = ({
indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')} indicatorColor={EStyleSheet.value('$primaryWhiteLightBackground')}
onClose={() => { onClose={() => {
setYoutubeVideoId(null); setYoutubeVideoId(null);
setVideoUrl(null);
}} }}
> >
<VideoPlayerSheet youtubeVideoId={youtubeVideoId} /> <VideoPlayerSheet youtubeVideoId={youtubeVideoId} videoUrl={videoUrl} />
</ActionSheetView> </ActionSheetView>
<OptionsModal <OptionsModal
@ -505,7 +533,7 @@ const PostBody = ({
/> />
{/* {isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)} */} {/* {isLoading && (isComment ? <CommentPlaceHolder /> : <PostPlaceHolder />)} */}
<AutoHeightWebView {/* <AutoHeightWebView
source={{ html }} source={{ html }}
allowsFullscreenVideo={true} allowsFullscreenVideo={true}
style={{ style={{
@ -522,7 +550,22 @@ const PostBody = ({
zoomable={false} zoomable={false}
onLoadEnd={_handleLoadEnd} onLoadEnd={_handleLoadEnd}
mediaPlaybackRequiresUserAction={true} mediaPlaybackRequiresUserAction={true}
/> /> */}
<View>
<PostHtmlRenderer
body={html}
contentWidth={WIDTH - 32}
onLoaded={_handleLoadEnd}
onElementIsImage={_onElementIsImage}
setSelectedImage={_handleSetSelectedImage}
setSelectedLink={_handleSetSelectedLink}
handleOnPostPress={_handleOnPostPress}
handleOnUserPress={_handleOnUserPress}
handleTagPress={_handleTagPress}
handleVideoPress={_handleVideoPress}
handleYoutubePress={_handleYoutubePress}
/>
</View>
</Fragment> </Fragment>
); );
}; };

5
src/components/postHtmlRenderer/postHtmlRenderer.tsx
View File

@ -8,6 +8,7 @@ import VideoThumb from "./videoThumb";
interface PostHtmlRendererProps { interface PostHtmlRendererProps {
contentWidth:number; contentWidth:number;
body:string; body:string;
onLoaded:()=>void;
setSelectedImage:(imgUrl:string)=>void; setSelectedImage:(imgUrl:string)=>void;
setSelectedLink:(url:string)=>void; setSelectedLink:(url:string)=>void;
onElementIsImage:(imgUrl:string)=>void; onElementIsImage:(imgUrl:string)=>void;
@ -21,6 +22,7 @@ interface PostHtmlRendererProps {
export const PostHtmlRenderer = memo(({ export const PostHtmlRenderer = memo(({
contentWidth, contentWidth,
body, body,
onLoaded,
setSelectedImage, setSelectedImage,
setSelectedLink, setSelectedLink,
onElementIsImage, onElementIsImage,
@ -32,7 +34,7 @@ export const PostHtmlRenderer = memo(({
}:PostHtmlRendererProps) => { }:PostHtmlRendererProps) => {
//new renderer functions //new renderer functions
body = body.replace('<center>', '<div class="text-center">').replace('</center>','</div>'); body = body.replace(/<center>/g, '<div class="text-center">').replace(/<\/center>/g,'</div>');
console.log("Comment body:", body); console.log("Comment body:", body);
@ -200,6 +202,7 @@ export const PostHtmlRenderer = memo(({
img:_imageRenderer, img:_imageRenderer,
a:_anchorRenderer, a:_anchorRenderer,
}} }}
onHTMLLoaded={onLoaded && onLoaded}
/> />
) )