Merge branch 'hotfix/lil-588' into 'master'

Hotfix/lil 588

See merge request lilcity/backend!91

apps/school/templates/school/livelesson_detail.html

@@ -8,13 +8,12 @@
     <div class="lesson">
       <div class="lesson__subtitle subtitle">{{ livelesson.title }}</div>
       <div class="lesson__content">{{ livelesson.short_description }}</div>
+      <div class="lesson__video video">
         {% if livelesson.stream_index %}
-        <a class="lesson__video video" href="#">
-          <iframe class="lesson__video_frame" src="https://player.vimeo.com/video/{{ livelesson.stream_index }}?autoplay=1" frameborder="0" webkitallowfullscreen
-            mozallowfullscreen allowfullscreen>
-          </iframe>
-        </a>
-        Если видео не загрузилось, уменьшите качество видео или <a href="#" onclick="location.reload();">обновите страницу</a>
+        <iframe class="lesson__video_frame" src="https://player.vimeo.com/video/{{ livelesson.stream_index }}?autoplay=1" frameborder="0" webkitallowfullscreen
+          mozallowfullscreen allowfullscreen>
+        </iframe>
+        <span>Если видео не загрузилось, - уменьшите качество видео или <a href="#" onclick="location.reload();">обновите страницу</a></span>
         <iframe class="lesson__chat_frame" src="https://vimeo.com/live-chat/{{ livelesson.stream_index }}" frameborder="0"></iframe>
         {% else %}
           {% if livelesson.cover %}
@@ -22,6 +21,7 @@
           {% else %}
         {% endif %}
         {% endif %}
+      </div>
     </div>
   </div>
 </div>

web/package.json

@@ -34,9 +34,13 @@
     "webpack": "^3.10.0"
   },
   "dependencies": {
+    "autosize": "^4.0.2",
+    "autosize-input": "^1.0.2",
     "axios": "^0.17.1",
     "babel-polyfill": "^6.26.0",
     "baguettebox.js": "^1.10.0",
+    "downscale": "^1.0.4",
+    "glob": "^7.1.2",
     "history": "^4.7.2",
     "ilyabirman-likely": "^2.3.0",
     "inputmask": "^3.3.11",

web/src/components/blocks/Image.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="kit__photo">
+  <div class="kit__photo" :class="{'loading': loading}">
     <svg class="icon icon-add-plus" v-if="!imageUrl">
       <use xlink:href="/static/img/sprite.svg#icon-add-plus"></use>
     </svg>
@@ -10,6 +10,7 @@
 
 <script>
     import {api} from "../../js/modules/api";
+    import downscale from 'downscale';
 
     export default {
         name: "lil-image",
@@ -22,19 +23,37 @@
         methods: {
             onImageAdded(event) {
                 this.loading = true;
+                const maxSize = 1600;
                 let file = event.target.files[0];
-                let reader = new FileReader();
+                const reader = new FileReader();
                 reader.onload = () => {
-                    api.uploadImage(reader.result, this.accessToken)
-                        .then((response) => {
-                            this.loading = false;
-                            this.$emit('update:imageId', response.data.id);
-                            this.$emit('update:imageUrl', response.data.image);
-                        })
-                        .catch((error) => {
-                            this.loading = false;
-                            console.log('error', error);
+                    let img = document.createElement('img');
+                    img.onload = () => {
+                        let w = 0;
+                        let h = 0;
+                        if(img.width > img.height) {
+                            w = maxSize;
+                            h = 0;
+                        }
+                        else {
+                            w = 0;
+                            h = maxSize;
+                        }
+                        downscale(img.src, w, h).then((dataURL) => {
+                            img = null;
+                            api.uploadImage(dataURL, this.accessToken)
+                                .then((response) => {
+                                    this.loading = false;
+                                    this.$emit('update:imageId', response.data.id);
+                                    this.$emit('update:imageUrl', response.data.image);
+                                })
+                                .catch((error) => {
+                                    this.loading = false;
+                                    console.log('error', error);
+                                });
                         });
+                    }
+                    img.src = reader.result;
                 };
                 if (file) {
                     reader.readAsDataURL(file);
@@ -51,4 +70,4 @@
     display: block;
     object-fit: contain;
   }
-</style>
+</style>

web/src/sass/_common.sass

@@ -3480,6 +3480,24 @@ a.grey-link
     .icon
       font-size: 20px
       fill: #B5B5B5
+
+    &.loading &-image
+      visibility: hidden
+    &.loading
+      .icon
+        visibility: hidden
+      &:after
+        content: ''
+        position: absolute
+        top: 50%
+        left: 50%
+        width: 24px
+        height: 24px
+        margin: -12px 0 0 -12px
+        border: 3px solid #B5B5B5
+        border-left: 3px solid transparent
+        border-radius: 50%
+        animation: loading .6s infinite linear
   &__file
     position: absolute
     top: 0