playable
Version:
Video player based on HTML5Video
7 lines • 3.9 kB
JavaScript
module.exports = {
__esModule: true,
default: function anonymous(props
) {
var out='<div class="'+(props.styles.volumeControl)+'" data-playable-hook="volume-control"> <button class="'+(props.styles.muteToggle)+' '+(props.styles.controlButton)+'" data-playable-hook="mute-button" aria-label="'+(props.texts.muteLabel)+'" type="button" tabindex="0"> <div class="'+(props.styles.volume0Icon)+' '+(props.styles.muteIcon)+'"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" preserveAspectRatio="xMidYMin slice" class="'+(props.styles.icon_small)+'" width="100%"> <path fill-rule="evenodd" class="'+(props.themeStyles.volumeSvgFill)+'" d="M 18.5 14.0476 L 16.154 16.3936 L 15.372 15.6116 L 17.718 13.2656 L 15.372 10.9196 L 16.154 10.1376 L 18.5 12.4836 L 20.846 10.1376 L 21.628 10.9196 L 19.282 13.2656 L 21.628 15.6116 L 20.846 16.3936 L 18.5 14.0476 Z M 7 9.76563 L 13 5.76563 L 13 19.7656 L 7 15.7656 L 4 15.7656 L 4 9.76563 L 7 9.76563 Z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" preserveAspectRatio="xMidYMin slice" class="'+(props.styles.icon_big)+'" width="100%"> <path fill-rule="evenodd" class="'+(props.themeStyles.volumeSvgFill)+'" d="M23.586 18.04l-2.829-2.828 1.415-1.415L25 16.626l2.828-2.83 1.415 1.416-2.829 2.828 2.829 2.828-1.415 1.415L25 19.453l-2.828 2.83-1.415-1.415 2.829-2.828zM9 13.04l7-5v19l-7-5H5v-9h4z"/> </svg> </div> <div class="'+(props.styles.volume50Icon)+'"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" preserveAspectRatio="xMidYMin slice" class="'+(props.styles.icon_small)+'" width="100%"> <path fill-rule="evenodd" class="'+(props.themeStyles.volumeSvgFill)+'" d="M 7 9.8025 L 13 5.8025 L 13 19.8025 L 7 15.8025 L 4 15.8025 L 4 9.8025 L 7 9.8025 Z M 17.243 17.4285 L 16.216 16.4025 A 4.548 4.548 0 0 0 16.216 9.9705 L 17.243 8.9435 A 6 6 0 0 1 17.243 17.4285 Z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" preserveAspectRatio="xMidYMin slice" class="'+(props.styles.icon_big)+'" width="100%"> <path class="'+(props.themeStyles.volumeSvgFill)+'" d="M9 13l7-5v19l-7-5H5v-9h4zm12.884 11.407l-1.414-1.414a7.174 7.174 0 000-10.146l1.414-1.414a9.174 9.174 0 010 12.974z" fill-rule="evenodd"/> </svg> </div> <div class="'+(props.styles.volume100Icon)+'"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" preserveAspectRatio="xMidYMin slice" class="'+(props.styles.icon_small)+'" width="100%"> <path fill-rule="evenodd" class="'+(props.themeStyles.volumeSvgFill)+'" d="M 7 9.8025 L 13 5.8025 L 13 19.8025 L 7 15.8025 L 4 15.8025 L 4 9.8025 L 7 9.8025 Z M 20.071 20.1975 L 19.047 19.1725 A 8.552 8.552 0 0 0 19.047 7.0795 L 20.071 6.0545 C 23.976 9.9605 23.976 16.2915 20.071 20.1975 Z M 17.243 17.4285 L 16.216 16.4025 A 4.548 4.548 0 0 0 16.216 9.9705 L 17.243 8.9435 A 6 6 0 0 1 17.243 17.4285 Z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" preserveAspectRatio="xMidYMin slice" class="'+(props.styles.icon_big)+'" width="100%"> <path fill-rule="evenodd" class="'+(props.themeStyles.volumeSvgFill)+'" d="M9 13.04l7-5v19l-7-5H5v-9h4zm16.897 15.794l-1.414-1.414c5.237-5.238 5.237-13.73 0-18.966l1.414-1.414c6.018 6.018 6.018 15.776 0 21.794zm-4.013-4.387l-1.414-1.414a7.174 7.174 0 000-10.146l1.414-1.414a9.174 9.174 0 010 12.974z"/> </svg> </div> </button> <div class="'+(props.styles.volumeInputBlock)+'" data-playable-hook="volume-input-block" aria-label="'+(props.texts.volumeLabel)+'" aria-valuemin="0" aria-valuenow="0" aria-valuemax="100" tabindex="0"> <div class="'+(props.styles.progressBar)+' '+(props.styles.background)+' '+(props.themeStyles.volumeProgressBackground)+'"> </div> <div class="'+(props.styles.progressBar)+' '+(props.styles.volume)+' '+(props.themeStyles.volumeProgress)+'" data-playable-hook="volume-input"> </div> <div class="'+(props.styles.hitbox)+'" data-playable-hook="volume-hitbox"> </div> </div></div>';return out;
}
};