From 46066fda9ca37ff20a3cfeabc783443a51eff5a3 Mon Sep 17 00:00:00 2001
From: gzbender <gzbender74@gmail.com>
Date: Thu, 30 May 2019 16:59:43 +0300
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D0=B0=D0=BF=20=D0=B2=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BD=D1=86=D0=B5=20=D0=B2=D0=B8=D0=B4=D0=B5=D0=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/school/livelesson_detail.html   | 22 +++++------
 .../blocks/popup_school_lesson_ended.html     | 15 ++-----
 web/src/js/app.js                             |  1 -
 web/src/js/modules/content.js                 | 39 +++++++++++++++++++
 web/src/js/pages/live-lesson.js               |  1 +
 web/src/js/utils.js                           | 13 +++++--
 web/src/sass/_common.sass                     | 12 ++++++
 web/webpack.config.js                         |  1 +
 8 files changed, 77 insertions(+), 27 deletions(-)
 create mode 100644 web/src/js/modules/content.js
 create mode 100644 web/src/js/pages/live-lesson.js

diff --git a/apps/school/templates/school/livelesson_detail.html b/apps/school/templates/school/livelesson_detail.html
index d7a8dcdb..555cb6ef 100644
--- a/apps/school/templates/school/livelesson_detail.html
+++ b/apps/school/templates/school/livelesson_detail.html
@@ -17,11 +17,12 @@
 
 {% block head %}
   {% if livelesson.stream_index %}
-  <script src="https://player.vimeo.com/api/player.js"></script>
+  <!--<script src="https://player.vimeo.com/api/player.js"></script>-->
   {% endif %}
 {% endblock head %}
 
 {% block content %}
+{% include 'templates/blocks/popup_school_lesson_ended.html' %}
 <div class="section" style="margin-bottom:0;padding-bottom:0">
   <div class="section__center center center_sm">
     <div class="lesson">
@@ -33,10 +34,6 @@
                 width="720" height="400"
                 webkitallowfullscreen mozallowfullscreen allowfullscreen>
         </iframe>
-        <div id="popup_video" style="position: absolute; background: white; width: 200px; height: 200px; top: 0; left: 0; display: none;">
-          testtest testtest testtest testtest testtest testtest
-        </div>
-        {% include 'templates/blocks/popup_school_lesson_ended.html' %}
         <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>-->
         <comments obj-type="live-lesson" obj-id="{{ livelesson.id }}" :is-chat="true"></comments>
@@ -64,9 +61,11 @@
 {% endblock content %}
 
 {% block foot %}
-<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
+<script type="text/javascript" src="{% static 'liveLesson.js' %}"></script>
+<!--<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>-->
   {% if livelesson.stream_index %}
   <script>
+    /*
     var iframe = document.querySelector('iframe.lesson__video_frame');
     var player = new Vimeo.Player(iframe);
     player.on('ended', function() {
@@ -85,12 +84,13 @@
       console.log('vimeo player: play', arguments[0]);
     });
     player.on('pause', function(data) {
-      console.log('vimeo player: pause', arguments[0]);
-      if(data.percent == 1){
-        //
-      }
+        console.log('vimeo player: pause', arguments[0]);
+        if(data.percent == 1){
+            $('#popup-school-lesson-ended').addClass('open visible');
+            document.exitFullscreen();
+        }
     });
-    player.play().catch(e => console.log(e));
+    player.play().catch(e => console.log(e)); */
   </script>
   {% endif %}
 {% endblock foot %}
diff --git a/project/templates/blocks/popup_school_lesson_ended.html b/project/templates/blocks/popup_school_lesson_ended.html
index 12404388..65e901de 100644
--- a/project/templates/blocks/popup_school_lesson_ended.html
+++ b/project/templates/blocks/popup_school_lesson_ended.html
@@ -1,15 +1,6 @@
 {% load static %}
-<div class="popup video-ended js-popup-video-ended" data-manual-close="1">
-    <div class="popup__wrap popup__wrap_md js-popup-wrap">
-        <button class="popup__close js-popup-close">
-            <svg class="icon icon-close">
-                <use xlink:href={% static "img/sprite.svg" %}#icon-close></use>
-            </svg>
-        </button>
-        <div class="popup__body video-ended__body">
-          <div>
-            Отправь другу реферальную ссылку, пригласи учиться вместе и получи лилики на свой бонусный счёт!
-          </div>
-        </div>
+<div id="main-video-ended-popup" class="video-ended-popup js-popup-video-ended" data-manual-close="1">
+    <div class="video-ended__body">
+      Отправь другу реферальную ссылку, пригласи учиться вместе и получи лилики на свой бонусный счёт!
     </div>
 </div>
diff --git a/web/src/js/app.js b/web/src/js/app.js
index 7193a6e8..14e66e65 100644
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@@ -19,7 +19,6 @@ import "./modules/mixpanel";
 
 import "../sass/app.sass";
 
-import $ from 'jquery';
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
 import VueAutosize from '../components/directives/autosize'
diff --git a/web/src/js/modules/content.js b/web/src/js/modules/content.js
new file mode 100644
index 00000000..979dc300
--- /dev/null
+++ b/web/src/js/modules/content.js
@@ -0,0 +1,39 @@
+import $ from 'jquery';
+import {loadScript} from '../utils';
+
+function getVideoPopup($videoEl){
+    const $container = $videoEl.parent();
+    let $popup = $container.children('.video-ended-popup');
+    if(! $popup){
+        $popup = $('#main-video-ended-popup').clone();
+        $popup.attr('id', '');
+        //$popup.find('.')
+        $container.append($popup);
+    }
+    return $popup;
+}
+
+loadScript('https://player.vimeo.com/api/player.js');
+$(document).ready(function () {
+    $('.js-video').each(function (){
+        const $iframe = $(this);
+        const isYT = $iframe.data('isYoutube');
+        const isVimeo = $iframe.data('isVimeo');
+        const courseId = $iframe.data('courseId');
+        if($iframe.data('isYoutube')){
+
+        }
+        if($iframe.data('isVimeo')){
+            const player = new Vimeo.Player(this);
+            player.on('pause', function(data) {
+                if(data.percent == 1){
+                    getVideoPopup($iframe).show();
+                    document.exitFullscreen();
+                }
+            });
+            player.on('play', function() {
+                getVideoPopup($iframe).hide();
+            });
+        }
+    });
+});
diff --git a/web/src/js/pages/live-lesson.js b/web/src/js/pages/live-lesson.js
new file mode 100644
index 00000000..525f893c
--- /dev/null
+++ b/web/src/js/pages/live-lesson.js
@@ -0,0 +1 @@
+import "../modules/content";
diff --git a/web/src/js/utils.js b/web/src/js/utils.js
index 9d822ef3..27a34ac7 100644
--- a/web/src/js/utils.js
+++ b/web/src/js/utils.js
@@ -8,7 +8,14 @@ export const rupluralize = (value, args, addValue=true) => {
 }
 
 export const loadScript = (url, onload) => {
-    const tag = document.createElement('script');
-    tag.url = url;
-    document.getElementsByTagName('body');
+    for(const script of document.getElementsByTagName('script')){
+        if(script.url == url){
+            onload && onload();
+            return;
+        }
+    }
+    const script = document.createElement('script');
+    document.body.appendChild(script)
+    script.onload = onload;
+    script.url = url;;
 }
diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass
index 565b7e83..9aecc456 100755
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@@ -4771,3 +4771,15 @@ a
 
   &__text
     margin: 40px 0
+
+.video-ended-popup
+  display: none
+  position: absolute
+  top: 100px
+  height: 200px
+  background: white
+  left: 60px
+  width: 600px
+  border-radius: 5px
+  padding: 30px
+  box-shadow: 0 2px 20px rgba(0,0,0,0.10)
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 7e3590a3..bde23572 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -13,6 +13,7 @@ module.exports = {
     contest: "./src/js/pages/contest.js",
     contestEdit: "./src/js/pages/contest-edit.js",
     profile: "./src/js/pages/profile.js",
+    liveLesson: "./src/js/pages/live-lesson.js",
     userGalleryEdit: "./src/js/pages/user-gallery-edit.js",
     mixpanel: "./src/js/third_party/mixpanel-2-latest.js",
     sprite: glob('./src/icons/*.svg'),