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

apps/content/templates/content/blocks/video.html

@@ -5,10 +5,12 @@
     </div>
     <div class="content-block__video iframe__container">
       {% if content.is_youtube_video %}
-      <iframe class="js-content-video" data-is-youtube="1" src="https://www.youtube.com/embed/{{ content.video_index }}"
+      <iframe class="js-video" data-is-youtube="1" src="https://www.youtube.com/embed/{{ content.video_index }}"
+              data-course-id="{{ content.course_id|default:'' }}"
               frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
       {% elif content.is_vimeo_video %}
-      <iframe class="js-content-video" data-is-vimeo="1" src="https://player.vimeo.com/video/{{ content.video_index }}"
+      <iframe class="js-video" data-is-vimeo="1" src="https://player.vimeo.com/video/{{ content.video_index }}"
+              data-course-id="{{ content.course_id|default:'' }}"
               frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
       </iframe>
       {% endif %}

apps/course/templates/course/course.html

@@ -394,4 +394,5 @@
 
 {% block foot %}
 {% include "templates/blocks/popup_course_buy.html" %}
+<script type="text/javascript" src="{% static 'course.js' %}"></script>
 {% endblock foot %}

web/src/js/modules/content.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import {loadScript} from '../utils';
-import api from '../modules/api';
+import {api} from '../modules/api';
 
 function getVideoPopup($videoEl){
     const $container = $videoEl.parent();
@@ -9,12 +9,13 @@ function getVideoPopup($videoEl){
     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.addClass('video-ended-popup_black');
+            /*
             $popup.find('.video-ended-popup__like-btn').click(() => {
                 api.likeCourse(courseId).then(() => {
                     $popup.addClass('video-ended-popup_black');
                 });
-            });
+            });*/
         }
 
         $container.append($popup);
@@ -42,7 +43,7 @@ $(document).ready(function () {
             player.on('play', function() {
                 const $p = getVideoPopup($iframe)
                 if($p.is(':visible')){
-                    $p.animate({opacity: 0}, 500).then(() => {$p.hide();});
+                    $p.animate({opacity: 0}, 800).then(() => {$p.hide();});
                 }
             });
         }

web/src/js/pages/course.js

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

web/src/sass/_common.sass

@@ -4358,11 +4358,13 @@ a
   &.pic
     position: relative
     width: 100%
+  &__video
+    position: relative
   &__video iframe
-    height: 360px;
-    width: 640px;
-    max-width: 100%;
-    max-height: 60%;
+    height: 360px
+    width: 640px
+    max-width: 100%
+    max-height: 60%
 
 @media only screen and (max-width: 639px)
   .content-block__video iframe
@@ -4775,7 +4777,7 @@ a
 .video-ended-popup
   display: none
   position: absolute
-  top: 100px
+  top: 90px
   height: 200px
   background: url(../img/video-ended-popup-ref.jpg) no-repeat center white
   left: 60px
@@ -4789,13 +4791,18 @@ a
     background-image: url(../img/video-ended-popup-like.jpg)
 
   &_black
-    background: url(../img/video-ended-popup-logo.png) no-repeat center black
+    background: url(../img/video-ended-popup-logo.png) no-repeat center #151a1e
 
   &__like-btn
+    background: url(../img/heart.png) no-repeat center
     position: absolute
-    top: 100px
-    margin: 0 auto
+    top: 90px
     display: none
+    width: 91px
+    height: 52px
+    cursor: pointer
+    left: 50%
+    margin-left: -45px
 
   &_like &__like-btn
     display: block

web/webpack.config.js

@@ -9,6 +9,7 @@ const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
 module.exports = {
   entry: {
     app: "./src/js/app.js",
+    course: "./src/js/pages/course.js",
     courseEdit: "./src/js/pages/course-edit.js",
     contest: "./src/js/pages/contest.js",
     contestEdit: "./src/js/pages/contest-edit.js",