I'm using videojs to render youtube videos.
But I can't remove the video title, share button or youtube logo.
My videojs config:
React.useEffect(() => {
if (videoNode.current) {
const playerInstance = videojs(videoNode.current, {
...initialOptions,
...options,
BlockYoutubeButton: false,
});
setPlayer(playerInstance);
}
}, [videoNode?.current, options]);
Options:
const videoJsOptions = {
...optionsPlayer,
playing: true,
sources: [
{
type: "video/youtube",
src: optionsPlayer.urlVideoTY
? optionsPlayer.urlVideoTY
: "https://www.youtube.com/watch?v=hzqmRq56X8o",
},
],
techOrder: ["youtube"],
};
can someone help me to remove the buttons?
Thank you very much
I've already tried adding the css to override the class and adding diplay:none, but I can't access the iframe either.
I already tried to add the parameter: controls: false and controlBar: false in the videojs options, but it didn't work either
Related
I am trying to implement the Advanced chart widget of TradingView in my web application, that is created in React/Javascript, using primereact. I have tried several options before, and the only thing that worked so far was by importing the TradingViewEmbed from "react-tradingview-embed". Unfortunately it only worked with the old version "1.0.2", that has the old advertisement bar in it and also the banner below.
In order to remove those and implement it the way TradingView states I have done the below:
import React, { useEffect } from "react";
import './market-data.css';
const MarketData = () => {
const useScript = url => {
useEffect(() => {
const script = document.createElement('script');
script.src = url;
script.async = true;
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
}
}, [url]);
};
return (
<div className="tradingview-widget-container">
{useScript('https://s3.tradingview.com/tv.js')}
<div id="tradingview_dc023"></div>
<div className="tradingview-widget-copyright"></div>
<script type="text/javascript" nonce>
{
new window.TradingView.widget(
{
autosize: true,
symbol: "FX_IDC:EURUSD",
timezone: "Europe/Amsterdam",
theme: "dark",
style: "2",
enable_publishing: false,
hide_top_toolbar: false,
hide_legend: false,
withdateranges: true,
range: "1D",
hide_side_toolbar: true,
allow_symbol_change: true,
save_image: false,
watchlist: [
"FX_IDC:EURUSD",
"FX_IDC:EURGBP",
"FX_IDC:EURJPY"
],
details: true,
hotlist: false,
calendar: true,
studies: [],
height: "100%",
width: "100%",
container_id: "tradingview_dc023"
})
}
</script>
</div>
)
}
export default MarketData;
Looking at the inspect of the web application it looks fine to me, but the chart/widget is just not showing.
tv.js is loaded:
tv.js
script is loaded and shows the way TradingView states on its website:
script
Could anybody please help and direct me in the right way of fixing this?
I am testing a react web app where I can display reports from Power BI. I am using powerbi-client-react to embed the reports. However, I face an issue when I load the component with an expired token, I get this error: Content not available screenshot.
So whenever that happens, I catch it with the error event handler, get a new token and update the powerbi report accessToken. However, it doesn't seem to reload/refresh the embed when I set the new accessToken in react. It only displays the screenshot above.
Error log screenshot.
Is there a way to force refresh the embed component with the new access token? or is my approach not correct? Any mistakes pointer would be appreciated.
import React from 'react';
import {models} from 'powerbi-client';
import {PowerBIEmbed} from 'powerbi-client-react';
// Bootstrap config
let embedConfigTest = {
type: 'report', // Supported types: report, dashboard, tile, visual and qna
id: reportId,
embedUrl: powerBIEmbedURL,
accessToken: null,
tokenType: models.TokenType.Embed,
pageView: 'fitToWidth',
settings: {
panes: {
filters: {
expanded: false,
visible: false,
},
},
background: models.BackgroundType.Transparent,
},
};
const PowerBiReport = ({graphName, ...props}) => {
let [embedToken, setEmbedToken] = React.useState();
let [embedConfig, setEmbedConfig] = React.useState(embedConfigTest);
React.useEffect(
() => {
setEmbedToken(EXPIRED_TOKEN);
setEmbedConfig({
...embedConfig,
accessToken: EXPIRED_TOKEN, // Initiate with known expired token
});
},
[graphName]
);
const changeSettings = (newToken) => {
setEmbedConfig({
...embedConfig,
accessToken: newToken,
});
};
// Map of event handlers to be applied to the embedding report
const eventHandlersMap = new Map([
[
'loaded',
function() {
console.log('Report has loaded');
},
],
[
'rendered',
function() {
console.log('Report has rendered');
},
],
[
'error',
async function(event, embed) {
if (event) {
console.error(event.detail);
console.log(embed);
// Simulate getting a new token and update
setEmbedToken(NEW_TOKEN);
changeSettings(NEW_TOKEN);
}
},
],
]);
return (
<PowerBIEmbed
embedConfig={embedConfig}
eventHandlers={eventHandlersMap}
cssClassName={'report-style-class'}
/>
);
};
export default PowerBiReport;
Thanks #vtCode. Here is a sample but the refresh can only happen in 15 secs interval.
import { PowerBIEmbed } from "powerbi-client-react";
export default function PowerBiContainer({ embeddedToken }) {
const [report, setReport] = useState(null);
useEffect(() => {
if (report == null) return;
report.refresh();
}, [report, embeddedToken]);
return (
<PowerBIEmbed
embedConfig={{ ...embedConfig, accessToken: embeddedToken }}
getEmbeddedComponent={(embeddedReport) => setReport(embeddedReport)};
/>
);
}
Alternatively, you can add the React "key" attribute which remounts the component when embededToken changes
<PowerBIEmbed key={embeddedToken}
embedConfig={{ ...embedConfig, accessToken: embeddedToken }}
/>
I ended up solving this issue, although not so beautiful.
I checked the powerbi-client wiki as it has dependency on it and found out that you could use embed.reload() in the embed object I get from the error function.
For some reason (I could not find out why), the error handler gets triggered twice, so to avoid refreshing the token twice, I had to create a dialog notifying the user that the token had expired and whenever that dialog is closed, I reload the powerbi report.
Exact wiki reference:
Overriding Error Experience
Reload a report
Update embed token
I'm using Gatsby w/ Chakra UI and have an issue with either local storage or how the ColorMode is being accessed.
Here's my repo: https://github.com/RyanPinPB/pdm-gatsby
Live site: https://pearsondigitalmarketing.com
ColorMode and components are styled correctly on localhost, but in production the site has an issue when it renders the header after local storage has saved darkMode=true.
You can reproduce this issue by going to the live site, toggling dark mode, and refreshing. Or, if your browser has theme settings or depending on your OS (or time of day), it will show the issue at night, or if your browser/OS prefers dark mode.
What is weird, is that certain components receive the correct darkMode styling (colorings and background), but my logo, menu, and header background are not correct. Even tho all 3 of these are using colorMode styling conditionals as follows:
const bgColor = {
light: "rgba(255,255,255,.6)",
dark: "rgba(26, 32, 44, .6)",
}
const color = { light: "brand.400", dark: "brand.900" }
bg={bgColor[colorMode]}
color={color[colorMode]}
I added a console log to both index and header files to see if one of them is rendering before the colorMode is triggered/called from local storage, but both console logs print the correct colorMode state. I'm having a hard time figuring out why my header in darkmode has the wrong background color and color styling.
The issue is correct after any click of the "toggle button" in the header. It's just on the initial rendering of the page, if the page thinks it needs to be in DarkMode.
Any help is greatly appreciated.
ThemeContext.js:
import React from "react"
import { ColorModeProvider } from "#chakra-ui/core"
//dont have to use this file if we use Chakra UI
const defaultState = {
dark: false,
toggleDark: () => {},
}
const ThemeContext = React.createContext(defaultState)
// Getting dark mode information from OS!
// You need macOS Mojave + Safari Technology Preview Release 68 to test this currently.
const supportsDarkMode = () =>
window.matchMedia("(prefers-color-scheme: dark)").matches === true
class ThemeProvider extends React.Component {
state = {
dark: false,
}
toggleDark = () => {
console.log("ThemeContext.js: toggle dark/light mode")
let dark = !this.state.dark
localStorage.setItem("dark", JSON.stringify(dark))
this.setState({ dark })
}
componentDidMount() {
// Getting dark mode value from localStorage!
console.log("ThemeContext.js component did mount, dark: " + this.state.dark)
const lsDark = JSON.parse(localStorage.getItem("dark"))
if (lsDark) {
console.log("ThemeContext.js: lsDark: " + lsDark)
this.setState({ dark: lsDark })
} else if (supportsDarkMode()) {
console.log("ThemeContext.js: supports Dark Mode: true")
this.setState({ dark: true })
}
}
render() {
const { children } = this.props
const { dark } = this.state
return (
<ThemeContext.Provider
value={{
dark,
toggleDark: this.toggleDark,
}}
>
<ColorModeProvider>{children}</ColorModeProvider>
</ThemeContext.Provider>
)
}
}
export default ThemeContext
export { ThemeProvider }
Kindly help me with the Victory Native Config or for the below requirement:
The tooltip for Victory Pie should be active and remain active even after press out for the sector pressed. Also, all other tooltips for various pie sectors should close, only the one pressed recently should be active.
If this cannot be handled by Victory-Native out of the box, please guide me on how to do it otherwise.
This pretty much works for the requirement:
Note eventKey='all' in onPressIn to first to deactivate all the tooltips (label component should be tooltip) and then activate the required tooltip in onPressOut
<VictoryPie
...
labelComponent = {<VictoryToolTip/>}
events={[
{
target: 'data',
eventHandlers: {
onPressIn: ({nativeEvent}) => {
return [
{
// Add an event to reset all the points to the original color
target: 'labels',
eventKey: 'all',
mutation: () => ({active: false}),
},
];
},
onPressOut: ({nativeEvent}) => {
return [
{
target: 'labels',
mutation: () => ({active: true}),
}
];
},
},
},
]}
/>
Using electrode, I noticed this weird behaviour -
When I view the page source after the page fully loads with all the api calls and data, I am only able to view the content that is static for example, the hyper links, headings, footer links etc.
I have created a custom token handler which checks the context object and populates the custom tokens present in the index.html.
So, whenever, I console.log(context.user.content), only the data that is static such as hyperlinks, headings, footer links are logged.
I guess this is the problem but I am not able to wrap my head around as to why electrode doesn't recognise the content being rendered dynamically.
Token-Handler.js file
import Helmet from 'react-helmet';
const emptyTitleRegex = /<title[^>]*><\/title>/;
module.exports = function setup(options) {
// console.log({ options });
return {
INITIALIZE: context => {
context.user.helmet = Helmet.renderStatic();
},
PAGE_TITLE: context => {
const helmet = context.user.helmet;
const helmetTitleScript = helmet.title.toString();
const helmetTitleEmpty = helmetTitleScript.match(emptyTitleRegex);
return helmetTitleEmpty ? `<title>${options.routeOptions.pageTitle}</title>` : helmetTitleScript;
},
REACT_HELMET_SCRIPTS: context => {
const scriptsFromHelmet = ["link", "style", "script", "noscript"]
.map(tagName => context.user.helmet[tagName].toString())
.join("");
return `<!--scripts from helmet-->${scriptsFromHelmet}`;
},
META_TAGS: context => {
console.log(context,'123') //this is where I am checking
return context.user.helmet.meta.toString();
}
};
};
default.js
module.exports = {
port: portFromEnv() || "3000",
webapp: {
module: "electrode-react-webapp/lib/express",
options: {
prodBundleBase: '/buy-used-car/js/',
insertTokenIds: false,
htmlFile: "./{{env.APP_SRC_DIR}}/client/index.html",
paths: {
"*": {
content: {
module: "./{{env.APP_SRC_DIR}}/server/views/index-view"
},
}
},
serverSideRendering: true,
tokenHandler: "./{{env.APP_SRC_DIR}}/server/token-handler"
}
}
};
Any clue anyone?
EDIT 1
However, any following updates that occur on the meta tags are rendered. I'm not sure that is something electrode allows or is a feature of react-helmet.
EDIT 2
SSR is enabled in electrode.
After digging in the docs, realised that there was a slight misunderstanding. So, if data needs to be present in the page source, it needs to be pre-rendered by the server.
Why it wasn't showing at the time I asked the question? Because, data was being evaluated at run-time due ot which the page source only rendered the static content.
Electrode already provides an abstraction, each component that is being rendered has an option to load with pre-fetched data. The catch here is, you have to evaluate what all data needs to be present at runtime because more data is directly proportional to page loading time (as the server won't resolve unless the api you are depending on returns you with either a success or failure )
In terms of implementation, each route has a parameter called init-top which is executed before your page loads.
const routes = [
{
path: "/",
component: withRouter(Root),
init: "./init-top",
routes: [
{
path: "/",
exact: true,
component: Home,
init: "./init-home"
},
in init-home, you can define it something on the lines of -
import reducer from "../../client/reducers";
const initNumber = async () => {
const value = await new Promise(resolve => setTimeout(() => resolve(123), 2000));
return { value };
};
export default async function initTop() {
return {
reducer,
initialState: {
checkBox: { checked: false },
number: await initNumber(),
username: { value: "" },
textarea: { value: "" },
selectedOption: { value: "0-13" }
}
};
}
So,now whenever you load the component, it is loaded with this initialState returned in init-home
I'll just post it here, in case anyone is stuck.