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

apps/school/templates/school/livelesson_detail.html

@@ -15,14 +15,7 @@
   {% if livelesson.cover and livelesson.cover.image %}{{ livelesson.cover.image.height }}{% else %}{{ block.super }}{% endif %}
 {% endblock ogimage-height %}
 
-{% block head %}
-  {% if livelesson.stream_index %}
-  <!--<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">
@@ -30,7 +23,7 @@
       <div class="lesson__content">{{ livelesson.short_description | safe | linebreaks }}</div>
       <div class="lesson__video video">
         {% if livelesson.stream_index %}
-        <iframe class="lesson__video_frame" src="https://player.vimeo.com/video/{{ livelesson.stream_index }}" frameborder="0"
+        <iframe class="lesson__video_frame js-video" data-is-vimeo="1" src="https://player.vimeo.com/video/{{ livelesson.stream_index }}" frameborder="0"
                 width="720" height="400"
                 webkitallowfullscreen mozallowfullscreen allowfullscreen>
         </iframe>
@@ -62,35 +55,4 @@
 
 {% block foot %}
 <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() {
-      console.log('vimeo player: ended', arguments);
-    });
-    player.on('error', function() {
-      console.log('vimeo player: error', arguments[0]);
-    });
-    player.on('loaded', function() {
-      console.log('vimeo player: loaded', arguments[0]);
-    });
-    player.on('ready', function() {
-      console.log('vimeo player: ready', arguments[0]);
-    });
-    player.on('play', function() {
-      console.log('vimeo player: play', arguments[0]);
-    });
-    player.on('pause', function(data) {
-        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)); */
-  </script>
-  {% endif %}
 {% endblock foot %}

project/templates/blocks/popup_school_lesson_ended.html

@@ -1,6 +0,0 @@
-{% load static %}
-<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/modules/api.js

@@ -89,6 +89,13 @@ export const api = {
             }
         });
     },
+    likeCourse: (courseId) => {
+        return api.post(`/api/v1/courses/${courseId}/like`, {
+            headers: {
+                'Authorization': `Token ${window.LIL_STORE.accessToken}`,
+            }
+        });
+    },
     loadLive: (courseId, accessToken) => {
         return api.get(`/api/v1/live-lesson/${courseId}/`, {
             headers: {

web/src/js/modules/content.js

@@ -1,38 +1,49 @@
 import $ from 'jquery';
 import {loadScript} from '../utils';
+import api from '../modules/api';
 
 function getVideoPopup($videoEl){
     const $container = $videoEl.parent();
+    const courseId = $videoEl.data('courseId');
     let $popup = $container.children('.video-ended-popup');
-    if(! $popup){
-        $popup = $('#main-video-ended-popup').clone();
-        $popup.attr('id', '');
-        //$popup.find('.')
+    if(! $popup[0]){
+        $popup = $('<div class="video-ended-popup"><div class="video-ended-popup__like-btn"></div></div>');
+        if(courseId){
+            $popup.addClass('video-ended-popup_like')
+            $popup.find('.video-ended-popup__like-btn').click(() => {
+                api.likeCourse(courseId).then(() => {
+                    $popup.addClass('video-ended-popup_black');
+                });
+            });
+        }
+
         $container.append($popup);
     }
     return $popup;
 }
 
-loadScript('https://player.vimeo.com/api/player.js');
 $(document).ready(function () {
-    $('.js-video').each(function (){
+    $('.js-video').each(async 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')){
+            await loadScript('https://player.vimeo.com/api/player.js');
             const player = new Vimeo.Player(this);
             player.on('pause', function(data) {
                 if(data.percent == 1){
-                    getVideoPopup($iframe).show();
-                    document.exitFullscreen();
+                    getVideoPopup($iframe).show().animate({opacity: 1}, 100);
+                    if (document.fullscreenElement){
+                        document.exitFullscreen();
+                    }
                 }
             });
             player.on('play', function() {
-                getVideoPopup($iframe).hide();
+                const $p = getVideoPopup($iframe)
+                if($p.is(':visible')){
+                    $p.animate({opacity: 0}, 500).then(() => {$p.hide();});
+                }
             });
         }
     });

web/src/js/utils.js

@@ -1,21 +1,28 @@
-export const rupluralize = (value, args, addValue=true) => {
-    let digit = Math.trunc(value) + '';
-    digit = digit[digit.length - 1];
-    return (addValue ? value + ' ' : '') +
-      args[(+value > 10 && +value < 20)
-        ? 2
-        : (digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2))];
-}
+export const rupluralize = (value, args, addValue = true) => {
+  let digit = Math.trunc(value) + '';
+  digit = digit[digit.length - 1];
+  return (addValue ? value + ' ' : '') +
+    args[(+value > 10 && +value < 20)
+      ? 2
+      : (digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2))];
+};
 
 export const loadScript = (url, onload) => {
-    for(const script of document.getElementsByTagName('script')){
-        if(script.url == url){
-            onload && onload();
-            return;
-        }
+  return new Promise(function (resolve, reject) {
+    for (const script of document.getElementsByTagName('script')) {
+      if (script.src == url) {
+        onload && onload();
+        resolve();
+        return;
+      }
     }
     const script = document.createElement('script');
-    document.body.appendChild(script)
-    script.onload = onload;
-    script.url = url;;
-}
+    script.async = true;
+    document.body.appendChild(script);
+    script.onload = function () {
+      onload && onload.apply(this, arguments);
+      resolve.apply(this, arguments);
+    }
+    script.src = url;
+  });
+};

web/src/sass/_common.sass

@@ -4777,9 +4777,25 @@ a
   position: absolute
   top: 100px
   height: 200px
-  background: white
+  background: url(../img/video-ended-popup-ref.jpg) no-repeat center white
   left: 60px
   width: 600px
   border-radius: 5px
   padding: 30px
   box-shadow: 0 2px 20px rgba(0,0,0,0.10)
+  opacity: 0
+
+  &_like
+    background-image: url(../img/video-ended-popup-like.jpg)
+
+  &_black
+    background: url(../img/video-ended-popup-logo.png) no-repeat center black
+
+  &__like-btn
+    position: absolute
+    top: 100px
+    margin: 0 auto
+    display: none
+
+  &_like &__like-btn
+    display: block