3668cb62d3
* Add plugin oauth support * Fix types * Switch go to screen by show modal * Add content width metadata to show correctly the sites * Remove unneeded metadata * Fix tsc * Fix lint Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
// See LICENSE.txt for license information.
|
|
import React from 'react';
|
|
import {SafeAreaView} from 'react-native-safe-area-context';
|
|
import {WebView} from 'react-native-webview';
|
|
import {shallowEqual, useSelector} from 'react-redux';
|
|
|
|
import StatusBar from '@components/status_bar';
|
|
import {getTheme} from '@mm-redux/selectors/entities/preferences';
|
|
import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
|
|
|
|
import type {GlobalState} from '@mm-redux/types/store';
|
|
import type {Theme} from '@mm-redux/types/theme';
|
|
|
|
const HEADERS = {
|
|
'X-Mobile-App': 'mattermost',
|
|
};
|
|
|
|
interface PluginProps {
|
|
link: string;
|
|
}
|
|
|
|
function Plugin({link}: PluginProps) {
|
|
const [theme] = useSelector((state: GlobalState) => ([
|
|
getTheme(state),
|
|
]), shallowEqual);
|
|
|
|
const style = getStyleSheet(theme);
|
|
|
|
const renderWebView = () => {
|
|
const userAgent = 'Mozilla/5.0 (Linux; Android 10; Android SDK built for x86 Build/LMY48X) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/81.0.4044.117 Mobile Safari/608.2.11';
|
|
return (
|
|
<WebView
|
|
automaticallyAdjustContentInsets={false}
|
|
cacheEnabled={false}
|
|
javaScriptEnabled={true}
|
|
injectedJavaScript={'const meta = document.createElement(\'meta\'); meta.setAttribute(\'content\', \'width=device-width, initial-scale=1\'); meta.setAttribute(\'name\', \'viewport\'); document.getElementsByTagName(\'head\')[0].appendChild(meta); '}
|
|
onShouldStartLoadWithRequest={() => true}
|
|
source={{uri: link, headers: HEADERS}}
|
|
startInLoadingState={true}
|
|
userAgent={userAgent}
|
|
useSharedProcessPool={false}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView
|
|
style={style.container}
|
|
testID='plugin.webview'
|
|
>
|
|
<StatusBar/>
|
|
{renderWebView()}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
export default Plugin;
|
|
|
|
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
|
|
return {
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
errorContainer: {
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
marginTop: 40,
|
|
},
|
|
errorText: {
|
|
color: changeOpacity(theme.centerChannelColor, 0.4),
|
|
fontSize: 16,
|
|
fontWeight: '400',
|
|
lineHeight: 23,
|
|
paddingHorizontal: 30,
|
|
},
|
|
};
|
|
});
|
|
|