I have integrated Jetsi directly in my React app using the API (Without a self-hosted server).
I have been trying to find a way to change the default avatar when the user camera is off.
According to the documentation, I can override this parameter:
gravatar: {
baseUrl: 'https://www.gravatar.com/avatar/',
disabled: false
}
baseUrl 🚫 - Base URL for a Gravatar-compatible service. Defaults to
Gravatar. disabled - True if Gravatar should be disabled.
I tried overriding it in both configOverwrite and interfaceConfigOverwrite:
<Jutsu
roomName={room_name}
configOverwrite={{
gravatar: {
baseUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg",
disabled: false,
},
}}
interfaceConfigOverwrite={{
gravatar: {
baseUrl:
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg",
disabled: false,
},
}}
/>
But, it had no effect.
I don't even understand what they mean by
Gravatar-compatible service
Can't I just use an image url?
According to a note at the beginning of the docs, the gravatar.baseUrl option can't be overwritten
NOTE
Options marked with 🚫 are not overwritable through configOverwrite
You'll need to set it in the config.js file of your jitsi installation.
And the baseUrl should be a service that works the same as gravatar: receiving a hashed email and returning an image; no other option is supported. You can check how the URL is built here https://github.com/jitsi/js-utils/blob/master/avatar/index.js#L10
You could use an out of the box alternative as https://wiki.libravatar.org/ or build your own https://cloudinary.com/blog/how_to_build_an_enhanced_gravatar_service_part_1
Related
Im trying to add logo of coloplast in my project URL(https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png).
**And i always got this error **
Server Error
Error: Invalid src prop (https://www.coloplast.com/Global/1_Corporate_website/Press/Pics/CPlogo_Gray_RGB_300.png) on next/image, hostname "www.coloplast.com" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
I tryed diferents website such as google images, and stil doesn't work...
protocol: 'https',
hostname: 'www.coloplast.com',
port: '',
pathname: '/account123/**',
images: {
domains: ["www.coloplast.com"] and ["coloplast.com"]
}
And after each method i restarted my project from console.
Based on NextJS official docs about next/image remote pattern, "To protect your application from malicious users, configuration is required in order to use external images. This ensures that only external images from your account can be served from the Next.js Image Optimization API."
So in your case, you have to add this code between curly braces of your nextConfig variable in next.config.js file:
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'www.coloplast.com',
},
],
},
After checking the documentation it says that .env or [..nextAuth.js] file you should set a secret property in the configuration.
Error documentation to nextAuth
.env
NEXTAUTH_URL = "http://localhost:3000"
NEXTAUTH_SECRET_KEY="test"
[...nextAuth.js]
secret: "test",
jwt: {
secret: "test",
encryption: true,
maxAge: 5 * 60,
},
pages: {
signIn: "/auth/login",
},
However, this is a requirement only if you are in production, but I am not.
How to fix this error and set it on development, not in production?
Yeah the new environment variable is called simply NEXTAUTH_SECRET.
Also when this is set, you can avoid setting the secret and jwt.secret values separately in the configuration.
I have a simple project that supposed to work with English and Dutch(default). I have copied everything from the original example but somehow it doesn't work as expected.
Even though I have browserLanguageDetection: false, it is forcing me to /enendpoint.
I would like to show the NL text on / but currently I couldn't.
Could you please check the sandbox and tell me what is wrong here?
https://codesandbox.io/s/pensive-galileo-zifjm?file=/pages/index.js
There is solution in the docs. Here it is: https://nextjs.org/docs/advanced-features/i18n-routing
As I found out from the docs you should declare localeDetection: false then you should declare your own domain paths. It will work.
i18n: {
defaultLocale: 'en',
locales: ['en'],
localeDetection: false, // Important!
domains: [
{
domain: 'example.com', // <-
defaultLocale: 'en' // This locale will be appeared at the exact above domain.
},
{
// 2nd locale goes here in the same way.
}
]
}
I hope, it helps.
It is important to know that in Next.js, the first loading is always done on the server side. In i18n.js you have defined browserLanguageDetection: false but you have not defined serverLanguageDetection: false that's why you are always redirected to /en
In the index page, replace this line export default withTranslation('common')(IndexPage); with this one export default withTranslation(['common'])(IndexPage); to avoid this warning
I am using the Image component from Next.js (it's a new feature of Next.js). I've tried to give the source URL:
{`${API}/user/photo/${blog.postedBy.username}`}
But it shows me this error. I also make changes in my next.config.js as
module.exports = {
images: {
domains: ['localhost'],
},
}
but nothing works for me. Please help if you know anything about this.
const src = `${API}/user/photo/${blog.postedBy.username}`;
<Image loader={() => src} src={src} width={500} height={500}/>
Here, loader is a function that generates the URLs for your image. It appends a root domain to your provided src, and generates multiple URLs to request the image at different sizes. These multiple URLs are used in the automatic srcset generation, so that visitors to your site will be served an image that is the right size for their viewport.
Edit next.config.js :
module.exports = {
reactStrictMode: true,
images: {
domains: ['example.com'],
},
}
Yes, I finally got the answer. Make loader function to load it from the destination of the image.
const myLoader=({src})=>{
return `${API}/user/photo/${blog.postedBy.username}`;
}
Use this loader function the loader attribute of an Image tag.
<Image loader={myLoader} src={`${API}/user/photo/${blog.postedBy.username}`} width={500}
height={500}/>
This works for me perfectly
I had the same issue, You need to restart your dev server, you need to do that each time you make changes on your next.config.js file.
The API string should include the port. e.g. localhost:3001
There are a whole bunch of out-of-date answers here that suggest setting the domains key in next.config.js. As of Next 12.3.0 this is no longer correct; see: https://nextjs.org/docs/messages/next-image-unconfigured-host
Instead, one should use a remotePatterns property, which is a little more complicated than the old domains:
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'example.com',
port: '',
pathname: '/account123/**',
},
],
},
}
Inside next.config.js file.
Add Image src domain name:
const nextConfig = {
reactStrictMode: true,
images : {
domains : ['sangw.in', 'localhost', 'picsum.photos'] // <== Domain name
}
}
module.exports = nextConfig
Adding 'localhost' in the domains array will fix the issue,
Unfortunately nextJS didn't refresh the server automatically after configuration file(next.config.js) change.
You have to restart the server manually to reflect the changes.
You can also try by set reactStrictMode value reactStrictMode: true,
here is the full export object
module.exports = {
reactStrictMode: true,
images: {
domains: [
"localhost",
process.env.WORDPRESS_API_URL.match(/(http(?:s)?:\/\/)(.*)/)[2], // Valid WP Image domain.
"2.gravatar.com",
"0.gravatar.com",
"secure.gravatar.com",
],
},
};
First of all add and restart the dev server.
domains: ['localhost']
And be sure to return the image link with http(s) protocole
image link with localhost:port/... is wrong , return as http://localhost/... ( or with https )
I've faced the same issue, and my domains were correct. Deleting .next and node_modules folders, and running yarn/npm install fixed the issue.
For me, in next.config.js,
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: [ "abc.def.org", ]
},
}
module.exports = nextConfig
and then in my Image tag
<Image
unoptimized // for image caching, else error
src={profile.picture}
alt={profile.picture || "IMG"}
width={60}
height={60}
/>
I added two npm "#lhci/cli" and puppeteer.After that I added two config file
lighthouserc.js : config details are:
module.exports = {
ci: {
upload: {
target: 'temporary-public-storage'
},
collect: {
puppeteerScript: 'puppeteer-script.js',
chromePath: puppeteer.executablePath(),
url: ["https://myWebsite.com/abc"],
headful: true,
numberOfRuns: 1,
disableStorageReset: true,
setting: {
disableStorageReset: true
},
puppeteerLaunchOptions: {
slowMo: 20,
headless: false,
disableStorageReset: true
}
},
assert: {
assertions: {
'categories:performance': ['warn', { minScore: 1 }],
'categories:accessibility': ['error', { minScore: 0.5 }]
}
}
}
};
puppeteer-script.js
module.exports = async (browser, context) => {
await page.setDefaultNavigationTimeout(90000);
await page.goto(context.url);
await page.type('input[type=text]', 'abc');
await page.type('input[type=email]', 'abc#abc.com');
await page.type('input[type=password]', 'abc#100');
await page.click('[type="button"]');
await page.waitForNavigation({ waitUntil: "networkidle2" })
await page.close();
};
and in package.json I added script command as :
"test:lighthouse": "lhci autorun --collect.settings.chromeFlags='--no-sandbox'"
Now Login is working fine but I want to run the lighthouse for the url that I specified in lighthouserc.js (https://myWebsite.com/abc).
But after login it is trying to access the url and again login screen is coming and the lighthouse is measuring performance for the login page.
Is it possible to run lighthouse on url I specified in the config.Please assist me.
https://myWebsite.com/abc is my reactjs application
I do not have complete information on the workflow of your site but as mentioned in the configuration guide puppeteer script is run for each url mentioned in the lhci config file.
And after puppeteer script is ran, lighthouse will open URL. Now if your site is opening login page again, that its an issue with your app or configuration most likely. Either your app is not setting cookie correctly or login process is failing somehow, you will need to check that.
Also, as puppeteer script will be running for every url in the config, its good idea to not re-login if you already logged in once, check out this issue on Github.