[{"__symbolic":"module","version":3,"metadata":{"MediaPlayerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"media-player","template":"<div #video  class=\"media-player\" (mousemove)=\"showTools()\" (tap)=\"changeMediaState();showTools()\" (dblclick)=\"toggleFullScreen()\">\n        <video #player autoplay x-webkit-airplay=\"allow\"><source [src]=\"src\" type=\"video/mp4\"/></video>\n        <div class=\"status-buttons\" *ngIf=\"!media_playing\">\n            <div class=\"status\" *ngIf=\"!is_end\">\n                <div class=\"icon\"><i class=\"material-icons\">play_arrow</i></div>\n            </div>\n            <div class=\"status\" *ngIf=\"is_end\">\n                <div class=\"icon\"><i class=\"material-icons\">replay</i></div>\n            </div>\n        </div>\n        <div class=\"video-controls\" [@controls]=\"controls_active ? 'show' : 'hide'\">\n            <div class=\"time now\">{{current_time}}</div>\n            <div class=\"time end\">{{duration}}</div>\n            <div class=\"progress-bar\">\n                <div class=\"progress\" [style.width]=\"progress + '%'\" [style.background-color]=\"color\"></div>\n            </div>\n        </div>\n    </div>\n    ","styles":[".media-player{background-color:rgba(0,0,0,0.54);height:100%;min-height:10em;min-width:16em;overflow:hidden;position:relative;width:100%}video{height:100%;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:100%}.status-buttons{display:-ms-flexbox;display:flex;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.status-buttons .status{background-color:#fff;border-radius:100%;box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.2);cursor:pointer;font-size:3.5em;height:1.25em;padding-left:.15em;width:1.25em}.status-buttons .status:hover{background-color:#2196f3}.status-buttons .status:active{box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.54)}.video-controls{background-color:rgba(0,0,0,0.87);bottom:0;color:#fff;display:-ms-flexbox;display:flex;height:2em;left:0;padding:.25em .5em;position:absolute;right:0}.video-controls .time{-ms-flex-positive:1;flex-grow:1}.video-controls .time.end{text-align:right}.video-controls .progress-bar{background-color:#fff;height:.2em;left:0;position:absolute;right:0;top:0}.video-controls .progress-bar .progress{bottom:0;left:0;position:absolute;top:0}\n    "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["controls",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"bottom":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"bottom":"-1.8em"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["show <=> hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.4s ease-out"]}]}]]}]}]}],"members":{"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"time":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"length":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"video":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["video"]}]}],"player":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["player"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"changeMediaState":[{"__symbolic":"method"}],"playMedia":[{"__symbolic":"method"}],"stopMedia":[{"__symbolic":"method"}],"restartMedia":[{"__symbolic":"method"}],"showTools":[{"__symbolic":"method"}],"updateTimer":[{"__symbolic":"method"}],"setDuration":[{"__symbolic":"method"}],"toggleFullScreen":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MediaPlayerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"media-player","template":"<div #video  class=\"media-player\" (mousemove)=\"showTools()\" (tap)=\"changeMediaState();showTools()\" (dblclick)=\"toggleFullScreen()\">\n        <video #player autoplay x-webkit-airplay=\"allow\"><source [src]=\"src\" type=\"video/mp4\"/></video>\n        <div class=\"status-buttons\" *ngIf=\"!media_playing\">\n            <div class=\"status\" *ngIf=\"!is_end\">\n                <div class=\"icon\"><i class=\"material-icons\">play_arrow</i></div>\n            </div>\n            <div class=\"status\" *ngIf=\"is_end\">\n                <div class=\"icon\"><i class=\"material-icons\">replay</i></div>\n            </div>\n        </div>\n        <div class=\"video-controls\" [@controls]=\"controls_active ? 'show' : 'hide'\">\n            <div class=\"time now\">{{current_time}}</div>\n            <div class=\"time end\">{{duration}}</div>\n            <div class=\"progress-bar\">\n                <div class=\"progress\" [style.width]=\"progress + '%'\" [style.background-color]=\"color\"></div>\n            </div>\n        </div>\n    </div>\n    ","styles":[".media-player{background-color:rgba(0,0,0,0.54);height:100%;min-height:10em;min-width:16em;overflow:hidden;position:relative;width:100%}video{height:100%;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:100%}.status-buttons{display:-ms-flexbox;display:flex;left:50%;position:absolute;top:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.status-buttons .status{background-color:#fff;border-radius:100%;box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.2);cursor:pointer;font-size:3.5em;height:1.25em;padding-left:.15em;width:1.25em}.status-buttons .status:hover{background-color:#2196f3}.status-buttons .status:active{box-shadow:0 0.1em 0.2em 0.1em rgba(0,0,0,0.54)}.video-controls{background-color:rgba(0,0,0,0.87);bottom:0;color:#fff;display:-ms-flexbox;display:flex;height:2em;left:0;padding:.25em .5em;position:absolute;right:0}.video-controls .time{-ms-flex-positive:1;flex-grow:1}.video-controls .time.end{text-align:right}.video-controls .progress-bar{background-color:#fff;height:.2em;left:0;position:absolute;right:0;top:0}.video-controls .progress-bar .progress{bottom:0;left:0;position:absolute;top:0}\n    "],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"},"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"trigger"},"arguments":["controls",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"bottom":"0"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"state"},"arguments":["hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"style"},"arguments":[{"bottom":"-1.8em"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"transition"},"arguments":["show <=> hide",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"animate"},"arguments":["0.4s ease-out"]}]}]]}]}]}],"members":{"src":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"time":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"length":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"video":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["video"]}]}],"player":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["player"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"@angular/core","name":"NgZone"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"change":[{"__symbolic":"method"}],"changeMediaState":[{"__symbolic":"method"}],"playMedia":[{"__symbolic":"method"}],"stopMedia":[{"__symbolic":"method"}],"restartMedia":[{"__symbolic":"method"}],"showTools":[{"__symbolic":"method"}],"updateTimer":[{"__symbolic":"method"}],"setDuration":[{"__symbolic":"method"}],"toggleFullScreen":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}]}}}}]