playable
Version:
Video player based on HTML5Video
203 lines (185 loc) • 1.82 MB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define("Playable", [], factory);
else if(typeof exports === 'object')
exports["Playable"] = factory();
else
root["Playable"] = factory();
})(window, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./with-hls.ts");
/******/ })
/************************************************************************/
/******/ ({
/***/ "../node_modules/classnames/index.js":
/*!*******************************************!*\
!*** ../node_modules/classnames/index.js ***!
\*******************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
Copyright (c) 2018 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */
(function () {
'use strict';
var hasOwn = {}.hasOwnProperty;
function classNames() {
var classes = [];
for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;
var argType = typeof arg;
if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg)) {
if (arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
}
} else if (argType === 'object') {
if (arg.toString === Object.prototype.toString) {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
} else {
classes.push(arg.toString());
}
}
}
return classes.join(' ');
}
if ( true && module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else if (true) {
// register as 'classnames', consistent with npm package name
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () {
return classNames;
}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
} else {}
}());
/***/ }),
/***/ "../node_modules/css-loader/dist/cjs.js?!../node_modules/postcss-loader/lib/index.js?!../node_modules/sass-loader/lib/loader.js?!./modules/root-container/root-container.scss":
/*!******************************************************************************************************************************************************************************************************!*\
!*** ../node_modules/css-loader/dist/cjs.js??ref--9-1!../node_modules/postcss-loader/lib??ref--9-2!../node_modules/sass-loader/lib/loader.js??ref--9-3!./modules/root-container/root-container.scss ***!
\******************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../node_modules/css-loader/dist/runtime/api.js */ "../node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(true);
// Module
exports.push([module.i, "/**\n * The challenge here to support \"playable queries\" and \"direction\" at the same time and allow mixins like:\n * @include query(max-width-550())\n * @include query(max-width-550(), ltr())\n * @include query(max-width-550(), rtl())\n */\n.modules-root-container-root-container__controlButton__Iw8mx {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 0;\n cursor: pointer;\n -webkit-transition-duration: .2s;\n transition-duration: .2s;\n -webkit-transition-property: opacity;\n transition-property: opacity;\n opacity: 1;\n border: 0;\n border-radius: 0;\n outline: none;\n background-color: transparent;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n .modules-root-container-root-container__controlButton__Iw8mx:hover {\n opacity: .7; }\n\n.modules-root-container-root-container__hidden__UaLKv {\n visibility: hidden !important;\n width: 0 !important;\n min-width: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n opacity: 0 !important; }\n\n.modules-root-container-root-container__container__3waGy {\n font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, \\\\30e1\\30a4\\30ea\\30aa, meiryo, \\\\30d2\\30e9\\30ae\\30ce\\89d2\\30b4 pro w3, hiragino kaku gothic pro;\n position: relative;\n z-index: 0;\n display: block;\n overflow: hidden;\n height: inherit;\n outline: none;\n /**\n * 1. Change the font styles in all browsers.\n * 2. Show the overflow in IE.\n * 3. Remove the margin in Firefox and Safari.\n * 4. Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 5. Correct the inability to style clickable types in iOS and Safari.\n */\n /**\n * Remove the inner border and padding in Firefox.\n */\n /**\n * Restore the focus styles unset by the previous rule.\n */ }\n .modules-root-container-root-container__container__3waGy button {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n overflow: visible;\n /* 2 */\n margin: 0;\n /* 3 */\n text-transform: none;\n /* 4 */\n -webkit-appearance: button;\n /* 5 */ }\n .modules-root-container-root-container__container__3waGy button::-moz-focus-inner {\n padding: 0;\n border-style: none; }\n .modules-root-container-root-container__container__3waGy button:-moz-focusring {\n outline: 1px dotted ButtonText; }\n\n[data-playable-hook='player-container'].modules-root-container-root-container__container__3waGy [data-playable-component],\n[data-playable-hook='player-container'].modules-root-container-root-container__container__3waGy [data-playable-component] *,\n[data-playable-hook='player-container'].modules-root-container-root-container__container__3waGy [data-playable-component] *:before,\n[data-playable-hook='player-container'].modules-root-container-root-container__container__3waGy [data-playable-component] *:after {\n -webkit-box-sizing: content-box !important;\n box-sizing: content-box !important;\n outline: none !important; }\n\n.modules-root-container-root-container__fillAllSpace__3xRxA,\n.modules-root-container-root-container__fullScreen__3te3h {\n width: 100% !important;\n min-width: 100% !important;\n height: 100% !important;\n min-height: 100% !important; }\n\n[data-playable-focus-source='key'] [data-playable-hook='player-container'] button.focus-within, [data-playable-focus-source='key'] [data-playable-hook='player-container'] input.focus-within, [data-playable-focus-source='key'] [data-playable-hook='player-container'] img.focus-within, [data-playable-focus-source='script']\n[data-playable-hook='player-container'] button.focus-within, [data-playable-focus-source='script']\n[data-playable-hook='player-container'] input.focus-within, [data-playable-focus-source='script']\n[data-playable-hook='player-container'] img.focus-within {\n -webkit-box-shadow: 0 0 0 2px rgba(56, 153, 236, 0.8);\n box-shadow: 0 0 0 2px rgba(56, 153, 236, 0.8); }\n", "",{"version":3,"sources":["/Users/oleksiim/projects/playable/src/modules/ui/conditions.scss","root-container.scss","/Users/oleksiim/projects/playable/src/modules/ui/shared.scss","/Users/oleksiim/projects/playable/src/modules/root-container/root-container.scss","/Users/oleksiim/projects/playable/src/modules/root-container/normalize/_button.scss","/Users/oleksiim/projects/playable/src/modules/root-container/normalize/_universal.scss"],"names":[],"mappings":"AAAA;;;;;ECKE;ACHF;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EAEA,UAAA;EAEA,eAAA;EACA,gCAAA;UAAA,wBAAA;EACA,oCAAA;EAAA,4BAAA;EAEA,UAAA;EACA,SAAA;EACA,gBAAA;EACA,aAAA;EACA,6BAAA;EAEA,wBAAA;MAAA,qBAAA;UAAA,uBAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA,EAAmB;EAhBrB;IAmBI,WAAA,EAAW;;AAiBf;EAZE,6BAAA;EAEA,mBAAA;EACA,uBAAA;EACA,oBAAA;EACA,wBAAA;EACA,oBAAA;EACA,qBAAA;EAEA,qBAAA,EAAqB;;ACjCvB;EACE,yNAAA;EAKA,kBAAA;EACA,UAAA;EAEA,cAAA;EACA,gBAAA;EAEA,eAAA;EAEA,aAAA;ECdF;;;;;;EHoDE;EG9BF;;EHiCE;EGvBF;;EH0BE,EGxBC;EDlCH;ICSE,oBAAA;IAAsB,MAAA;IACtB,eAAA;IAAiB,MAAA;IACjB,iBAAA;IAAmB,MAAA;IAEnB,iBAAA;IAAmB,MAAA;IAEnB,SAAA;IAAW,MAAA;IAEX,oBAAA;IAAsB,MAAA;IAEtB,0BAAA;IAA4B,MAAA,EAAO;EDnBrC;IC2BE,UAAA;IAEA,kBAAA,EAAkB;ED7BpB;ICqCE,8BAAA,EAA8B;;ADmChC;;;;EEtEE,0CAAA;UAAA,kCAAA;EAEA,wBAAA,EAAwB;;AFmB1B;;EAEE,sBAAA;EACA,0BAAA;EACA,uBAAA;EACA,2BAAA,EAA2B;;AAG7B;;;;EAOM,qDAAA;UAAA,6CAAA,EAA4C","file":"root-container.scss","sourcesContent":["/**\n * The challenge here to support \"playable queries\" and \"direction\" at the same time and allow mixins like:\n * @include query(max-width-550())\n * @include query(max-width-550(), ltr())\n * @include query(max-width-550(), rtl())\n */\n\n@function max-width-query($value) {\n @return '[data-playable-max-width~=\"#{$value}\"]';\n}\n\n@function direction-query($direction) {\n @return '[data-playable-dir=\"#{$direction}\"]';\n}\n\n@mixin query($mixins...) {\n $query: '';\n\n @each $mixin in $mixins {\n $query: $query + $mixin;\n }\n\n [data-playable-hook='player-container']#{$query} & {\n @content;\n }\n}\n\n@function in-full-screen() {\n @return '[data-playable-in-full-screen=\"true\"]';\n}\n\n@function max-width-550() {\n @return max-width-query(550px);\n}\n\n@function max-width-400() {\n @return max-width-query(400px);\n}\n\n@function max-width-350() {\n @return max-width-query(350px);\n}\n\n@function max-width-300() {\n @return max-width-query(300px);\n}\n\n@function max-width-280() {\n @return max-width-query(280px);\n}\n\n@function ltr() {\n @return direction-query('ltr');\n}\n\n@function rtl() {\n @return direction-query('rtl');\n}\n","/**\n * The challenge here to support \"playable queries\" and \"direction\" at the same time and allow mixins like:\n * @include query(max-width-550())\n * @include query(max-width-550(), ltr())\n * @include query(max-width-550(), rtl())\n */\n.controlButton {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 0;\n cursor: pointer;\n -webkit-transition-duration: .2s;\n transition-duration: .2s;\n -webkit-transition-property: opacity;\n transition-property: opacity;\n opacity: 1;\n border: 0;\n border-radius: 0;\n outline: none;\n background-color: transparent;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n .controlButton:hover {\n opacity: .7; }\n\n.hidden {\n visibility: hidden !important;\n width: 0 !important;\n min-width: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n opacity: 0 !important; }\n\n.container {\n font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, \\\\30e1\\30a4\\30ea\\30aa, meiryo, \\\\30d2\\30e9\\30ae\\30ce\\89d2\\30b4 pro w3, hiragino kaku gothic pro;\n position: relative;\n z-index: 0;\n display: block;\n overflow: hidden;\n height: inherit;\n outline: none;\n /**\n * 1. Change the font styles in all browsers.\n * 2. Show the overflow in IE.\n * 3. Remove the margin in Firefox and Safari.\n * 4. Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 5. Correct the inability to style clickable types in iOS and Safari.\n */\n /**\n * Remove the inner border and padding in Firefox.\n */\n /**\n * Restore the focus styles unset by the previous rule.\n */ }\n .container button {\n font-family: inherit;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n overflow: visible;\n /* 2 */\n margin: 0;\n /* 3 */\n text-transform: none;\n /* 4 */\n -webkit-appearance: button;\n /* 5 */ }\n .container button::-moz-focus-inner {\n padding: 0;\n border-style: none; }\n .container button:-moz-focusring {\n outline: 1px dotted ButtonText; }\n\n[data-playable-hook='player-container'].container [data-playable-component],\n[data-playable-hook='player-container'].container [data-playable-component] *,\n[data-playable-hook='player-container'].container [data-playable-component] *:before,\n[data-playable-hook='player-container'].container [data-playable-component] *:after {\n -webkit-box-sizing: content-box !important;\n box-sizing: content-box !important;\n outline: none !important; }\n\n.fillAllSpace,\n.fullScreen {\n width: 100% !important;\n min-width: 100% !important;\n height: 100% !important;\n min-height: 100% !important; }\n\n:global [data-playable-focus-source='key'] [data-playable-hook='player-container'] button.focus-within,\n:global [data-playable-focus-source='key'] [data-playable-hook='player-container'] input.focus-within,\n:global [data-playable-focus-source='key'] [data-playable-hook='player-container'] img.focus-within,\n:global [data-playable-focus-source='script']\n[data-playable-hook='player-container'] button.focus-within,\n:global [data-playable-focus-source='script']\n[data-playable-hook='player-container'] input.focus-within,\n:global [data-playable-focus-source='script']\n[data-playable-hook='player-container'] img.focus-within {\n -webkit-box-shadow: 0 0 0 2px rgba(56, 153, 236, 0.8);\n box-shadow: 0 0 0 2px rgba(56, 153, 236, 0.8); }\n","@import 'conditions';\n\n.controlButton {\n display: flex;\n\n padding: 0;\n\n cursor: pointer;\n transition-duration: .2s;\n transition-property: opacity;\n\n opacity: 1;\n border: 0;\n border-radius: 0;\n outline: none;\n background-color: transparent;\n\n justify-content: center;\n align-items: center;\n\n &:hover {\n opacity: .7;\n }\n}\n\n@mixin hidden() {\n visibility: hidden !important;\n\n width: 0 !important;\n min-width: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n\n opacity: 0 !important;\n}\n\n.hidden {\n @include hidden();\n}\n","@import '../ui/shared';\n\n.container {\n font-family: HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh,\n HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial,\n \\\\30e1\\30a4\\30ea\\30aa, meiryo, \\\\30d2\\30e9\\30ae\\30ce\\89d2\\30b4 pro w3,\n hiragino kaku gothic pro;\n\n position: relative;\n z-index: 0;\n\n display: block;\n overflow: hidden;\n\n height: inherit;\n\n outline: none;\n\n @import './normalize/button';\n}\n\n[data-playable-hook='player-container'].container [data-playable-component] {\n @import './normalize/universal';\n}\n\n.fillAllSpace,\n.fullScreen {\n width: 100% !important;\n min-width: 100% !important;\n height: 100% !important;\n min-height: 100% !important;\n}\n\n:global {\n [data-playable-focus-source='key'] [data-playable-hook='player-container'],\n [data-playable-focus-source='script']\n [data-playable-hook='player-container'] {\n button.focus-within,\n input.focus-within,\n img.focus-within {\n box-shadow: 0 0 0 2px rgba(56, 153, 236, .8);\n }\n }\n}\n","// https://github.com/necolas/normalize.css/blob/8.0.0/normalize.css#L147-L215\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Show the overflow in IE.\n * 3. Remove the margin in Firefox and Safari.\n * 4. Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 5. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n\n overflow: visible; /* 2 */\n\n margin: 0; /* 3 */\n\n text-transform: none; /* 4 */\n\n -webkit-appearance: button; /* 5 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner {\n padding: 0;\n\n border-style: none;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n","&,\n*,\n*:before,\n*:after {\n box-sizing: content-box !important;\n\n outline: none !important;\n}\n"]}]);
// Exports
exports.locals = {
"controlButton": "modules-root-container-root-container__controlButton__Iw8mx",
"hidden": "modules-root-container-root-container__hidden__UaLKv",
"container": "modules-root-container-root-container__container__3waGy",
"fillAllSpace": "modules-root-container-root-container__fillAllSpace__3xRxA",
"fullScreen": "modules-root-container-root-container__fullScreen__3te3h"
};
module.exports = exports;
/***/ }),
/***/ "../node_modules/css-loader/dist/cjs.js?!../node_modules/postcss-loader/lib/index.js?!../node_modules/sass-loader/lib/loader.js?!./modules/ui/bottom-block/bottom-block.scss":
/*!*****************************************************************************************************************************************************************************************************!*\
!*** ../node_modules/css-loader/dist/cjs.js??ref--9-1!../node_modules/postcss-loader/lib??ref--9-2!../node_modules/sass-loader/lib/loader.js??ref--9-3!./modules/ui/bottom-block/bottom-block.scss ***!
\*****************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
// Imports
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "../node_modules/css-loader/dist/runtime/api.js");
exports = ___CSS_LOADER_API_IMPORT___(true);
// Module
exports.push([module.i, "/**\n * The challenge here to support \"playable queries\" and \"direction\" at the same time and allow mixins like:\n * @include query(max-width-550())\n * @include query(max-width-550(), ltr())\n * @include query(max-width-550(), rtl())\n */\n.modules-ui-bottom-block-bottom-block__controlButton__3CTD7 {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 0;\n cursor: pointer;\n -webkit-transition-duration: .2s;\n transition-duration: .2s;\n -webkit-transition-property: opacity;\n transition-property: opacity;\n opacity: 1;\n border: 0;\n border-radius: 0;\n outline: none;\n background-color: transparent;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n .modules-ui-bottom-block-bottom-block__controlButton__3CTD7:hover {\n opacity: .7; }\n\n.modules-ui-bottom-block-bottom-block__hidden__1zRVY {\n visibility: hidden !important;\n width: 0 !important;\n min-width: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n opacity: 0 !important; }\n\n.modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y {\n z-index: 60;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y::-moz-focus-inner {\n border: 0; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__activated__ChTSn .modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5,\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__activated__ChTSn .modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2,\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__activated__ChTSn .modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH,\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__activated__ChTSn .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D,\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__activated__ChTSn .modules-ui-bottom-block-bottom-block__background__2_78O {\n opacity: 1; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__showLogoAlways__l6YY7 .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n opacity: 1; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__logoHidden__z2wa2 .modules-ui-bottom-block-bottom-block__fullScreenContainer__2Me_2 {\n margin-right: 14px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__logoHidden__z2wa2 .modules-ui-bottom-block-bottom-block__fullScreenContainer__2Me_2 {\n margin-right: 7px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__logoHidden__z2wa2 .modules-ui-bottom-block-bottom-block__fullScreenContainer__2Me_2 {\n margin-right: 25px; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__logoHidden__z2wa2 .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__playControlHidden__3j6MK .modules-ui-bottom-block-bottom-block__playContainer__RqBlN {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__timeControlHidden__1OLQf .modules-ui-bottom-block-bottom-block__timeContainer__2eFKA {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__volumeControlHidden__15ipO .modules-ui-bottom-block-bottom-block__volumeContainer__1LiYX {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__fullScreenControlHidden__1T2Wg .modules-ui-bottom-block-bottom-block__fullScreenContainer__2Me_2 {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__progressControlHidden__iuNZS .modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5 {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__downloadButtonHidden__EeALr .modules-ui-bottom-block-bottom-block__downloadContainer__XDZ2d {\n display: none; }\n .modules-ui-bottom-block-bottom-block__bottomBlock__2o0_Y.modules-ui-bottom-block-bottom-block__pictureInPictureButtonHidden__3LOLP .modules-ui-bottom-block-bottom-block__pictureInPictureContainer__2EBGQ {\n display: none; }\n\n.modules-ui-bottom-block-bottom-block__elementsContainer__Qt5Hh {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n -webkit-box-flex: 2;\n -ms-flex-positive: 2;\n flex-grow: 2; }\n\n.modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5 {\n position: relative;\n top: 2px;\n padding: 0 20px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5 {\n top: 3px;\n padding: 0 30px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5 {\n padding: 0 15px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"280px\"] .modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5 {\n padding: 0 12px; }\n\n.modules-ui-bottom-block-bottom-block__progressBarContainer__1xiN5,\n.modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2,\n.modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH,\n.modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n -webkit-transition: opacity .2s;\n transition: opacity .2s;\n opacity: 0; }\n\n.modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH,\n.modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2 {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n max-width: 100%;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end; }\n\n.modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH,\n.modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2,\n.modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n height: 54px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH, [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"]\n .modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2, [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"]\n .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n height: 80px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH, [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"]\n .modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2, [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"]\n .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n height: 42px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"350px\"] .modules-ui-bottom-block-bottom-block__controlsContainerRight__20yDH, [data-playable-hook='player-container'][data-playable-max-width~=\"350px\"]\n .modules-ui-bottom-block-bottom-block__controlsContainerLeft__1fBE2, [data-playable-hook='player-container'][data-playable-max-width~=\"350px\"]\n .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n height: 36px; }\n\n.modules-ui-bottom-block-bottom-block__playContainer__RqBlN {\n margin-right: 8px;\n margin-left: 13px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__playContainer__RqBlN {\n margin-right: 20px;\n margin-left: 20px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .modules-ui-bottom-block-bottom-block__playContainer__RqBlN {\n margin-left: 7px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"280px\"] .modules-ui-bottom-block-bottom-block__playContainer__RqBlN {\n margin-left: 4px; }\n\n.modules-ui-bottom-block-bottom-block__volumeContainer__1LiYX {\n margin-right: 13px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__volumeContainer__1LiYX {\n margin-right: 20px; }\n\n.modules-ui-bottom-block-bottom-block__timeContainer__2eFKA {\n margin-right: 18px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__timeContainer__2eFKA {\n margin-right: 30px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"400px\"] .modules-ui-bottom-block-bottom-block__timeContainer__2eFKA {\n display: none; }\n\n.modules-ui-bottom-block-bottom-block__downloadContainer__XDZ2d {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__downloadContainer__XDZ2d {\n margin-right: 18px; }\n\n.modules-ui-bottom-block-bottom-block__fullScreenContainer__2Me_2 {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__fullScreenContainer__2Me_2 {\n margin-right: 18px; }\n\n.modules-ui-bottom-block-bottom-block__pictureInPictureContainer__2EBGQ {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__pictureInPictureContainer__2EBGQ {\n margin-right: 18px; }\n\n.modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-right: 14px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n margin-right: 9px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n margin-right: 23px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"280px\"] .modules-ui-bottom-block-bottom-block__logoContainer__3wT0D {\n margin-right: 12px; }\n\n.modules-ui-bottom-block-bottom-block__additionalButton__ESbZr {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .modules-ui-bottom-block-bottom-block__additionalButton__ESbZr {\n margin-right: 18px; }\n\n.modules-ui-bottom-block-bottom-block__background__2_78O {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 181px;\n -webkit-transition: opacity .2s;\n transition: opacity .2s;\n pointer-events: none;\n opacity: 0;\n background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(24%, rgba(0, 0, 0, 0.03)), color-stop(50%, rgba(0, 0, 0, 0.15)), color-stop(75%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.4)));\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03) 24%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.4));\n background-size: 100% 182px; }\n", "",{"version":3,"sources":["/Users/oleksiim/projects/playable/src/modules/ui/conditions.scss","bottom-block.scss","/Users/oleksiim/projects/playable/src/modules/ui/shared.scss","/Users/oleksiim/projects/playable/src/modules/ui/bottom-block/bottom-block.scss"],"names":[],"mappings":"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","file":"bottom-block.scss","sourcesContent":["/**\n * The challenge here to support \"playable queries\" and \"direction\" at the same time and allow mixins like:\n * @include query(max-width-550())\n * @include query(max-width-550(), ltr())\n * @include query(max-width-550(), rtl())\n */\n\n@function max-width-query($value) {\n @return '[data-playable-max-width~=\"#{$value}\"]';\n}\n\n@function direction-query($direction) {\n @return '[data-playable-dir=\"#{$direction}\"]';\n}\n\n@mixin query($mixins...) {\n $query: '';\n\n @each $mixin in $mixins {\n $query: $query + $mixin;\n }\n\n [data-playable-hook='player-container']#{$query} & {\n @content;\n }\n}\n\n@function in-full-screen() {\n @return '[data-playable-in-full-screen=\"true\"]';\n}\n\n@function max-width-550() {\n @return max-width-query(550px);\n}\n\n@function max-width-400() {\n @return max-width-query(400px);\n}\n\n@function max-width-350() {\n @return max-width-query(350px);\n}\n\n@function max-width-300() {\n @return max-width-query(300px);\n}\n\n@function max-width-280() {\n @return max-width-query(280px);\n}\n\n@function ltr() {\n @return direction-query('ltr');\n}\n\n@function rtl() {\n @return direction-query('rtl');\n}\n","/**\n * The challenge here to support \"playable queries\" and \"direction\" at the same time and allow mixins like:\n * @include query(max-width-550())\n * @include query(max-width-550(), ltr())\n * @include query(max-width-550(), rtl())\n */\n.controlButton {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n padding: 0;\n cursor: pointer;\n -webkit-transition-duration: .2s;\n transition-duration: .2s;\n -webkit-transition-property: opacity;\n transition-property: opacity;\n opacity: 1;\n border: 0;\n border-radius: 0;\n outline: none;\n background-color: transparent;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n .controlButton:hover {\n opacity: .7; }\n\n.hidden {\n visibility: hidden !important;\n width: 0 !important;\n min-width: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n opacity: 0 !important; }\n\n.bottomBlock {\n z-index: 60;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column; }\n .bottomBlock::-moz-focus-inner {\n border: 0; }\n .bottomBlock.activated .progressBarContainer,\n .bottomBlock.activated .controlsContainerLeft,\n .bottomBlock.activated .controlsContainerRight,\n .bottomBlock.activated .logoContainer,\n .bottomBlock.activated .background {\n opacity: 1; }\n .bottomBlock.showLogoAlways .logoContainer {\n opacity: 1; }\n .bottomBlock.logoHidden .fullScreenContainer {\n margin-right: 14px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .bottomBlock.logoHidden .fullScreenContainer {\n margin-right: 7px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .bottomBlock.logoHidden .fullScreenContainer {\n margin-right: 25px; }\n .bottomBlock.logoHidden .logoContainer {\n display: none; }\n .bottomBlock.playControlHidden .playContainer {\n display: none; }\n .bottomBlock.timeControlHidden .timeContainer {\n display: none; }\n .bottomBlock.volumeControlHidden .volumeContainer {\n display: none; }\n .bottomBlock.fullScreenControlHidden .fullScreenContainer {\n display: none; }\n .bottomBlock.progressControlHidden .progressBarContainer {\n display: none; }\n .bottomBlock.downloadButtonHidden .downloadContainer {\n display: none; }\n .bottomBlock.pictureInPictureButtonHidden .pictureInPictureContainer {\n display: none; }\n\n.elementsContainer {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n -webkit-box-flex: 2;\n -ms-flex-positive: 2;\n flex-grow: 2; }\n\n.progressBarContainer {\n position: relative;\n top: 2px;\n padding: 0 20px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .progressBarContainer {\n top: 3px;\n padding: 0 30px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .progressBarContainer {\n padding: 0 15px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"280px\"] .progressBarContainer {\n padding: 0 12px; }\n\n.progressBarContainer,\n.controlsContainerLeft,\n.controlsContainerRight,\n.logoContainer {\n -webkit-transition: opacity .2s;\n transition: opacity .2s;\n opacity: 0; }\n\n.controlsContainerRight,\n.controlsContainerLeft {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n width: 100%;\n max-width: 100%;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center; }\n\n.controlsContainerRight {\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end; }\n\n.controlsContainerRight,\n.controlsContainerLeft,\n.logoContainer {\n height: 54px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .controlsContainerRight, [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"]\n .controlsContainerLeft, [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"]\n .logoContainer {\n height: 80px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .controlsContainerRight, [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"]\n .controlsContainerLeft, [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"]\n .logoContainer {\n height: 42px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"350px\"] .controlsContainerRight, [data-playable-hook='player-container'][data-playable-max-width~=\"350px\"]\n .controlsContainerLeft, [data-playable-hook='player-container'][data-playable-max-width~=\"350px\"]\n .logoContainer {\n height: 36px; }\n\n.playContainer {\n margin-right: 8px;\n margin-left: 13px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .playContainer {\n margin-right: 20px;\n margin-left: 20px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .playContainer {\n margin-left: 7px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"280px\"] .playContainer {\n margin-left: 4px; }\n\n.volumeContainer {\n margin-right: 13px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .volumeContainer {\n margin-right: 20px; }\n\n.timeContainer {\n margin-right: 18px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .timeContainer {\n margin-right: 30px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"400px\"] .timeContainer {\n display: none; }\n\n.downloadContainer {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .downloadContainer {\n margin-right: 18px; }\n\n.fullScreenContainer {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .fullScreenContainer {\n margin-right: 18px; }\n\n.pictureInPictureContainer {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .pictureInPictureContainer {\n margin-right: 18px; }\n\n.logoContainer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-right: 14px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"550px\"] .logoContainer {\n margin-right: 9px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .logoContainer {\n margin-right: 23px; }\n [data-playable-hook='player-container'][data-playable-max-width~=\"280px\"] .logoContainer {\n margin-right: 12px; }\n\n.additionalButton {\n margin-right: 8px; }\n [data-playable-hook='player-container'][data-playable-in-full-screen=\"true\"] .additionalButton {\n margin-right: 18px; }\n\n.background {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 181px;\n -webkit-transition: opacity .2s;\n transition: opacity .2s;\n pointer-events: none;\n opacity: 0;\n background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(24%, rgba(0, 0, 0, 0.03)), color-stop(50%, rgba(0, 0, 0, 0.15)), color-stop(75%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.4)));\n background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03) 24%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.4));\n background-size: 100% 182px; }\n","@import 'conditions';\n\n.controlButton {\n display: flex;\n\n padding: 0;\n\n cursor: pointer;\n transition-duration: .2s;\n transition-property: opacity;\n\n opacity: 1;\n border: 0;\n border-radius: 0;\n outline: none;\n background-color: transparent;\n\n justify-content: center;\n align-items: center;\n\n &:hover {\n opacity: .7;\n }\n}\n\n@mixin hidden() {\n visibility: hidden !important;\n\n width: 0 !important;\n min-width: 0 !important;\n height: 0 !important;\n min-height: 0 !important;\n margin: 0 !important;\n padding: 0 !important;\n\n opacity: 0 !important;\n}\n\n.hidden {\n @include hidden();\n}\n","@import '../shared';\n\n.bottomBlock {\n z-index: 60;\n\n display: flex;\n flex-direction: column;\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &.activated {\n .progressBarContainer,\n .controlsContainerLeft,\n .controlsContainerRight,\n .logoContainer,\n .background {\n opacity: 1;\n }\n }\n\n &.showLogoAlways {\n .logoContainer {\n opacity: 1;\n }\n }\n\n &.logoHidden {\n .fullScreenContainer {\n margin-right: 14px;\n\n @include query(max-width-550()) {\n margin-right: 7px;\n }\n @include query(in-full-screen()) {\n margin-right: 25px;\n }\n }\n .logoContainer {\n display: none;\n }\n }\n\n &.playControlHidden {\n .playContainer {\n display: none;\n }\n }\n &.timeControlHidden {\n .timeContainer {\n display: none;\n }\n }\n &.volumeControlHidden {\n .volumeContainer {\n display: none;\n }\n }\n &.fullScreenControlHidden {\n .fullScreenContainer {\n display: none;\n }\n }\n &.progressControlHidden {\n .progressBarContainer {\n display: none;\n }\n }\n &.downloadButtonHidden {\n .downloadContainer {\n display: none;\n }\n }\n &.pictureInPictureButtonHidden {\n .pictureInPictureContainer {\n display: none;\n }\n }\n}\n\n.elementsContainer {\n position: relative;\n\n display: flex;\n\n width: 100%;\n\n flex-grow: 2;\n}\n\n.progressBarContainer {\n position: relative;\n top: 2px;\n\n padding: 0 20px;\n\n @include query(in-full-screen()) {\n top: 3px;\n\n padding: 0 30px;\n }\n @include query(max-width-550()) {\n padding: 0 15px;\n }\n @include query(max-width-280()) {\n padding: 0 12px;\n }\n}\n\n.progressBarContainer,\n.controlsContainerLeft,\n.controlsContainerRight,\n.logoContainer {\n transition: opacity .2s;\n\n opacity: 0;\n}\n\n.controlsContainerRight,\n.controlsContainerLeft {\n position: relative;\n\n display: flex;\n flex: 1;\n\n width: 100%;\n max-width: 100%;\n\n align-items: center;\n}\n\n.controlsContainerRight {\n justify-content: flex-end;\n}\n\n.controlsContainerRight,\n.controlsContainerLeft,\n.logoContainer {\n height: 54px;\n\n @include query(in-full-screen()) {\n height: 80px;\n }\n @include query(max-width-550()) {\n height: 42px;\n }\n @include query(max-width-350()) {\n height: 36px;\n }\n}\n\n.playContainer {\n margin-right: 8px;\n margin-left: 13px;\n\n @include query(in-full-screen()) {\n margin-right: 20px;\n margin-left: 20px;\n }\n @include query(max-width-550()) {\n margin-left: 7px;\n }\n @include query(max-width-280()) {\n margin-left: 4px;\n }\n}\n\n.volumeContainer {\n margin-right: 13px;\n\n @include query(in-full-screen()) {\n margin-right: 20px;\n }\n}\n\n.timeContainer {\n margin-right: 18px;\n\n @include query(in-full-screen()) {\n margin-right: 30px;\n }\n @include query(max-width-400()) {\n display: none;\n }\n}\n\n.downloadContainer {\n margin-right: 8px;\n\n @include query(in-full-screen()) {\n margin-right: 18px;\n }\n}\n\n.fullScreenContainer {\n margin-right: 8px;\n\n @include query(in-full-screen()) {\n margin-right: 18px;\n //margin-left: 0;\n }\n}\n\n.pictureInPictureContainer {\n margin-right: 8px;\n\n @include query(in-full-screen()) {\n margin-right: 18px;\n }\n}\n\n.logoContainer {\n display: flex;\n\n margin-right: 14px;\n\n @include query(max-width-550()) {\n margin-right: 9px;\n }\n @include query(in-full-screen()) {\n margin-right: 23px;\n }\n @include query(max-width-280()) {\n margin-right: 12px;\n }\n}\n\n.additionalButton {\n margin-right: 8px;\n\n @include query(in-full-screen()) {\n margin-right: 18px;\