i'm using react-jitsi library for rendering jitsi video
var interfaceConfig = {
SHOW_BRAND_WATERMARK: true,
SHOW_WATERMARK_FOR_GUESTS: false,
};
<Jitsi
// doamin="meet.jit.si"
roomName={'12345rfewhgresjttyi'}
displayName={'prakash'}
password={password}
interfaceConfig={interfaceConfig}
/>
i tried to hide jisti watermark in background using interfaceConfig. but interface config doesn't affect any UI.
Also i tried with css:
.leftwatermark {
display: none;
}
This is also not working.
i referred this link for hide watermark
Is there any way to hide the jitsi watermark using reactjs?
SHOW_BRAND_WATERMARK and SHOW_WATERMARK_FOR_GUESTS can not be overwrite by the client and must be in the server config
You must edit the file interface_config.js
sudo nano /usr/share/jitsi-meet/interface_config.js
And switch to
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
then, save your file, and restart your browser page.
Be careful, this file can be reset to default when your upgrade Jitsi on your server. The fix is already asked in the roadmap.
there is no any way of removing the jitsi watermark.
but you can remove the link behind it.
If you need to hide the watermark of the Jitsi meet by using iFrame API, what you have to do is to override these attributes which include in the interface_config.js
SHOW_JITSI_WATERMARK: false,
HIDE_DEEP_LINKING_LOGO: true,
SHOW_BRAND_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false
const options = {
...
configOverwrite: { startWithAudioMuted: true },
interfaceConfigOverwrite: { DISABLE_DOMINANT_SPEAKER_INDICATOR: true },
...
};
const api = new JitsiMeetExternalAPI(domain, options);
you can change the background-image link in css like below
.leftwatermark {
left: 32px;
top: 32px;
background-position: center left;
background-image: url(your-image-url); } // better view
Related
Below is the error on my console
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\css-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\postcss-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\resolve-url-loader\index.js??ruleSet[1].rules[2].oneOf[7].use[3]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\node_modules\next\dist\compiled\sass-loader\cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!C:\Users\J.Andrew\Documents\WebDev\nextjs-boilerplate\styles\globals.scss': No serializer registered for CssSyntaxError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> CssSyntaxError
error - ./styles/globals.scss:1:1
Syntax error: Unknown word
wait - compiling...
error - ./styles/globals.scss:1:1
Syntax error: Unknown word
Here is global.scss mentioned in the error. When I try to removed the tailwind imports, it compiles without a problem. But I needed those in order for tailwind to work.
#import '~tailwindcss/base';
#import '~tailwindcss/components';
#import '~tailwindcss/utilities';
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
* {
box-sizing: border-box;
}
My tailwind.config.js
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
important: true,
theme: {
container: {
center: true,
padding: '1.5rem',
},
extend: {
colors: {
// 'nav-bg': '#383E4C',
},
},
},
variants: {
extend: {},
},
plugins: [require('#tailwindcss/forms')],
}
And my postcss.config.js which is default
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Please help...
Today I had the same problem. My code was working just fine, until I created a React component that had a function that uses querySelector, something like this:
const handleSomething = () => {
const x = 150;
let activeSlide = document.querySelector('.slide');
activeSlide.classList.add(`-translate-x-[${x}]`);
}
It seemed that the -translate-x-[${x}] statement was causing the bug. However, after removing this line, the problem didn't go away. I tried to delete the "node_modules" and ".next" folders and reinstall the dependencies, but nothing seemed to work.
I don't know what caused it, but the only way I could get the application to run again was to go back to the previous commit (with a git reset --hard HEAD - WARNING: be careful with this command because you loose all uncommitted changes, but that was my intention) and delete that component (the file itself). Even a simple copy and paste of the contents of this file, with most of the "weird" lines commented out (this function, basically), would make the error come back. Literally nothing else seemed to work for me.
It probably doesn't answer your question, but I hope it can help someone who is facing the same problem, until no better solution comes up.
As Renato mentioned in his answer, it seems dynamically constructing tailwind class names returns this error.
This is explained in the tailwind docs here:
Dynamic class names
As outlined in Class detection in-depth, Tailwind doesn’t actually run your source code and won’t detect dynamically constructed class names.
❌ Don't construct class names dynamically
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
✔️ Always use complete class names
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>
Also from this documentation about how tailwind detects CSS class names:
The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.
If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS
Therefore to dynamically set a CSS property of an element, using the inline style provided by React.js would be the best way to do it. For example:
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
I had a similar issue that happened when I tried to add a preview of the filed I just choosed.
For that I used the URL object like that :
image.src = URL.createObjectURL(picture)
I just remove this part of my component the error was gone.
I am using GrapesJS in a CMS. By default, added blocks come with component settings defined in this file:
https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js
How do I override the default component settings so they can be applied globally to all components within my custom blocks?
This is how I do it:
grapesEditor.BlockManager.get('image').set({
content: { style: 'color: "black"; max-width: 962px;' },
});
Where grapesEditor is the instance of the editor that you get when initalizing it.
Is there a way to update defaults for built-in components? I have bold text inside element. All bold elements should have default highlighted: false. I tried this config but no success
Editor.DomComponents.addType('text', {
model: {
defaults: {
tagName: 'b',
highlightable: false,
}
}
});
I don't use any storageManager and elements b, i etc. are always highlighted. When I use storageManager local, element are ok and not highlighted.
I need to use inline styles so I used this code:
var BackgroundStyle = Quill.import('attributors/style/background');
var ColorStyle = Quill.import('attributors/style/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(SizeStyle, true);
If I just add this code nothing works. So, I changed the toolbal config:
var config = {
modules: {
toolbar: [
...
[{ 'size': ['10px', false, '18px', '32px'] }], // custom dropdown
]}};
editor = new Quill(editorElem, config);
It starts working but in the dropdown for the size all the values look like "Normal":
So how to change the dropdown too?
Change the styles too. Add this code to make everything work (do the same for other styles):
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before{
content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: 'Huge';
font-size: 32px;
}
This answer was posted as an edit to the question Can't make Quill editor name size options when I use inline styles by the OP mimic under CC BY-SA 3.0.
I would like to know if there is a possibility to show the caption only in fullscreen mode.
I need this for a custom website I an working on and the client requested that the captions only be shown in fulscreen mode.
Use this css rules
.fotorama .fotorama__caption {
display: none;
}
.fotorama--fullscreen .fotorama__caption {
display: block;
}
In ExtJS 4, I am attempting to create a vertically-oriented ButtonGroup with one button to start:
new Ext.ButtonGroup({
columns: 1,
region: "west",
collapsible: false,
defaults: {
scale: "large",
iconAlign: "top"
},
items: [{
text: "Your Books",
iconCls: "icon-books"
} ]
})
The CSS rule just specifies the background image:
.icon-books {
background-image: url(/images/book_open.png) !important;
}
However, the image is flush left, as is illustrated below:
I'm quite the n00b with ExtJS, so I'm sure there's something obvious that I am missing. I would have expected iconAlign: "top" to align the image centered horizontally in addition to flush-top, but that's not what seems to happen. I am seeing the same effects on Firefox 6.0.2 and Chrome 13.0.
What config option or CSS rule am I missing?
Thanks!
UPDATE: here is a sample project demonstrating the issue.
I think there is a problem with the image itself, or some other css class is causing this problem. Ext Js automatically centers the icon when iconAlign : 'top' is set. Here's the what's written in the css:
.x-btn-text-icon .x-btn-icon-small-top .x-btn-text{
background-position: center 0;
background-repeat: no-repeat;
padding-top:18px;
}
When I tried this myself, I had no problems at all.
As you can see, the icon is aligned perfectly. Please check if some other css is interfering with the icon class defined by Ext
For ExtJS 4.0, the following works for me: I have to override the default width of 16px as set by the x-... classes.
In my button I add my own custom class (note the 'star' class simply loads the background image).
iconCls: 'star backcenter'
And then set it to be centered, with the width:auto to override the 16px. Magically it works for me.
.backcenter {
background-position:center !important;
width: auto !important;
}
iconAllign: top from extjs just sets the icon to be above the text, not centered. To make the item centered, you have to deal with the css...
.icon-books {
background-image: url(/images/book_open.png) !important;
background-position:center;
}
I think this should do it ...
I improve this issue by adding a css property (style:{paddingLeft:'10px'}) to button.
text:'<b>Cancel</b>',
name:'btCancel',
iconCls:'btCancel',
width:89,
height:37,
style:{paddingLeft:'10px'}