@import "inc/bootstrap";

$playerActionSize: 2.2rem;
$playerActionSpace: 1rem;
$playerBackground: black();
$playerBorder: $darkBar;
$playerText: #999;
$playerIcon: $darkBarIcon;
$playerTextOverlay: white();
$playerSliderBorder: $uiGeneralContentBorder;
$playerSliderBackground: $uiGeneralContentBg;
$playerSliderColor: $darkBar;
$playerSliderHandle: whiten($playerSliderColor, .4);
$playerSliderHightlight: whiten($playerSliderColor, .2);
$controlsHeight: 36px;

.mediaplayer {
    position: relative;
    @include simple-border($playerBorder);
    @include border-radius(2);
    background: $playerBackground;
    max-width: 100%;
    min-height: $controlsHeight;
    min-width: 200px;
    direction: ltr;
    padding: 2px;

    &.youtube {
        .player {
            width: 100%;
            height: 0px;
            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos
        }
    }
    .icon-sound:before {
        @include icon-audio();
    }
    .icon-mute:before {
        @include icon-result-nok();
    }

    .error {
        display: none;
    }

    .player {
        position: relative;
        height: calc(100% - #{$controlsHeight});
        width: 100%;

        iframe {
            pointer-events: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%
        }

        .media:not(.youtube) {
            display: block;
            width: 100%;
            height: auto;
            max-height: 100%;
        }

        .player-overlay {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 1;
            background: transparent none;
            a.action {
                 span.icon {
                    font-family: 'tao' !important;
                }
            }
        }

        .action {
            position: absolute;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            margin-top: -32px;
            text-align: center;
            text-decoration: none;
            display: none;
            @include font-size(64);
            color: $playerTextOverlay;

            .icon {
                @include border-radius(10);
                padding: 6px 12px;
                background-color: $playerBackground;
                opacity: 0.2;

                &:hover {
                    opacity: 0.6;
                }
            }

            &.reload {
                width: 100%;
                font-size: 50px;
                line-height: 30px;

                &:hover {
                    .icon {
                        opacity: 1;
                        font-family: 'tao' !important;
                    }
                }

                .icon {
                    opacity: 0.6;
                    background: none;
                    font-family: 'tao' !important;
                }
                .message {
                    font-size: 20px;
                }

                .icon, .message {
                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
                }
            }
        }
    }

    .controls {
        background-color: $playerBackground;
        color: $playerTextOverlay;
        visibility: hidden;
        position: relative;
        padding: 5px;
        display: table;
        table-layout: fixed;
        width: 100%;
        border-top: 1px solid $playerBorder;
        height: $controlsHeight;

        .bar {
            display: table-row;
        }
        .control {
            display: table-cell;
        }

        .actions {
            position: relative;
            @include transition(all, 0.1,ease-in-out);

            .action {
                text-align: center;
                line-height: $playerActionSize;
                width: $playerActionSize;
                height: $playerActionSize;
                text-decoration: none;
                color: $playerIcon;
                @include transition(all, 0.2, ease-in-out);

                &:hover {
                    opacity: 1;
                }

                .icon {
                    line-height: $playerActionSize;
                    font-family: 'tao' !important;
                }
            }

            .play {
                opacity: 0.7;
                border-right: 1px solid $playerBorder;
            }

            .mute {
                opacity: 0.8;
                border-left: 1px solid $playerBorder;
            }
        }

        .slider {
            cursor: pointer;
            @include simple-border($playerSliderBorder);
            @include border-radius(10);
            @include transition(all, 0.1, ease-in-out);
            background: $playerSliderBackground;

            .noUi-background {
                @include border-radius(10);
                background: $playerSliderBackground;
            }
            &.noUi-connect, .noUi-connect {
                @include border-radius(10);
                background: $playerSliderColor;
            }

            .noUi-handle {
                width: 11px;
                height: 11px;
                @include simple-border($playerSliderBorder);
                @include border-radius(10);
                background: $playerSliderHandle;
            }
            .noUi-handle:hover {
                background: $playerSliderHightlight;
            }
            .noUi-handle:after {
                display: none;
            }

            &.noUi-horizontal {
                height: 9px;

                .noUi-handle {
                    top: -2px;
                }
            }

            &.noUi-vertical {
                width: 9px;

                .noUi-handle {
                    left: -2px;
                }
            }
        }

        .infos {
            cursor: default;

            margin: 0 $playerActionSpace;
            line-height: $playerActionSize;

            color: $playerText;
            @include font-size(10);
            font-weight: bold;

            [data-control="time-end"]:before {
                content: ' / ';
            }
        }

        .timer {
            width: 8rem;
            text-align: center;
        }

        .seek {
            position: relative;
            height: 1rem;
            margin-top: 5px;
            padding-left: $playerActionSpace;
        }

        .playback {
            margin-right: $playerActionSpace;
            width: $playerActionSize;
        }

        .sound {
            width: $playerActionSize;
            height: $playerActionSize;

            .action {
                position: relative;
                z-index: 1001;
            }
            .volume {
                cursor: default;
                position: absolute;
                z-index: 1000;
                background-color: $playerBackground;
                margin: 1px 2px;
                padding: 10px 0;
                width: 100%;
                height: 0;
                top: 0;
                left: -1px;
                opacity : 0;
                text-align: center;
                border: solid 1px $playerBorder;
                pointer-events: none;
                overflow: hidden;
                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);

                &.up, &.down {
                    height: 120px;
                    opacity : 1;
                    pointer-events: auto;
                    .slider {
                        display: inline-block;
                        opacity : 1;
                        transition: opacity 50ms linear 200ms;
                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);
                    }
                }
                &.up {
                    top: -127px;
                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);
                }
                &.down {
                    top: 30px;
                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);
                }
            }

            .slider {
                opacity : 0;
                display: none;
                .noUi-handle {
                    cursor: pointer;
                    width: 9px;
                    height: 9px;
                }

                &.noUi-horizontal {
                    width: 50px;
                    height: 7px;
                }

                &.noUi-vertical {
                    width: 7px;
                    height: 100px;
                }
            }
        }

        [data-control="play"] {
            display: none;
        }
        [data-control="pause"] {
            display: none;
        }

        [data-control="mute"] {
            display: inline-block;
        }
        [data-control="unmute"] {
            display: none;
        }
    }

    &.video, &.youtube {
        .sound {
            .volume {
                width: 2.8rem;
                bottom: $playerActionSize;
                right: 0;
            }
        }
    }

    &.audio {
        .sound {
            .volume {
                height: $playerActionSize;
                right: $playerActionSize;
                bottom: 0;
            }
        }

        &.stalled {
            .player {
                .player-overlay {
                    [data-control="reload"] {
                        display: flex;
                        align-items: center;
                        background-color: #000;
                        margin: 0;
                        flex-wrap: wrap;
                        padding: 5px 5px 5px 50px;
                        text-align: left;
                        line-height: 2.3rem;
                        &.reload {
                            width: calc(100% + 2px);
                            font-size: 20px;
                            line-height: 20px;
                            min-height: 36px;

                            .icon {
                                text-shadow: none;
                                position: absolute;
                                left: 0;
                                font-size: 2rem;
                                font-weight: bold;
                            }

                            .message {
                                text-shadow: none;
                                font-size: 1.3rem;
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        }
    }

    &.ready {
        .controls {
            visibility: visible;
        }

        &.paused.canplay {
            .player-overlay {
                cursor: pointer;
                font-family: 'tao' !important;
                a.action {
                    span.icon {
                        font-family: 'tao' !important;
                    }
                }
            }

            &:not(.audio) {
                .player:hover {
                    [data-control="play"] {
                        display: inline-block;
                    }
                }
            }

            &.youtube.ended, &:not(.preview) {
                .player:hover {
                    [data-control="play"] {
                        display: none;
                    }
                }
            }
        }

        &.playing.canpause {
            .player-overlay {
                cursor: pointer;
                .action {
                    .icon {
                        font-family: 'tao' !important;
                    }
                }
            }

            &:not(.audio) {
                .player:hover {
                    [data-control="pause"] {
                        display: inline-block;
                    }
                }
            }
        }
    }

    &.playing.canpause {
        .action {
            .icon {
                font-family: 'tao' !important;
            }
        }
        .controls {
            [data-control="pause"] {
                display: inline-block;
            }
        }
    }

    &.paused.canplay {
        .action {
            .icon {
                font-family: 'tao' !important;
            }
        }
        .controls {
            [data-control="play"] {
                display: inline-block;
            }
            [data-control="pause"] {
                display: none;
            }
        }
    }

    &.muted {
        .controls {
            [data-control="mute"] {
                display: none;
            }
            [data-control="unmute"] {
                display: inline-block;
            }
        }
    }

    &.nogui {
        .player {
            iframe {
                pointer-events: inherit;
            }
        }
        .player-overlay {
            display: none !important;
        }
        .controls {
            display: none !important;
        }
    }

    &.error:not(.stalled) {
        .media, .controls {
            display: none;
        }

        .error {
            display: table;
            text-align: center;
            width: 100%;
            height: 100%;

            .message {
                color: $error;
                display: table-cell;
                vertical-align: middle;
            }
        }
    }

    &.loading:not(.stalled)::before {
        @keyframes spinner {
            to { transform: rotate(360deg); }
        }

        content: '';
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        margin-left: -15px;
        border-radius: 50%;
        border: 1px solid #ccc;
        border-top-color: #07d;
        animation: spinner .6s linear infinite;
    }

    &.stalled {
        .video {
            filter: blur(4px);
            opacity: 0.4;
        }
        .player-overlay {
            [data-control="reload"] {
                display: inline-block;
            }
        }
    }

    .transcription {
        background-color: white;
        color: black;
        font-size: 14px;
        line-height: 1.5;
        max-height: 60px;
        margin-bottom: 2px;
        overflow-y: scroll;
        &.hidden {
            display: none;
        }
    }

    &.video:not(.preview):not(.error) {
        .player-overlay {
            [data-control="start"] {
                display: inline-block;
            }
        }
    }
}