Merge branch 'feature/end-video-popup-28-05-19' into 'master'

Feature/end video popup 28 05 19

See merge request lilschool/site!309

apps/content/models.py

@@ -99,7 +99,7 @@ class Video(Content):
     url = models.URLField('Ссылка')
 
     def video_index(self):
-        if 'youtu.be' in self.url or 'youtube.com' in self.url and 'watch' in self.url:
+        if self.is_youtube_video:
             url = urlparse(self.url)
             query = url.query.split('&')
             for q in query:
@@ -107,6 +107,14 @@ class Video(Content):
                     return q.split('=')[-1]
         return self.url.split('/')[-1]
 
+    @property
+    def is_youtube_video(self):
+        return 'youtu.be' in self.url or 'youtube.com' in self.url and 'watch' in self.url
+
+    @property
+    def is_vimeo_video(self):
+        return 'vimeo.com' in self.url
+
 
 class Gallery(Content):
     pass

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

@@ -4,12 +4,14 @@
       {{ content.title }}
     </div>
     <div class="content-block__video iframe__container">
-      {% if 'youtube.com' in content.url or 'youtu.be' in content.url %}
-      <iframe src="https://www.youtube.com/embed/{{ content.video_index }}" frameborder="0" allow="autoplay; encrypted-media"
-        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-      {% elif 'vimeo.com' in content.url %}
-      <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" frameborder="0" webkitallowfullscreen
-        mozallowfullscreen allowfullscreen>
+      {% if content.is_youtube_video %}
+      <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-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 %}
     </div>

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

apps/payment/models.py

@@ -356,7 +356,7 @@ class SchoolPayment(Payment):
 
 
 class DrawingCampPayment(Payment):
-    MONTH_PRICE = Decimal(1490)
+    MONTH_PRICE = Decimal(1990)
     WEEKDAYS = {1, 3, 5}
 
     date_start = models.DateField('Дата начала подписки', null=True, blank=True)

apps/school/templates/school/livelesson_detail.html

@@ -15,12 +15,6 @@
   {% 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 %}
 <div class="section" style="margin-bottom:0;padding-bottom:0">
   <div class="section__center center center_sm">
@@ -29,12 +23,11 @@
       <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>
         <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>
         {% else %}
           {% if livelesson.cover %}
@@ -60,29 +53,5 @@
 {% endblock content %}
 
 {% block foot %}
-  {% 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[0]);
-    });
-    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() {
-      console.log('vimeo player: pause', arguments[0]);
-    });
-    player.play().catch(e => console.log(e));
-  </script>
-  {% endif %}
+<script type="text/javascript" src="{% static 'liveLesson.js' %}"></script>
 {% endblock foot %}

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/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

@@ -0,0 +1,52 @@
+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[0]){
+        $popup = $('<div class="video-ended-popup"><div class="video-ended-popup__like-btn"></div></div>');
+        if(courseId){
+            $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);
+    }
+    return $popup;
+}
+
+$(document).ready(function () {
+    $('.js-video').each(function (){
+        const $iframe = $(this);
+        if($iframe.data('isYoutube')){
+
+        }
+        if($iframe.data('isVimeo')){
+            loadScript('https://player.vimeo.com/api/player.js').then(() => {
+                const player = new Vimeo.Player(this);
+                player.on('pause', function(data) {
+                    if(data.percent == 1){
+                        getVideoPopup($iframe).show().animate({opacity: 1}, 200);
+                        if (document.fullscreenElement){
+                            document.exitFullscreen();
+                        }
+                    }
+                });
+                player.on('play', function() {
+                    const $p = getVideoPopup($iframe);
+                    if($p.is(':visible')){
+                        $p.animate({opacity: 0}, 800).then(() => {$p.hide();});
+                    }
+                });
+            });
+        }
+    });
+});

web/src/js/pages/course.js

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

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

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

web/src/js/utils.js

@@ -5,10 +5,24 @@ export const rupluralize = (value, args, addValue=true) => {
     args[(+value > 10 && +value < 20)
       ? 2
       : (digit == '1' ? 0 : ('234'.search(digit) > -1 ? 1 : 2))];
-}
+};
 
 export const loadScript = (url, onload) => {
-    const tag = document.createElement('script');
-    tag.url = url;
-    document.getElementsByTagName('body');
+  return new Promise(resolve => {
+    for (let script of document.getElementsByTagName('script')) {
+      if (script.src == url) {
+        onload && onload();
+        resolve();
+        return;
+      }
     }
+    const script = document.createElement('script');
+    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

@@ -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
@@ -4771,3 +4773,60 @@ a
 
   &__text
     margin: 40px 0
+
+.video-ended-popup
+  display: none
+  position: absolute
+  top: 90px
+  height: 200px
+  background: url(../img/video-ended-popup-ref.jpg) no-repeat center white
+  left: 50%
+  width: 600px
+  margin-left: -300px
+  border-radius: 5px
+  padding: 30px
+  box-shadow: 0 2px 20px rgba(0,0,0,0.10)
+  opacity: 0
+
+  +t
+    left: 60px
+    right: 60px
+    width: auto
+    background-color: #151a1e
+
+  +m
+    width: 100%
+    left: 0
+    top: 0
+    height: 153px
+    background-position: center bottom
+    background-size: auto 130px
+    border-radius: 0
+    background-color: #151a1e
+
+  &_like
+    background-image: url(../img/video-ended-popup-like.jpg)
+
+  &_black
+    background: url(../img/video-ended-popup-logo.png) no-repeat center #141a1d
+
+  &__like-btn
+    background: url(../img/heart.png) no-repeat center
+    position: absolute
+    top: 90px
+    display: none
+    width: 91px
+    height: 52px
+    cursor: pointer
+    left: 50%
+    margin-left: -45px
+
+    +m
+      background-size: contain
+      width: 54px
+      margin-left: -27px
+      bottom: 27px
+      top: auto
+
+  &_like &__like-btn
+    display: block

web/webpack.config.js

@@ -9,10 +9,12 @@ 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",
     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'),