Batch of fixes for Safari (cvat-ai#2025)

* Styles fixes * Fixed imageBitmap & styles on annotation page * Increased version of cvat-data
minkoo01 · Aug 13, 2020 · d664492 · d664492
1 parent 0856be0
commit d664492
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 19 deletions.
diff --git a/cvat-data/package-lock.json b/cvat-data/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -80,17 +80,17 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
                 <AnnotationTopBarContainer />
             </Layout.Header>
             { workspace === Workspace.STANDARD && (
-                <Layout.Content>
+                <Layout.Content style={{ height: '100%' }}>
                     <StandardWorkspaceComponent />
                 </Layout.Content>
             )}
             { workspace === Workspace.ATTRIBUTE_ANNOTATION && (
-                <Layout.Content>
+                <Layout.Content style={{ height: '100%' }}>
                     <AttributeAnnotationWorkspace />
                 </Layout.Content>
             )}
             { workspace === Workspace.TAG_ANNOTATION && (
-                <Layout.Content>
+                <Layout.Content style={{ height: '100%' }}>
                     <TagAnnotationWorkspace />
                 </Layout.Content>
             )}

diff --git 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
@@ -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
@@ -273,7 +273,7 @@ class CVATApplication extends React.PureComponent<CVATAppProps & RouteComponentP
                     <GlobalErrorBoundary>
                         <Layout>
                             <HeaderContainer> </HeaderContainer>
-                            <Layout.Content>
+                            <Layout.Content style={{ height: '100%' }}>
                                 <ShorcutsDialog />
                                 <GlobalHotKeys keyMap={subKeyMap} handlers={handlers}>
                                     <Switch>

diff --git 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
@@ -35,10 +35,10 @@ export default function DeployedModelsListComponent(props: Props): JSX.Element {
                         <Col span={3}>
                             <Text strong>Type</Text>
                         </Col>
-                        <Col span={8}>
+                        <Col span={10}>
                             <Text strong>Description</Text>
                         </Col>
-                        <Col span={4}>
+                        <Col span={5}>
                             <Text strong>Labels</Text>
                         </Col>
                     </Row>

diff --git 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
@@ -9,7 +9,7 @@ import Text from 'antd/lib/typography/Text';
 export default function TopBarComponent(): JSX.Element {
     return (
         <Row type='flex' justify='center' align='middle'>
-            <Col md={11} lg={9} xl={8} xxl={7}>
+            <Col md={22} lg={20} xl={16} xxl={14}>
                 <Text className='cvat-title'>Models</Text>
             </Col>
         </Row>

diff --git 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
@@ -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;