ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-22 21:01:31 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

using modal style video playback mechanism for android

Browse Source
This commit is contained in:
noumantahir 2022-02-03 15:45:18 +05:00
parent 48518bb90c
commit 53ef45e0d6
3 changed files with 35 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -128,7 +128,7 @@
"react-native-vector-icons": "^6.6.0",
"react-native-version": "^4.0.0",
"react-native-version-number": "^0.3.5",
"react-native-webview": "^11.2.1",
"react-native-webview": "^11.17.1",
"react-native-youtube-iframe": "^2.1.1",
"react-navigation": "^4.0.10",
"react-navigation-drawer": "^2.3.3",

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

@ -7,6 +7,7 @@ import { AutoHeightImage } from '../autoHeightImage/autoHeightImage';
import { useHtmlIframeProps, iframeModel } from '@native-html/iframe-plugin';
import WebView from 'react-native-webview';
import { VideoPlayer } from '..';
import { Platform } from 'react-native';
interface PostHtmlRendererProps {
contentWidth: number;
@ -136,7 +137,10 @@ export const PostHtmlRenderer = memo(
//process video link
if(tnode.classes?.indexOf('markdown-video-link') >= 0){
if(isComment){
//TODO: remove android check when fix for react-native-weview scroll crash is available
//ref: https://github.com/react-native-webview/react-native-webview/issues/2364
if(isComment || Platform.OS === 'android'){
const imgElement = tnode.children.find((child) => {
return child.classes.indexOf('video-thumbnail') > 0 ? true : false;
});
@ -225,17 +229,30 @@ export const PostHtmlRenderer = memo(
const checkSrcRegex = /(.*?)\.(mp4|webm|ogg)$/gi;
const isVideoFormat = iframeProps.source.uri.match(checkSrcRegex);
//this hack help avoid autoplaying fullscreened iframe videos;
const src = isVideoFormat ?
{
html: `
<video width="100%" height="auto" controls>
<source src="${iframeProps.source.uri}" type="video/mp4">
</video>`,
}:{
uri: iframeProps.source.uri,
};
//this hack help avoid autoplaying fullscreened iframe videos;
const src = isVideoFormat ?
{
html: `
<video width="100%" height="auto" controls>
<source src="${iframeProps.source.uri}" type="video/mp4">
</video>`,
}:{
uri: iframeProps.source.uri,
};
//TODO: remove android check logic when fix for react-native-webiew scrollview crash is available
//ref: https://github.com/react-native-webview/react-native-webview/issues/2364
if(isComment || Platform.OS === 'android'){
const _onPress = () => {
console.log('iframe thumb Pressed:', iframeProps);
if (handleVideoPress) {
handleVideoPress(iframeProps.source.uri);
}
};
return (
<VideoThumb contentWidth={contentWidth} onPress={_onPress} />
)
}else{
return (
<VideoPlayer
mode='source'
@ -243,6 +260,8 @@ export const PostHtmlRenderer = memo(
contentWidth={contentWidth}
/>
);
}
};
return (

8
yarn.lock
View File

@ -8856,10 +8856,10 @@ react-native-version@^4.0.0:
resolve-from "^5.0.0"
semver "^7.0.0"
react-native-webview@^11.2.1:
version "11.2.3"
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.2.3.tgz#1b82685ab60645d4161f2e25e98286493cdffa5d"
integrity sha512-r/K+Lf/O5aij72gRndMX2qsyQ/WLtDPiO75SS57y6JjqSKxedGASVL9Jwl1TM7fCXqUq8dgiwik/LuBHbJXAEg==
react-native-webview@^11.17.1:
version "11.17.1"
resolved "https://registry.yarnpkg.com/react-native-webview/-/react-native-webview-11.17.1.tgz#a7c9d995d749539995a4fdad8aa6456bac77fc8f"
integrity sha512-gGdBavATj8Mya2VYZtWtB9cgOAgVJJGlgL5mo/EO8quBeI5L3IBy2ZQolsCyRRGFTUPCc3Ah0OwJal0PjijGqw==
dependencies:
escape-string-regexp "2.0.0"
invariant "2.2.4"