Skip to content

[WC-2335] fix csp for takepicture #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[WC-2335] fix csp for takepicture #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified WebNanoflowActions.mpr
View file
Open in desktop
Binary file not shown.
207 changes: 1 addition & 206 deletions javascriptsource/webactions/actions/TakePicture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
// - the code between BEGIN USER CODE and END USER CODE
// - the code between BEGIN EXTRA CODE and END EXTRA CODE
// Other code you write will be lost the next time you deploy the project.
import "mx-global";
import { Big } from "big.js";

// BEGIN EXTRA CODE
Expand Down Expand Up @@ -53,13 +54,8 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
return new Promise(async (resolve, reject) => {
let error;
let stream;
const styleElements = [];
let videoIsReady = false;
let shouldFaceEnvironment = true;
for (const styleElement of createStyleElements(createStyles())) {
styleElements.push(styleElement);
document.head.appendChild(styleElement);
}
const {
video,
wrapper,
Expand Down Expand Up @@ -116,204 +112,6 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
videoContext === null || videoContext === void 0 ? void 0 : videoContext.drawImage(video, 0, 0);
return videoCanvas;
}
function createStyles() {
return [
`
.take-picture-wrapper {
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
/* Should be higher than the the video. */
z-index: 111;
};
`,
`
.take-picture-video-element {
position: absolute;
/* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
z-index: 110;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
background-color: black;
};
`,
`
.take-picture-action-control-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
/* should be higher than the video. */
z-index: 111;
margin-bottom: 74px;
};
`,
`
.take-picture-action-switch-control-wrapper {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
/* should be higher than the video. */
z-index: 111;
margin-bottom: 74px;
};
`,
`
.take-picture-close-control-wrapper {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
/* should be higher than the video. */
z-index: 111;
};
`,
`
.take-picture-action-control {
background-color: transparent;
border-style: none;
padding: 0;
};
`,
`
.take-picture-action-spacing {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
};
`,
`
.take-picture-switch-spacing {
display: flex;
flex: 1;
justify-content: flex-end;
align-items: center;
};
`,
`
.take-picture-spacing-div {
flex: 1;
};
`,
`
.take-picture-action-control-inner {
border-radius: 50%;
background-color: white;
border: 1px solid black;
width: 58px;
height: 58px;
};
`,
`
.take-picture-button-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 111;
};
`,
`
.take-picture-save-button {
color: white;
background-color: #264AE5;
width: 100%;
border-radius: 4px;
height: 40px;
font-size: 14px;
line-height: 20px;
text-align: center;
border-style: none;
};
`,
`
.take-picture-switch-control {
background-color: transparent;
border-style: none;
padding: 0;
margin-right: 22.33px;
};
`,
`
.take-picture-close-control {
margin: 30px 0 0 30px;
border-style: none;
padding: 0;
background-color: transparent;
};
`,
`
.take-picture-save-control {
margin: 30px 30px 0 0;
border-style: none;
padding: 0;
background-color: transparent;
};
`,
`
.take-picture-confirm-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
/* should be higher than the wrapper. */
z-index: 112;
display: flex;
flex-direction: column;
justify-content: space-between;
}
`,
`
.take-picture-image {
position: absolute;
/* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
z-index: 110;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
background-color: black;
}
`,
`
/* Overwrite 'atlas_core/web/core/_legacy/_mxui.scss' for this particular widget because otherwise
iOS Safari will in certain cases put the top and/or bottom bar on top of the overlay of this widget. */

.mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) {
-webkit-overflow-scrolling: auto;
}
`
];
}
function createStyleElements(styles) {
const styleElements = [];
for (const style of styles) {
const styleElement = document.createElement("style");
styleElement.appendChild(document.createTextNode(style));
styleElements.push(styleElement);
}
return styleElements;
}
function createFirstScreenElements() {
const wrapper = document.createElement("div");
wrapper.setAttribute("role", "dialog");
Expand Down Expand Up @@ -454,9 +252,6 @@ export async function TakePicture(picture, showConfirmationScreen, pictureQualit
function closeControlHandler() {
stopCamera();
document.body.removeChild(wrapper);
for (const styleElement of styleElements) {
document.head.removeChild(styleElement);
}
}
async function startCamera(facingMode) {
var _a;
Expand Down
153 changes: 153 additions & 0 deletions themesource/webactions/web/_take-picture.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
/* ==========================================================================
Take picture styles
========================================================================== */

.take-picture-wrapper {
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
/* Should be higher than the the video. */
z-index: 111;
}
.take-picture-video-element {
position: absolute;
/* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
z-index: 110;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
background-color: black;
}
.take-picture-action-control-wrapper {
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
/* should be higher than the video. */
z-index: 111;
margin-bottom: 74px;
}
.take-picture-action-switch-control-wrapper {
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
/* should be higher than the video. */
z-index: 111;
margin-bottom: 74px;
}
.take-picture-close-control-wrapper {
display: flex;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
/* should be higher than the video. */
z-index: 111;
}
.take-picture-action-control {
background-color: transparent;
border-style: none;
padding: 0;
}
.take-picture-action-spacing {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.take-picture-switch-spacing {
display: flex;
flex: 1;
justify-content: flex-end;
align-items: center;
}
.take-picture-spacing-div {
flex: 1;
}
.take-picture-action-control-inner {
border-radius: 50%;
background-color: white;
border: 1px solid black;
width: 58px;
height: 58px;
}
.take-picture-button-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
z-index: 111;
}
.take-picture-save-button {
color: white;
background-color: #264AE5;
width: 100%;
border-radius: 4px;
height: 40px;
font-size: 14px;
line-height: 20px;
text-align: center;
border-style: none;
}
.take-picture-switch-control {
background-color: transparent;
border-style: none;
padding: 0;
margin-right: 22.33px;
}
.take-picture-close-control {
margin: 30px 0 0 30px;
border-style: none;
padding: 0;
background-color: transparent;
}
.take-picture-save-control {
margin: 30px 30px 0 0;
border-style: none;
padding: 0;
background-color: transparent;
}
.take-picture-confirm-wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
/* should be higher than the wrapper. */
z-index: 112;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.take-picture-image {
position: absolute;
/* Should be higher than the z-index of '.layout-atlas .region-sidebar' so it sits on top of the page. */
z-index: 110;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
width: 100%;
height: 100%;
background-color: black;
}
/* Overwrite 'atlas_core/web/core/_legacy/_mxui.scss' for this particular widget because otherwise
iOS Safari will in certain cases put the top and/or bottom bar on top of the overlay of this widget. */

.mx-scrollcontainer-wrapper:not(.mx-scrollcontainer-nested) {
-webkit-overflow-scrolling: auto;
}
3 changes: 2 additions & 1 deletion themesource/webactions/web/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
@import '../../../theme/web/custom-variables';
@import "../../../theme/web/custom-variables";
@import "take-picture";