@use 'sass:math';
@function svg-url($svg, $size, $viewBox, $fillRule) {
$svg: '';
$encoded: '';
$slice: 2000;
$index: 0;
$loops: ceil(math.div(str-length($svg), $slice));
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
$chunk: str-replace($chunk, '"', "'");
$chunk: str-replace($chunk, '%', '%25');
$chunk: str-replace($chunk, '&', '%26');
$chunk: str-replace($chunk, '#', '%23');
$chunk: str-replace($chunk, '{', '%7B');
$chunk: str-replace($chunk, '}', '%7D');
$chunk: str-replace($chunk, '<', '%3C');
$chunk: str-replace($chunk, '>', '%3E');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url('data:image/svg+xml,#{$encoded}');
}
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@return if(
$index,
str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace),
$string
);
}
@function icon($icon-name, $color: '#000', $size: '36', $viewBox: '0 0 1024 1024', $fillRule: 'nonzero') {
$icons: (
maximize:
' ',
minimize:
'',
play:
'',
pause:
'',
stop:
'',
volumeBase:
'',
volumeWaves:
'',
volumeWave:
'',
volumeMute:
'',
close:
'',
settings:
'',
check:
'',
language:
'',
quality:
'',
captions:
'',
speed:
'',
speedDown:
'',
speedUp:
'',
audio:
'',
arrowDown:
'',
startOver:
'',
seekEnd:
'',
rewind:
'',
rewind5:
'',
rewind10:
'',
forward:
'',
forward5:
'',
forward10:
'',
vrStereoOn:
'',
vrStereoOff:
'',
chromecast:
'',
next:
'',
prev:
'',
pictureInPictureStart:
'',
pictureInPictureStop:
'',
qualityHd:
'',
qualityHdActive:
'',
quality4k:
'',
quality4kActive:
'',
quality8k:
'',
quality8kActive:
'',
closedCaptionsOn:
' ',
closedCaptionsOff:
' ',
advancedAudioDescriptionOn:
'',
advancedAudioDescriptionOff:
'',
qualityButton:
'',
);
$icon: map-get($icons, $icon-name);
$svg-encoded-icon: svg-url($icon, $size, $viewBox, $fillRule);
@return $svg-encoded-icon;
}
.icon {
display: inline-block;
font-size: 0;
width: 100%;
height: 100%;
margin: 0 auto;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.7));
}
.badge-icon:after {
content: '';
position: absolute;
height: 16px;
width: 16px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
// Dynamic Colored Icons
.player {
--playkit-icon-vr-stereo-full-url: #{icon(vrStereoOn, $brand-color)};
--playkit-icon-chromecast-url: #{icon(chromecast, $brand-color)};
--playkit-icon-quality-HD-active-url: #{icon(qualityHdActive, '#fff', '16', '0 0 16 16')};
--playkit-icon-quality-4K-active-url: #{icon(quality4kActive, '#fff', '16', '0 0 16 16')};
--playkit-icon-quality-8K-active-url: #{icon(quality8kActive, '#fff', '16', '0 0 16 16')};
}
.icon-maximize {
background-image: icon(maximize, '#fff');
}
.icon-minimize {
background-image: icon(minimize, '#fff');
}
.icon-play {
background-image: icon(play, '#fff');
}
.icon-pause {
background-image: icon(pause, '#fff');
}
.icon-stop {
background-image: icon(stop, '#fff', '32', '0 0 32 32');
}
.icon-volume-base {
background-image: icon(volumeBase, '#fff');
}
.icon-volume-waves {
background-image: icon(volumeWaves, '#fff');
}
.icon-volume-wave {
background-image: icon(volumeWave, '#fff');
}
.icon-volume-mute {
background-image: icon(volumeMute, '#fff');
}
.icon-close {
background-image: icon(close, '#fff');
}
.icon-settings {
background-image: icon(settings, '#fff');
}
.icon-check {
background-image: icon(check, '#fff');
}
.icon-check-active {
background-image: icon(check, '#fff');
}
.icon-language {
background-image: icon(language, '#fff');
}
.icon-quality {
background-image: icon(quality, '#fff');
}
.icon-captions {
background-image: icon(captions, '#fff');
}
.icon-speed {
background-image: icon(speed, '#fff');
}
.icon-speed-down {
background-image: icon(speedDown, '#fff');
}
.icon-speed-up {
background-image: icon(speedUp, '#fff');
}
.icon-audio {
background-image: icon(audio, '#fff');
}
.icon-arrow-down {
background-image: icon(arrowDown, '#fff');
}
.icon-start-over {
background-image: icon(startOver, '#fff');
}
.icon-seek-end {
background-image: icon(seekEnd, '#fff');
}
.icon-rewind {
background-image: icon(rewind, '#fff', '32', '0 0 32 32');
}
.icon-rewind-5 {
background-image: icon(rewind5, '#fff', '32', '0 0 32 32');
}
.icon-rewind-10 {
background-image: icon(rewind10, '#fff');
}
.icon-forward {
background-image: icon(forward, '#fff', '32', '0 0 32 32');
}
.icon-forward-5 {
background-image: icon(forward5, '#fff', '32', '0 0 32 32');
}
.icon-forward-10 {
background-image: icon(forward10, '#fff');
}
.icon-vr-stereo {
background-image: icon(vrStereoOff, '#fff', '32', '0 0 32 32');
}
.icon-vr-stereo-full {
background-image: icon(vrStereoOn, '#fff', '32', '0 0 32 32');
}
.icon-chromecast {
background-image: icon(chromecast, '#fff');
}
.icon-chromecast-brand {
background-image: var(--playkit-icon-chromecast-url);
}
.icon-next {
background-image: icon(next, '#fff');
}
.icon-prev {
background-image: icon(prev, '#fff');
}
.icon-picture-in-picture-start {
background-image: icon(pictureInPictureStart, '#fff');
}
.icon-picture-in-picture-stop {
background-image: icon(pictureInPictureStop, '#fff');
}
.icon-advanced-audio-description {
background-image: icon(advancedAudioDescriptionOff, '#fff', '32', '0 0 32 32');
}
.icon-advanced-audio-description-active {
background-image: icon(advancedAudioDescriptionOn, '#fff', '32', '0 0 32 32');
}
.icon-advanced-audio-description-disabled {
background-image: icon(advancedAudioDescriptionOff, '#fff', '32', '0 0 32 32');
}
.icon-advanced-audio-description-disabled-dropdown {
background-image: icon(advancedAudioDescriptionOff, '#c4c4c4', '32', '0 0 32 32');
}
.icon-quality-hd {
&:after {
background-image: icon(qualityHd, '#fff', '16', '0 0 16 16');
}
}
.icon-quality-hd-active {
&:after {
background-image: var(--playkit-icon-quality-HD-active-url);
}
}
.icon-quality-4k {
&:after {
background-image: icon(quality4k, '#fff', '16', '0 0 16 16');
}
}
.icon-quality-4k-active {
&:after {
background-image: var(--playkit-icon-quality-4K-active-url);
}
}
.icon-quality-8k {
&:after {
background-image: icon(quality8k, '#fff', '16', '0 0 16 16');
}
}
.icon-quality-8k-active {
&:after {
background-image: var(--playkit-icon-quality-8K-active-url);
}
}
.icon-closed-captions-on {
background-image: icon(closedCaptionsOn, '#fff', '36', '0 0 32 32');
}
.icon-closed-captions-off {
background-image: icon(closedCaptionsOff, '#fff', '36', '0 0 32 32');
}
.icon-quality-button {
background-image: icon(qualityButton, '#fff', '32', '0 0 32 32');
}