view libervia/pages/_browser/slideshow.py @ 1346:cda5537c71d6

browser (photos/album): videos integrations: videos can now be added to an album, the alternative media player is then used to display them. Slides options are used to remove pagination and slidebar from slideshow (they don't play well with media player), and video are reset when its slide is exited.
author Goffi <goffi@goffi.org>
date Tue, 25 Aug 2020 08:31:56 +0200
parents 1df0d1b28b83
children dbd573b0bc9c
line wrap: on
line source

from browser import document, window, html, timer, DOMNode
from js_modules.swiper import Swiper
from template import Template


class SlideShow:

    def __init__(self):
        self.swiper = None
        slideshow_tpl = Template('photo/slideshow.html')
        self.slideshow_elt = slideshow_tpl.get_elt()
        self.comments_count_elt = self.slideshow_elt.select_one('.comments__count')
        self.wrapper = self.slideshow_elt.select_one(".swiper-wrapper")
        self.hidden_elts = {}
        self.control_hidden = False
        self.click_timer = None
        self._class_to_remove = set()
        self._exit_callback = None

    @property
    def current_slide(self):
        if self.swiper is None:
            return None
        try:
            return DOMNode(self.swiper.slides[self.swiper.realIndex])
        # getting missing item in JS arrays returns KeyError
        except KeyError:
            return None

    @property
    def current_item(self):
        """item attached to the current slide, if any"""
        current = self.current_slide
        if current is None:
            return None
        try:
            return current.js._item
        except AttributeError:
            return None

    @property
    def current_options(self):
        """options attached to the current slide, if any"""
        current = self.current_slide
        if current is None:
            return None
        try:
            return current.js._options
        except AttributeError:
            return None

    @property
    def index(self):
        if self.swiper is None:
            return None
        return self.swiper.realIndex

    @index.setter
    def index(self, idx):
        if self.swiper is not None:
            self.swiper.slideTo(idx, 0)

    def attach(self):
        # we hide other elts to avoid scrolling issues
        for elt in document.body.children:
            self.hidden_elts[elt] = elt.style.display
            elt.style.display = "none"
        document.body <= self.slideshow_elt
        self.swiper = Swiper.new(
            ".swiper-container",
            {
                # default 0 value results in lot of accidental swipes, notably when media
                # player is used
                "threshold": 10,
                "pagination": {
                    "el": ".swiper-pagination",
                },
                "navigation": {
                    "nextEl": ".swiper-button-next",
                    "prevEl": ".swiper-button-prev",
                },
                "scrollbar": {
                    "el": ".swiper-scrollbar",
                },
                "grabCursor": True,
                "keyboard": {
                    "enabled": True,
                    "onlyInViewport": False,
                },
                "mousewheel": True,
                "zoom": {
                    "maxRatio": 15,
                    "toggle": False,
                },
            }
        )
        window.addEventListener("keydown", self.on_key_down, True)
        self.slideshow_elt.select_one(".click_to_close").bind("click", self.on_close)
        self.slideshow_elt.select_one(".click_to_comment").bind("click", self.on_comment)
        # we don't use swiper.on for "click" and "dblclick" (or "doubleTap" in swiper
        # terms) because it breaks event propagation management, which cause trouble with
        # media player
        self.slideshow_elt.bind("click", self.on_click)
        self.slideshow_elt.bind("dblclick", self.on_dblclick)
        self.swiper.on("slideChange", self.on_slide_change)
        self.on_slide_change(self.swiper)
        self.fullscreen(True)

    def add_slide(self, elt, item_data=None, options=None):
        slide_elt = html.DIV(Class="swiper-slide")
        zoom_cont_elt = html.DIV(Class="swiper-zoom-container")
        slide_elt <= zoom_cont_elt
        zoom_cont_elt <= elt
        slide_elt._item = item_data
        if options is not None:
            slide_elt._options = options
        self.swiper.appendSlide([slide_elt])
        self.swiper.update()

    def quit(self):
        # we unhide
        for elt, display in self.hidden_elts.items():
            elt.style.display = display
        self.hidden_elts.clear()
        self.slideshow_elt.remove()
        self.slideshow_elt = None
        self.swiper.destroy(True, True)
        self.swiper = None

    def fullscreen(self, active=None):
        """Activate/desactivate fullscreen

        @param acvite: can be:
            - True to activate
            - False to desactivate
            - Auto to switch fullscreen mode
        """
        try:
            fullscreen_elt = document.fullscreenElement
            request_fullscreen = self.slideshow_elt.requestFullscreen
        except AttributeError:
            print("fullscreen is not available on this browser")
        else:
            if active is None:
                active = fullscreen_elt == None
            if active:
                request_fullscreen()
            else:
                try:
                    document.exitFullscreen()
                except AttributeError:
                    print("exitFullscreen not available on this browser")

    def on_key_down(self, evt):
        if evt.key == 'Escape':
            self.quit()
        else:
            return
        evt.preventDefault()

    def on_slide_change(self, swiper):
        if self._exit_callback is not None:
            self._exit_callback()
            self._exit_callback = None
        item = self.current_item
        if item is not None:
            comments_count = item.get('comments_count')
            self.comments_count_elt.text = comments_count or ''

        for cls in self._class_to_remove:
            self.slideshow_elt.classList.remove(cls)

        self._class_to_remove.clear()

        options = self.current_options
        if options is not None:
            for flag in options.get('flags', []):
                cls = f"flag_{flag.lower()}"
                self.slideshow_elt.classList.add(cls)
                self._class_to_remove.add(cls)
            self._exit_callback = options.get("exit_callback", None)

    def toggle_hide_controls(self, evt):
        self.click_timer = None
        if 'click_to_hide' in evt.target.classList:
            # we don't want to hide controls when a control is clicked
            return
        for elt in self.slideshow_elt.select('.click_to_hide'):
            elt.style.display = '' if self.control_hidden else 'none'
        self.control_hidden = not self.control_hidden

    def on_click(self, evt):
        evt.stopPropagation()
        evt.preventDefault()
        # we use a timer so double tap can cancel the click
        # this avoid double tap side effect
        if self.click_timer is None:
            self.click_timer = timer.set_timeout(
                lambda: self.toggle_hide_controls(evt), 300)

    def on_dblclick(self, evt):
        evt.stopPropagation()
        evt.preventDefault()
        if self.click_timer is not None:
            timer.clear_timeout(self.click_timer)
            self.click_timer = None
        if self.swiper.zoom.scale != 1:
            self.swiper.zoom.toggle()
        else:
            # "in" is reserved in Python, so we call it using dict syntax
            self.swiper.zoom["in"]()

    def on_close(self, evt):
        evt.stopPropagation()
        evt.preventDefault()
        self.quit()

    def on_comment_close(self, evt):
        side_panel = self.comments_panel_elt.select_one('.comments_side_panel')
        side_panel.classList.remove('open')
        side_panel.bind("transitionend", lambda evt: self.comments_panel_elt.remove())

    def on_comments_panel_click(self, evt):
        # we stop stop propagation to avoid the closing of the panel
        evt.stopPropagation()

    def on_comment(self, evt):
        item = self.current_item
        if item is None:
            return
        comments_panel_tpl = Template('blog/comments_panel.html')
        try:
            comments = item['comments']['items']
        except KeyError:
            comments = []
        self.comments_panel_elt = comments_panel_tpl.get_elt({
            "comments": comments,
            "comments_service": item['comments_service'],
            "comments_node": item['comments_node'],

        })
        self.slideshow_elt <= self.comments_panel_elt
        side_panel = self.comments_panel_elt.select_one('.comments_side_panel')
        timer.set_timeout(lambda: side_panel.classList.add("open"), 0)
        for close_elt in self.comments_panel_elt.select('.click_to_close'):
            close_elt.bind("click", self.on_comment_close)
        side_panel.bind("click", self.on_comments_panel_click)