diff --git a/apps/school/templates/school/livelesson_detail.html b/apps/school/templates/school/livelesson_detail.html index 555cb6ef..5aea2c1f 100644 --- a/apps/school/templates/school/livelesson_detail.html +++ b/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 %} - - {% endif %} -{% endblock head %} - {% block content %} -{% include 'templates/blocks/popup_school_lesson_ended.html' %}
@@ -30,7 +23,7 @@
{{ livelesson.short_description | safe | linebreaks }}
{% if livelesson.stream_index %} - @@ -62,35 +55,4 @@ {% block foot %} - - {% if livelesson.stream_index %} - - {% endif %} {% endblock foot %} diff --git a/project/templates/blocks/popup_school_lesson_ended.html b/project/templates/blocks/popup_school_lesson_ended.html deleted file mode 100644 index 65e901de..00000000 --- a/project/templates/blocks/popup_school_lesson_ended.html +++ /dev/null @@ -1,6 +0,0 @@ -{% load static %} -
-
- Отправь другу реферальную ссылку, пригласи учиться вместе и получи лилики на свой бонусный счёт! -
-
diff --git a/web/src/img/video-ended-popup-like.jpg b/web/src/img/video-ended-popup-like.jpg new file mode 100644 index 00000000..d437a971 Binary files /dev/null and b/web/src/img/video-ended-popup-like.jpg differ diff --git a/web/src/img/video-ended-popup-logo.png b/web/src/img/video-ended-popup-logo.png new file mode 100644 index 00000000..a84b49e7 Binary files /dev/null and b/web/src/img/video-ended-popup-logo.png differ diff --git a/web/src/img/video-ended-popup-ref.jpg b/web/src/img/video-ended-popup-ref.jpg new file mode 100644 index 00000000..fbfe3225 Binary files /dev/null and b/web/src/img/video-ended-popup-ref.jpg differ diff --git a/web/src/js/modules/api.js b/web/src/js/modules/api.js index cbf27e8f..6ce13717 100644 --- a/web/src/js/modules/api.js +++ b/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: { diff --git a/web/src/js/modules/content.js b/web/src/js/modules/content.js index 979dc300..845ea52b 100644 --- a/web/src/js/modules/content.js +++ b/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 = $('
'); + 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();}); + } }); } }); diff --git a/web/src/js/utils.js b/web/src/js/utils.js index 27a34ac7..55f68fe2 100644 --- a/web/src/js/utils.js +++ b/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; + }); +}; diff --git a/web/src/sass/_common.sass b/web/src/sass/_common.sass index 9aecc456..7a91d142 100755 --- a/web/src/sass/_common.sass +++ b/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