@jxstjh/jhvideo/src/style/mobile.less

HTML5 jhvideo base on MPEG2-TS Stream Player

.@{prefix-cls} {
    &-wrapper.fullscreen {
        .@{prefix-cls}-video-box .@{prefix-cls}-toolbar .@{prefix-cls}-tool-item {
            padding-left: .2em;
            padding-right: .2em;
        }

        .@{prefix-cls}-video-box .@{prefix-cls}-toolbar.left.mobile .tool-item svg.@{prefix-cls}-svgicon {
            width: 2em;
            height: 2em;
        }
    }
}

.@{prefix-cls} {
    &-wrapper {

        // prefix-cls
        .@{prefix-cls}-video-box {
            .@{prefix-cls}-toolbar.footer.mobile {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-content: center;
                align-items: center;

                .fullScreen.@{prefix-cls}-tool-item {
                    order: 9;
                    margin-left: auto;
                }

                .@{prefix-cls}-timeline-slider {
                    height: 100%;
                    flex-grow: 1;
                    // background-color: #000;
                    // opacity: .5;
                }
            }
        }



        .@{prefix-cls}-mobile-btn-wrapper {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9;
            display: none;
            pointer-events: none;

            .@{prefix-cls}-btn {
                width: 2em;
                height: 2em;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -1em;
                margin-left: -1em;
            }

            .@{prefix-cls}-play-button {
                pointer-events: fill;
                cursor: pointer;

                &:hover {
                    background-color: @hover-color;
                }

                &.playing {
                    transform: rotate(0deg);
                    clip-path: polygon(10% 0%, 10% 100%, 35% 100%, 35% 0%, 60% 0%, 60% 100%, 85% 100%, 85% 0%)
                }

                width: 100%;
                height: 100%;
                display:inline-block;
                vertical-align: middle;
                background-color: @white-color;
                transform-origin: center center;
                transition: all .2s ease-in;
                transform: rotate(0deg);
                clip-path: polygon(0% 0%, 0% 100%, 50% 75%, 50% 75%, 50% 75%, 50% 75%, 100% 50%, 100% 50%);
            }
        }


        &.pause:not(.seeking) {
            .@{prefix-cls}-mobile-btn-wrapper {
                display: block;
                z-index: 99;
            }
        }
    }

    &-ptz-controller {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        -webkit-touch-callout: none;
        /* iOS Safari */

        -webkit-user-select: none;
        /* Chrome/Safari/Opera */

        -khtml-user-select: none;
        /* Konqueror */

        -moz-user-select: none;
        /* Firefox */

        -ms-user-select: none;
        /* Internet Explorer/Edge */

        user-select: none;
        /* Non-prefixed version, currently

        not supported by any browser */
    }

    &-ptz-toolbox {
        flex-grow: 1;
        box-shadow: 2px 2px 0px #EEEEEE;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;

        .toolbox-btn {
            box-sizing: border-box;
            width: 4em;
            height: 4em;
            padding: 1.25em;
            border-radius: 50%;
            background-image: url('data:image/png;base64,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');
            background-size: 100% 100%;
            box-shadow: 0px 0px 0px 4px #eee;

            &.vod {
                width: 5em;
                height: 5em;
                padding: 1.5em;

                svg.icon {
                    fill: @primary-color;
                }
            }

            svg.icon {
                fill: #666;
                width: 100%;
                height: 100%;
            }

            &:hover {
                svg.icon {
                    fill: @primary-color;
                }
            }
        }
    }

    &-ptz-joystick {
        flex-grow: 4;
        display: flex;
        position: relative;
        flex-direction: row;

        .nipple.jvideo {
            .front {
                svg.icon {
                    fill: #C9C9C9;
                    width: -webkit-fit-content;
                    height: auto;
                }

                &[data-dir='dir:up'] {
                    [data-dir="up"] {
                        svg.icon {
                            fill: @primary-color;
                        }
                    }
                }

                &[data-dir='dir:down'] {
                    [data-dir="down"] {
                        svg.icon {
                            fill: @primary-color;
                        }
                    }
                }

                &[data-dir='dir:left'] {
                    [data-dir="left"] {
                        svg.icon {
                            fill: @primary-color;
                        }
                    }
                }

                &[data-dir='dir:right'] {
                    [data-dir="right"] {
                        svg.icon {
                            fill: @primary-color;
                        }
                    }
                }
            }
        }
    }

}

.fullscreen {
    .@{prefix-cls}-video-box.show-tools {
        .@{prefix-cls}-toolbar.left.mobile {
            right: 0em;
        }
    }

    .@{prefix-cls}-video-box {
        &.show-tools {
            .@{prefix-cls}-toolbar.joystick {
                z-index: 9;
                width: 120px;
                height: 120px;
            }
        }
    }
}

.@{prefix-cls}-video-box {
    .@{prefix-cls}-toolbar.joystick {
        background: transparent;
        width: 0;
        height: 0;
        overflow: hidden;
        bottom: 3em;
        left: 1em;
        position: absolute;
        z-index: -1;

        .back {
            &[data-dir="dir:up"] {
                box-shadow: 0px -4px 2px 0px @primary-color;
            }

            &[data-dir="dir:down"] {
                box-shadow: 0px 4px 2px 0px @primary-color;
            }

            &[data-dir="dir:left"] {
                box-shadow: -4px 0px 2px 0px @primary-color;
            }

            &[data-dir="dir:right"] {
                box-shadow: 4px 0px 2px 0px @primary-color;
            }
        }
    }
}