LIL-714 Ссылка на видео и захват почты на главной

api/v1/serializers/config.py

@@ -25,6 +25,7 @@ class ConfigSerializer(serializers.ModelSerializer):
     REFERRER_BONUS = serializers.IntegerField()
     REFERRAL_BONUS = serializers.IntegerField()
     MAIN_PAGE_VIDEO_URL = serializers.CharField(required=False)
+    MAIN_PAGE_VIDEO_PREVIEW_IMG = serializers.SerializerMethodField()
 
     class Meta:
         model = Config
@@ -47,6 +48,7 @@ class ConfigSerializer(serializers.ModelSerializer):
             'REFERRER_BONUS',
             'REFERRAL_BONUS',
             'MAIN_PAGE_VIDEO_URL',
+            'MAIN_PAGE_VIDEO_PREVIEW_IMG',
         )
 
     def get_SCHOOL_LOGO_IMAGE(self, config):
@@ -68,3 +70,13 @@ class ConfigSerializer(serializers.ModelSerializer):
             return MAIN_PAGE_TOP_IMAGE_url
         else:
             return None
+
+    def get_MAIN_PAGE_VIDEO_PREVIEW_IMG(self, config):
+        request = self.context.get('request')
+        http_host = request.META.get('HTTP_ORIGIN')
+        if http_host and config.MAIN_PAGE_VIDEO_PREVIEW_IMG:
+            domain = urlparse(http_host).netloc.split(':')[0]
+            MAIN_PAGE_VIDEO_PREVIEW_IMG_url = 'http://' + domain + config.MAIN_PAGE_VIDEO_PREVIEW_IMG.url
+            return MAIN_PAGE_VIDEO_PREVIEW_IMG_url
+        else:
+            return None

apps/config/migrations/0013_config_main_page_video_preview_img.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.0.7 on 2018-12-13 15:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('config', '0012_auto_20181210_1729'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='config',
+            name='MAIN_PAGE_VIDEO_PREVIEW_IMG',
+            field=models.ImageField(blank=True, null=True, upload_to=''),
+        ),
+    ]

apps/config/models.py

@@ -22,6 +22,7 @@ class Config(models.Model):
     REFERRER_BONUS = models.IntegerField(default=10)
     REFERRAL_BONUS = models.IntegerField(default=10)
     MAIN_PAGE_VIDEO_URL = models.URLField(max_length=126, default='https://www.youtube.com/embed/1w3amQGtQyc')
+    MAIN_PAGE_VIDEO_PREVIEW_IMG = models.ImageField(null=True, blank=True)
 
     def save(self, *args, **kwargs):
         self.pk = 1
@@ -43,6 +44,8 @@ class Config(models.Model):
                 'SERVICE_INSTAGRAM_URL': '',
                 'SERVICE_TWITTER_URL': '',
                 'SERVICE_FB_URL': '',
+                'SERVICE_VK_URL': '',
+                'SERVICE_OK_URL': '',
                 'SERVICE_YOUTUBE_URL': '',
                 'SERVICE_TELEGRAM_CHANNEL': '',
                 'SERVICE_COMMISSION': '',
@@ -52,5 +55,7 @@ class Config(models.Model):
                 'MAIN_PAGE_TOP_IMAGE': '',
                 'REFERRER_BONUS': '',
                 'REFERRAL_BONUS': '',
+                'MAIN_PAGE_VIDEO_URL': '',
+                'MAIN_PAGE_VIDEO_PREVIEW_IMG': '',
             }
         return obj

project/templates/blocks/popup_capture_email.html

@@ -19,6 +19,7 @@
                         <div class="capture-email__error field__error"></div>
                     </div>
                     <div style="text-align: center;">
+                        <div class="loading-loader" style="display: none;"></div>
                         <button type="submit" class="capture-email__btn btn btn_light" tabindex="3">Подтвердить</button>
                     </div>
                 </form>

project/templates/blocks/video.html

@@ -1,13 +1,10 @@
 <div class="section section_video">
   <div class="section__center center center_sm" style="text-align: center;">
-    <iframe class="main-video" style="display: inline-block;"
-      width="100%"
-      height="360"
-      src="{{ config.MAIN_PAGE_VIDEO_URL }}"
-      frameborder="0"
-      allow="autoplay; encrypted-media"
-      allowfullscreen
-    ></iframe>
+    <div class="title">Пробный урок</div>
+    <img class="main-video-preview" style="width: 640px; height: 360px;"
+         src="{{ config.MAIN_PAGE_VIDEO_PREVIEW_IMG.url }}"/>
+    <a href="#" class="btn js-video-modal btn_stroke-black" style="margin: 20px;"
+       data-video-url="{{ config.MAIN_PAGE_VIDEO_URL }}" data-trial-lesson="1">Смотреть бесплатно</a>
     <div>Много развивающих видео на&nbsp;нашем <a href="{{ config.SERVICE_YOUTUBE_URL }}">YouTube&nbsp;канале</a></div>
   </div>
 </div>

web/src/js/modules/popup.js

@@ -21,25 +21,25 @@ $(document).ready(function () {
         Cookies.remove(EMAIL_CAPTURED_COOKIE);
     }
 
-    $('.js-popup-capture-email .js-popup-close').on('click', function(e){
-        e.preventDefault();
-        hidePopup().then(() => {
-            popup = prevPopup;
-        });
-        $('.modal-video').remove();
-    });
-
-    const captureEmail = (callback) => {
+    const captureEmail = show => {
+        return new Promise((resolve, reject) => {
             prevPopup = popup;
             popup = $('.js-popup-capture-email');
-        const $modalVideo = $('.modal-video');
             const $email = popup.find('.capture-email__email');
             const $error = popup.find('.capture-email__error');
-        $modalVideo.css('opacity', 0);
             $email.val('');
             $error.text('');
             popup.css('z-index', 1000001);
+            if(show){
                 showPopup();
+            }
+            $('.js-popup-capture-email .js-popup-close').unbind('click').on('click', e => {
+                e.preventDefault();
+                hidePopup().then(() => {
+                    popup = prevPopup;
+                    reject();
+                });
+            });
             popup.find('.capture-email__btn').unbind('click').click(e => {
                 e.preventDefault();
                 const email = $email.val();
@@ -51,13 +51,18 @@ $(document).ready(function () {
                     $error.text('Пожалуйста, укажите коректную почту');
                     return;
                 }
-            api.captureEmail(email);
+                const $loader = popup.find('.loading-loader');
+                const $btn = popup.find('.capture-email__btn');
+                $loader.show();
+                $btn.prop('disabled', true);
+                api.captureEmail(email).then(resolve).catch(reject).finally(() => {
+                    $btn.prop('disabled', false);
+                    $loader.hide();
                     hidePopup().then(() => {
                         popup = prevPopup;
                     });
-            $modalVideo.css('opacity', 1);
-            Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
-            callback();
+                });
+            });
         });
     };
 
@@ -94,27 +99,42 @@ $(document).ready(function () {
         if(window.LIL_STORE.user.id || ! $(e.target).data('trialLesson') || Cookies.get(EMAIL_CAPTURED_COOKIE)){
             return;
         }
-        let stopVideo = () => {};
-        let playVideo = () => {};
         const channel = $(e.target).data('channel');
-        const $iframe = $('.modal-video-movie-wrap iframe');
         const player = e.detail.player;
         let timeout = null;
         const interval = 1000 * 10;// 60 * 2; // 2 min
-        if(channel == 'youtube'){
         const pauseVideo = () => {
+            timeout = setTimeout(() => {
                 clearTimeout(timeout);
-                if(! $('.modal-video').length){
+                const $modalVideo = $('.modal-video');
+                if(! $modalVideo.length){
                     return;
                 }
+                if(channel == 'youtube'){
                     player.pauseVideo();
-                captureEmail(() => {
+                }
+                else if(channel == 'vimeo'){
+                    player.pause();
+                }
+                $modalVideo.css('opacity', 0);
+                captureEmail(true).then(() => {
+                    $modalVideo.css('opacity', 1);
+                    Cookies.set(EMAIL_CAPTURED_COOKIE, 1);
+                    if(channel == 'youtube'){
                         player.playVideo();
+                    }
+                    else if(channel == 'vimeo'){
+                        player.play();
+                    }
+                }).catch(() => {
+                    $('.modal-video').remove();
                 });
+            }, interval);
         }
+        if(channel == 'youtube'){
             window.onYTPlayerStateChange = (event) => {
                 if(event.data == YT.PlayerState.PLAYING && ! timeout){
-                    timeout = setTimeout(pauseVideo, interval);
+                    pauseVideo();
                 }
                 if(event.data == YT.PlayerState.ENDED && timeout){
                     clearTimeout(timeout);
@@ -123,19 +143,9 @@ $(document).ready(function () {
             player.addEventListener('onStateChange', 'onYTPlayerStateChange');
         }
         else if (channel == 'vimeo'){
-            const pauseVideo = () => {
-                clearTimeout(timeout);
-                if(! $('.modal-video').length){
-                    return;
-                }
-                player.pause();
-                captureEmail(() => {
-                    player.play();
-                });
-            }
             player.on('play', () => {
                 if(! timeout){
-                    timeout = setTimeout(pauseVideo, interval);
+                    pauseVideo();
                 }
             })
             player.on('ended', () => {
@@ -156,7 +166,6 @@ $(document).ready(function () {
         e.stopPropagation();
 
         popup = $(data);
-        showPopup();
 
         if(data === '.js-popup-buy') {
             popup.data('date-start', $this.data('date-start') || '');
@@ -260,6 +269,8 @@ $(document).ready(function () {
                 window.location.href = `/gift-certificate/${code}/get`;
             });
         }
+
+        showPopup();
     });
 
     $('.js-popup-close').on('click', function(e){

web/src/sass/_common.sass

@@ -2413,11 +2413,12 @@ a.grey-link
   &.visible &__wrap
     transform: scale(1)
 
-.main-video
-  margin-top: -140px
+.main-video-preview
   z-index: 10
   position: relative
   box-shadow: 0 10px 100px rgba(0,0,0,0.20)
+  width: 640px
+  height: 360px
 
 .head
   display: flex