From a86309b4af9ad8391822f628d74fc5c7d1a01974 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 11 Dec 2017 09:13:01 +0100 Subject: [PATCH] Responsive player --- .../src/assets/player/peertube-videojs-plugin.ts | 4 ++-- client/src/sass/video-js-custom.scss | 15 +++++++++++++++ 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/client/src/assets/player/peertube-videojs-plugin.ts b/client/src/assets/player/peertube-videojs-plugin.ts index add4e521e..4ba37b7d9 100644 --- a/client/src/assets/player/peertube-videojs-plugin.ts +++ b/client/src/assets/player/peertube-videojs-plugin.ts @@ -156,7 +156,7 @@ const WebTorrentButton = videojsUntyped.extend(Button, { div.className = 'vjs-webtorrent' // Hide the stats before we get the info - subDiv.style.display = 'none' + subDiv.className = 'vjs-webtorrent-hidden' this.player_.on('torrentInfo', (event, data) => { const downloadSpeed = bytes(data.downloadSpeed) @@ -171,7 +171,7 @@ const WebTorrentButton = videojsUntyped.extend(Button, { peersNumber.textContent = numPeers - subDiv.style.display = 'block' + subDiv.className = 'vjs-webtorrent-displayed' }) return div diff --git a/client/src/sass/video-js-custom.scss b/client/src/sass/video-js-custom.scss index 1200c07a5..2fcfc6203 100644 --- a/client/src/sass/video-js-custom.scss +++ b/client/src/sass/video-js-custom.scss @@ -138,6 +138,14 @@ $control-bar-height: 34px; text-align: right; padding-right: 60px; + .vjs-webtorrent-displayed { + display: block; + } + + .vjs-webtorrent-hidden { + display: none; + } + .download-speed-number, .upload-speed-number, .peers-number { font-weight: $font-semibold; } @@ -303,6 +311,12 @@ $control-bar-height: 34px; } } } + + @media screen and (max-width: 450px) { + .vjs-webtorrent-displayed { + display: none !important; + } + } } // Thanks: https://projects.lukehaas.me/css-loaders/ @@ -340,3 +354,4 @@ $control-bar-height: 34px; } } } + -- 2.41.0