попап в конце видео

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 %}

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>

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'

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();
+            });
+        }
+    });
+});

web/src/js/pages/live-lesson.js

@@ -0,0 +1 @@
+import "../modules/content";

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;;
 }

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)

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'),