@@ -238,9 +250,9 @@ const ImageWatermark = ({
};
export default inject(({ createEditRoomStore }) => {
- const { setWatermarks, watermarksSettings } = createEditRoomStore;
+ const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
return {
setWatermarks,
- watermarksSettings,
+ initialWatermarksSettings,
};
})(observer(ImageWatermark));
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
index 253f30dc6e..0c092b4a58 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/ViewerInfo.js
@@ -100,7 +100,7 @@ const rotateOptions = (t) => [
const getInitialRotate = (rotate, isEdit, t) => {
const dataRotate = rotateOptions(t);
- if (!isEdit || rotate === undefined) return dataRotate[0];
+ if (!isEdit) return dataRotate[0];
const item = dataRotate.find((item) => {
return item.key === rotate;
@@ -113,7 +113,8 @@ const ViewerInfoWatermark = ({
isEdit,
setWatermarks,
- watermarksSettings,
+
+ initialWatermarksSettings,
}) => {
const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
@@ -124,10 +125,9 @@ const ViewerInfoWatermark = ({
initialInfo.current = {
dataRotate: rotateOptions(t),
dataTabs: tabsOptions(t),
- rotate: getInitialRotate(watermarksSettings?.rotate, isEdit, t),
- tabs: getInitialTabs(watermarksSettings?.additions, isEdit, t),
- text: getInitialText(watermarksSettings?.text, isEdit),
- additions: watermarksSettings?.additions || WatermarkAdditions.UserName,
+ tabs: getInitialTabs(initialWatermarksSettings?.additions, isEdit, t),
+ rotate: getInitialRotate(initialWatermarksSettings?.rotate, isEdit, t),
+ text: getInitialText(initialWatermarksSettings?.text, isEdit),
};
elements.current = getInitialState(initialInfo.current.tabs);
@@ -136,15 +136,20 @@ const ViewerInfoWatermark = ({
const initialInfoRef = initialInfo.current;
useEffect(() => {
- if (!isEdit)
- setWatermarks(
- {
- rotate: initialInfoRef.rotate.key,
- text: initialInfoRef.text,
- additions: initialInfoRef.additions,
- },
- true,
- );
+ setWatermarks(
+ {
+ rotate: initialInfoRef.rotate.key,
+ text: initialInfoRef.text,
+ additions:
+ initialWatermarksSettings?.additions || WatermarkAdditions.UserName,
+ isImage: false,
+ enabled: true,
+ imageWidth: 0,
+ imageHeight: 0,
+ imageScale: 0,
+ },
+ true,
+ );
}, []);
const [selectedPosition, setSelectedPosition] = useState(
@@ -167,7 +172,7 @@ const ViewerInfoWatermark = ({
flagsCount += WatermarkAdditions[key];
}
}
- setWatermarks({ additions: flagsCount });
+ setWatermarks({ additions: flagsCount });
};
const onPositionChange = (item) => {
@@ -221,9 +226,10 @@ const ViewerInfoWatermark = ({
};
export default inject(({ createEditRoomStore }) => {
- const { setWatermarks, watermarksSettings } = createEditRoomStore;
+ const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
return {
setWatermarks,
- watermarksSettings,
+
+ initialWatermarksSettings,
};
})(observer(ViewerInfoWatermark));
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/WatermarkBlock.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/WatermarkBlock.js
index 7aee4d84db..94ee81fa73 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/WatermarkBlock.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/WatermarkBlock.js
@@ -60,21 +60,26 @@ const WatermarkBlock = ({
setWatermarks,
isEdit = false,
isWatermarks = false,
+ initialWatermarksSettings,
t,
}) => {
useEffect(() => {
- console.log("!!!!watermarksChecked", watermarksChecked);
- if (!isEdit) setWatermarks({ enabled: watermarksChecked }, true);
+ setWatermarks(
+ isEdit ? initialWatermarksSettings : { enabled: watermarksChecked },
+ true,
+ );
}, []);
const [watermarksChecked, setWatermarksChecked] = useState(
isWatermarks && isEdit,
);
+
const onChangeAddWatermarksToDocuments = () => {
setWatermarksChecked(!watermarksChecked);
setWatermarks({ enabled: !watermarksChecked });
};
+
return (
{
- const { setWatermarks, watermarksSettings } = createEditRoomStore;
+ const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
return {
setWatermarks,
-
- isWatermarks: watermarksSettings?.enabled,
+ isWatermarks: initialWatermarksSettings?.enabled,
+ initialWatermarksSettings,
};
})(observer(WatermarkBlock));
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
index 6bd30c4046..ed5dcd7691 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/Watermarks/index.js
@@ -55,26 +55,21 @@ const getOptionType = (additions, isEdit) => {
return viewerInfoWatermark;
};
-const Watermarks = ({
- isEdit,
- watermarksSettings,
- isImageType,
- setIsImageWatermarkType,
-}) => {
+const Watermarks = ({ isEdit, setWatermarks, initialWatermarksSettings }) => {
const { t } = useTranslation(["CreateEditRoomDialog", "Common"]);
const [type, setType] = useState(
- getOptionType(watermarksSettings?.additions, isEdit),
+ getOptionType(initialWatermarksSettings?.additions, isEdit),
);
useEffect(() => {
- setIsImageWatermarkType(type === imageWatermark, true);
+ !isEdit && setWatermarks({ isImage: type === imageWatermark });
}, []);
const onSelectType = (e) => {
const { value } = e.target;
setType(value);
- setIsImageWatermarkType(value === imageWatermark);
+ setWatermarks({ isImage: type === imageWatermark });
};
const typeOptions = options(t);
@@ -91,7 +86,7 @@ const Watermarks = ({
onClick={onSelectType}
/>
- {isImageType ? (
+ {type === imageWatermark ? (
) : (
@@ -101,11 +96,9 @@ const Watermarks = ({
};
export default inject(({ createEditRoomStore }) => {
- const { watermarksSettings, setIsImageWatermarkType, isImageType } =
- createEditRoomStore;
+ const { setWatermarks, initialWatermarksSettings } = createEditRoomStore;
return {
- watermarksSettings,
- isImageType,
- setIsImageWatermarkType,
+ setWatermarks,
+ initialWatermarksSettings,
};
})(observer(Watermarks));
diff --git a/packages/client/src/store/CreateEditRoomStore.js b/packages/client/src/store/CreateEditRoomStore.js
index d96632946f..c72fbe0275 100644
--- a/packages/client/src/store/CreateEditRoomStore.js
+++ b/packages/client/src/store/CreateEditRoomStore.js
@@ -96,9 +96,21 @@ class CreateEditRoomStore {
this.onClose = onClose;
};
- setWatermarks = (watermarksSettings, isInit = false) => {
- if (isInit) {
- this.initialWatermarksSettings = watermarksSettings;
+ setInitialWatermarks = (watermarksSettings) => {
+ if (!watermarksSettings) {
+ this.initialWatermarksSettings = { enabled: false };
+
+ return;
+ }
+
+ this.initialWatermarksSettings = watermarksSettings;
+ this.initialWatermarksSettings.isImage = !!watermarksSettings.imageUrl;
+ };
+
+ setWatermarks = (watermarksSettings, isReplacing) => {
+ if (isReplacing) {
+ this.watermarksSettings = watermarksSettings;
+ return;
}
this.watermarksSettings = {
@@ -107,57 +119,62 @@ class CreateEditRoomStore {
};
};
- setIsImageWatermarkType = (isImageType, isInit) => {
- if (isInit) {
- this.initialIsImageType = isImageType;
- }
-
- this.isImageType = isImageType;
- };
-
isEqualWatermarkChanges = () => {
- if (this.isImageType !== this.initialIsImageType) return false;
-
return isEqual(this.watermarksSettings, this.initialWatermarksSettings);
};
isNotWatermarkSet = () => {
- if (this.isImageType && !this.watermarksSettings.image) return true;
+ if (this.watermarksSettings.isImage && !this.watermarksSettings.image)
+ return true;
- if (!this.isImageType && this.watermarksSettings.additions === 0)
+ if (
+ !this.watermarksSettings.isImage &&
+ this.watermarksSettings.additions === 0
+ )
return true;
return false;
};
+
getWatermarkRequest = async (room) => {
if (!this.watermarksSettings.image) {
- return setWatermarkSettings(room.id, this.watermarksSettings);
+ return setWatermarkSettings(room.id, {
+ enabled: this.watermarksSettings.enabled,
+ rotate: this.watermarksSettings.rotate,
+ text: this.watermarksSettings.text,
+ additions: this.watermarksSettings.additions,
+ });
}
- const { uploadRoomLogo } = this.filesStore;
+ const getMeta = (url, onSetInfo) => {
+ const img = new Image();
- const watermarkImage = this.watermarksSettings.image;
- const uploadWatermarkData = new FormData();
- uploadWatermarkData.append(0, watermarkImage);
+ img.onload = () => onSetInfo(null, img);
+ img.onerror = (err) => onSetInfo(err);
+ img.src = url;
+ };
- const response = await uploadRoomLogo(uploadWatermarkData);
+ //TODO: Return the decision when it will be possible to upload images.
+ //const { uploadRoomLogo } = this.filesStore;
+ // const watermarkImage = this.watermarksSettings.image;
+ // const uploadWatermarkData = new FormData();
+ // uploadWatermarkData.append(0, watermarkImage);
+ // const response = await uploadRoomLogo(uploadWatermarkData);
- let newImage = new Image();
- newImage.src = URL.createObjectURL(watermarkImage);
+ const imageInfo = this.watermarksSettings.image;
- newImage.onload = () => {
- let width = newImage.width;
- let height = newImage.height;
+ getMeta(imageInfo.viewUrl, (err, img) => {
+ if (err) return;
- return setWatermarkSettings(room.id, {
- enabled: true,
+ setWatermarkSettings(room.id, {
+ enabled: this.watermarksSettings.enabled,
imageScale: this.watermarksSettings.imageScale,
rotate: this.watermarksSettings.rotate,
- imageUrl: response.data,
- imageWidth: width,
- imageHeight: height,
+ imageId: imageInfo.id,
+ imageWidth: img.naturalWidth,
+ imageHeight: img.naturalHeight,
});
- };
+ });
};
onCreateRoom = async (withConfirm = false, t) => {