From d66449241a3507e1586e456703f6a8338d60c59e Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Thu, 13 Aug 2020 10:50:03 +0300 Subject: [PATCH] Batch of fixes for Safari (#2025) * Styles fixes * Fixed imageBitmap & styles on annotation page * Increased version of cvat-data --- cvat-data/package-lock.json | 2 +- cvat-data/package.json | 2 +- cvat-data/src/js/cvat-data.js | 21 ++++++++++++++++++- cvat-data/src/js/unzip_imgs.worker.js | 15 ++++++++++--- .../annotation-page/annotation-page.tsx | 6 +++--- .../standard-workspace/styles.scss | 2 +- .../components/create-task-page/styles.scss | 5 +++-- cvat-ui/src/components/cvat-app.tsx | 2 +- cvat-ui/src/components/feedback/styles.scss | 3 ++- .../models-page/deployed-models-list.tsx | 4 ++-- .../src/components/models-page/styles.scss | 4 +++- .../src/components/models-page/top-bar.tsx | 2 +- cvat-ui/src/components/task-page/styles.scss | 4 +++- cvat-ui/src/components/tasks-page/styles.scss | 3 +++ 14 files changed, 56 insertions(+), 19 deletions(-) diff --git a/cvat-data/package-lock.json b/cvat-data/package-lock.json index 4a96cca3..f392ce8e 100644 --- a/cvat-data/package-lock.json +++ b/cvat-data/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-data", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-data/package.json b/cvat-data/package.json index eb78de78..5c42155e 100644 --- a/cvat-data/package.json +++ b/cvat-data/package.json @@ -1,6 +1,6 @@ { "name": "cvat-data", - "version": "1.0.0", + "version": "1.0.1", "description": "", "main": "src/js/cvat-data.js", "devDependencies": { diff --git a/cvat-data/src/js/cvat-data.js b/cvat-data/src/js/cvat-data.js index 8484e9ac..86a0a6d0 100644 --- a/cvat-data/src/js/cvat-data.js +++ b/cvat-data/src/js/cvat-data.js @@ -295,7 +295,26 @@ class FrameProvider { worker.terminate(); }; - worker.onmessage = (event) => { + worker.onmessage = async (event) => { + if (event.data.isRaw) { + // safary doesn't support createImageBitmap + // there is a way to polyfill it with using document.createElement + // but document.createElement doesn't work in worker + // so, we get raw data and decode it here, no other way + + const createImageBitmap = async function(blob) { + return new Promise((resolve,reject) => { + let img = document.createElement('img'); + img.addEventListener('load', function() { + resolve(this); + }); + img.src = URL.createObjectURL(blob); + }); + }; + + event.data.data = await createImageBitmap(event.data.data); + } + this._frames[event.data.index] = event.data.data; if (this._decodingBlocks[`${start}:${end}`].resolveCallback) { diff --git a/cvat-data/src/js/unzip_imgs.worker.js b/cvat-data/src/js/unzip_imgs.worker.js index f704e098..68d0b2a5 100644 --- a/cvat-data/src/js/unzip_imgs.worker.js +++ b/cvat-data/src/js/unzip_imgs.worker.js @@ -20,13 +20,22 @@ onmessage = (e) => { const fileIndex = index++; if (fileIndex <= end) { _zip.file(relativePath).async('blob').then((fileData) => { - createImageBitmap(fileData).then((img) => { + if (self.createImageBitmap) { + createImageBitmap(fileData).then((img) => { + postMessage({ + fileName: relativePath, + index: fileIndex, + data: img, + }); + }); + } else { postMessage({ fileName: relativePath, index: fileIndex, - data: img, + data: fileData, + isRaw: true, }); - }); + } }); } }); diff --git a/cvat-ui/src/components/annotation-page/annotation-page.tsx b/cvat-ui/src/components/annotation-page/annotation-page.tsx index 8854dd5d..d98d4284 100644 --- a/cvat-ui/src/components/annotation-page/annotation-page.tsx +++ b/cvat-ui/src/components/annotation-page/annotation-page.tsx @@ -80,17 +80,17 @@ export default function AnnotationPageComponent(props: Props): JSX.Element { { workspace === Workspace.STANDARD && ( - + )} { workspace === Workspace.ATTRIBUTE_ANNOTATION && ( - + )} { workspace === Workspace.TAG_ANNOTATION && ( - + )} diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss index c729d259..a9514add 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/standard-workspace/styles.scss @@ -98,7 +98,7 @@ padding: 10px; border-radius: 5px; background: $background-color-2; - width: 250px; + width: 270px; > div { margin-top: 5px; diff --git a/cvat-ui/src/components/create-task-page/styles.scss b/cvat-ui/src/components/create-task-page/styles.scss index ccf664b2..a9b03632 100644 --- a/cvat-ui/src/components/create-task-page/styles.scss +++ b/cvat-ui/src/components/create-task-page/styles.scss @@ -8,8 +8,9 @@ text-align: center; padding-top: 40px; overflow-y: auto; - height: 100%; - padding-bottom: 40px; + height: 90%; + position: fixed; + width: 100%; > div > span { font-size: 36px; diff --git a/cvat-ui/src/components/cvat-app.tsx b/cvat-ui/src/components/cvat-app.tsx index 8b732270..50d7ce04 100644 --- a/cvat-ui/src/components/cvat-app.tsx +++ b/cvat-ui/src/components/cvat-app.tsx @@ -273,7 +273,7 @@ class CVATApplication extends React.PureComponent - + diff --git a/cvat-ui/src/components/feedback/styles.scss b/cvat-ui/src/components/feedback/styles.scss index 88495873..39415886 100644 --- a/cvat-ui/src/components/feedback/styles.scss +++ b/cvat-ui/src/components/feedback/styles.scss @@ -3,10 +3,11 @@ // SPDX-License-Identifier: MIT .cvat-feedback-button { - position: absolute; + position: fixed; bottom: 20px; right: 20px; padding: 0; + height: auto; > i { font-size: 40px; diff --git a/cvat-ui/src/components/models-page/deployed-models-list.tsx b/cvat-ui/src/components/models-page/deployed-models-list.tsx index c9d9ec6e..93e301be 100644 --- a/cvat-ui/src/components/models-page/deployed-models-list.tsx +++ b/cvat-ui/src/components/models-page/deployed-models-list.tsx @@ -35,10 +35,10 @@ export default function DeployedModelsListComponent(props: Props): JSX.Element { Type - + Description - + Labels diff --git a/cvat-ui/src/components/models-page/styles.scss b/cvat-ui/src/components/models-page/styles.scss index f566e92f..ddcaef8a 100644 --- a/cvat-ui/src/components/models-page/styles.scss +++ b/cvat-ui/src/components/models-page/styles.scss @@ -6,8 +6,10 @@ .cvat-models-page { padding-top: 30px; - height: 100%; + height: 90%; overflow: auto; + position: fixed; + width: 100%; > div:nth-child(1) { margin-bottom: 10px; diff --git a/cvat-ui/src/components/models-page/top-bar.tsx b/cvat-ui/src/components/models-page/top-bar.tsx index 584fa83c..d0ede583 100644 --- a/cvat-ui/src/components/models-page/top-bar.tsx +++ b/cvat-ui/src/components/models-page/top-bar.tsx @@ -9,7 +9,7 @@ import Text from 'antd/lib/typography/Text'; export default function TopBarComponent(): JSX.Element { return ( - + Models diff --git a/cvat-ui/src/components/task-page/styles.scss b/cvat-ui/src/components/task-page/styles.scss index b13a2c44..fd218c50 100644 --- a/cvat-ui/src/components/task-page/styles.scss +++ b/cvat-ui/src/components/task-page/styles.scss @@ -6,7 +6,9 @@ .cvat-task-details-wrapper { overflow-y: auto; - height: 100%; + height: 90%; + width: 100%; + position: fixed; .cvat-task-details { width: 100%; diff --git a/cvat-ui/src/components/tasks-page/styles.scss b/cvat-ui/src/components/tasks-page/styles.scss index a5a88ca5..623b7633 100644 --- a/cvat-ui/src/components/tasks-page/styles.scss +++ b/cvat-ui/src/components/tasks-page/styles.scss @@ -6,7 +6,10 @@ .cvat-tasks-page { padding-top: 15px; + padding-bottom: 40px; height: 100%; + position: fixed; + width: 100%; > div:nth-child(1) { padding-bottom: 10px;