diff --git a/pillar/web/nodes/routes.py b/pillar/web/nodes/routes.py index 2a36e6f3..5c796a2d 100644 --- a/pillar/web/nodes/routes.py +++ b/pillar/web/nodes/routes.py @@ -255,7 +255,7 @@ def _view_handler_asset(node, template_path, template_action, link_allowed): # TODO: move this to Pillar if f.backend == 'cdnsun': f.link = "{0}&name={1}.{2}".format(f.link, node.name, f.format) - node.video_sources = json.dumps(sources) + node.video_sources = sources node.file_variations = node_file.variations else: node.video_sources = None diff --git a/src/styles/_project.sass b/src/styles/_project.sass index 1ee6e3ed..30644ce8 100644 --- a/src/styles/_project.sass +++ b/src/styles/_project.sass @@ -1032,6 +1032,43 @@ section.node-preview &.video background-color: black + .video-dummy + min-height: 250px + img + display: block + margin: 0 auto + position: absolute + z-index: 1 + opacity: .6 + + display: flex + width: 100% + align-items: center + justify-content: center + color: white + + &-content + position: relative + z-index: 2 + display: flex + align-items: center + + &-icon + font-size: 4em + + &-text + font-size: 1.6em + span + display: block + a + display: inline-block + color: white + font-size: .8em + + em + font-style: normal + color: $color-warning + &.group, &.project background-color: $color-background @include overlay(rgba($color-background, .3), 0%, transparent, 100%) @@ -2637,7 +2674,7 @@ section.node-children .toggle margin: 0 20px -@import plugins/_flowplayer +@import plugins/_videoplayer /* Edit Project specific classes*/ diff --git a/src/styles/plugins/_flowplayer.sass b/src/styles/plugins/_flowplayer.sass deleted file mode 100644 index d957e423..00000000 --- a/src/styles/plugins/_flowplayer.sass +++ /dev/null @@ -1,1046 +0,0 @@ -$flowplayer-skin-main: $color-background-nav -$flowplayer-skin-highlight: $color-primary -$flowplayer-skin-background: $color-background-nav -$flowplayer-controls-height: 30px - -.flowplayer .fp-ui - z-index: $z-index-base + 1 !important - -.flowplayer .fp-progress.animated - &:after - width: 16px - height: 16px - border-radius: 50% - background-color: white - -.flowplayer .fp-remaining, .flowplayer .fp-duration - right: 117px !important - -.flowplayer .fp-time - text-shadow: none !important - font-family: $font-body !important - -.flowplayer .fp-fullscreen - border-radius: 999em !important - top: 15px !important - right: 15px !important - background-color: $flowplayer-skin-main !important - color: white !important - -.flowplayer .fp-endscreen - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - background-color: rgba($flowplayer-skin-background, .5) - display: flex - justify-content: center - align-items: center - opacity: 0 - transition: opacity 350ms ease-in-out - -.flowplayer.is-finished .fp-endscreen - z-index: 12 - opacity: 1 - - -.flowplayer .fp-endscreen - .watch-again - font: - size: 2em - family: $font-body - weight: 300 - color: white - cursor: pointer - transition: color 150ms ease-in-out - - i - margin-right: 5px - - &:hover - text-decoration: none - color: $color-primary - - -.flowplayer .fp-startscreen - z-index: 12 - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - background-color: transparent - display: flex - justify-content: center - align-items: center - transition: opacity 350ms ease-in-out - -.flowplayer.is-ready .fp-startscreen - opacity: 1 - -.flowplayer.is-playing .fp-startscreen, -.flowplayer.is-finished .fp-startscreen - opacity: 0 - z-index: 0 - -.is-splash.flowplayer .fp-ui, .is-paused.flowplayer .fp-ui - background: none !important - -.flowplayer.is-paused .fp-startscreen - .big-play-button - display: none - font-size: 5em !important - color: white - transition: transform 150ms ease-in-out - cursor: pointer - - &:hover - text-decoration: none - -.flowplayer.is-splash .fp-startscreen, -.flowplayer .fp-endscreen - .big-play-button - display: block - -.flowplayer .fp-startscreen - &:hover - .big-play-button - transform: scale(1.2) - -/* Loading */ -.flowplayer .fp-ui .fp-waiting - display: none !important - -.flowplayer .fp-waiting - color: white - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - margin: 0 !important - background-color: rgba($flowplayer-skin-background, .5) - - i - font-size: 3em - opacity: .3 - +position-center-translate - top: 43% - left: 46% - - * - box-shadow: none !important - -.flowplayer .fp-loading - opacity: 0 - position: absolute - top: 0 - bottom: 0 - left: 0 - right: 0 - background-color: rgba($flowplayer-skin-background, .5) - display: flex - justify-content: center - align-items: center - transition: opacity 350ms ease-in-out - font-size: 5em - color: white - pointer-events: none - - i - position: relative - padding-top: 4px - -.flowplayer.is-loading .fp-loading - opacity: 1 - z-index: 12 - -.flowplayer.is-loading .fp-startscreen - display: none - - -.flowplayer - position: relative - width: 100% - counter-increment: flowplayer - background-size: contain - background-repeat: no-repeat - background-position: center center - display: inline-block - * - font-weight: inherit - font-family: inherit - font-style: inherit - text-decoration: inherit - font-size: 100% - padding: 0 - border: 0 - margin: 0 - list-style-type: none - a:focus - outline: 0 - video - width: 100% - &.is-ipad video - -webkit-transform: translateX(-2048px) - -.is-ready.flowplayer.is-ipad video - -webkit-transform: translateX(0) - -.flowplayer - .fp-player - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - .fp-engine, .fp-ui, .fp-message - position: absolute - top: 0 - left: 0 - width: 100% - height: 100% - cursor: pointer - z-index: 1 - .fp-ui - z-index: 11 - .fp-message - display: none - text-align: center - padding-top: 5% - cursor: default - h2 - font-size: 120% - margin-bottom: 1em - p - color: #666 - font-size: 95% - .fp-title - line-height: $flowplayer-controls-height - font-weight: normal - font-family: 'myriad pro',Helvetica,Arial,sans-serif - font-size: 11px - cursor: default - color: white - width: auto - max-width: 50% - white-space: nowrap - text-overflow: ellipsis - overflow: hidden - float: left - padding: 0 20px - -.aside-time.flowplayer .fp-title - display: none !important - -.flowplayer .fp-controls - position: absolute - bottom: 0 - width: 100% - height: 0 - -.is-fullscreen.flowplayer .fp-controls - bottom: 3px - -.is-mouseover.flowplayer .fp-controls - bottom: 0 - -.flowplayer - .fp-controls, .fp-title, .fp-fullscreen, .fp-unload, .fp-close, .fp-embed, &.aside-time .fp-time - background-color: $flowplayer-skin-main - -.flowplayer - background-color: black - &.fixed-controls .fp-controls - background-color: black - .fp-timeline - background-color: rgba(lighten($flowplayer-skin-main, 10%), .15) - .fp-buffer - background-color: rgba($flowplayer-skin-highlight, .3) - .fp-progress - border-radius: 999em - background-color: $flowplayer-skin-highlight - .fp-volumeslider - border-radius: 999em - background-color: rgba($flowplayer-skin-highlight, 0.15) - .fp-volumelevel - border-radius: 999em - background-color: $flowplayer-skin-highlight - .fp-waiting - display: none - margin: 19% auto - text-align: center - * - box-shadow: 0 0 5px #333 - em - width: 1em - height: 1em - border-radius: 1em - background-color: rgba(255, 255, 255, 0.8) - display: inline-block - margin: .3em - opacity: .5 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) - p - color: #ccc - font-weight: bold - .fp-speed - font-size: 30px - background-color: #333 - background-color: rgba(51, 51, 51, 0.8) - color: #eee - margin: 0 auto - text-align: center - width: 120px - padding: .1em 0 0 - opacity: 0 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) - transition: opacity .5s - &.fp-hilite - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - .fp-help - position: absolute - top: 0 - left: -9999em - z-index: 100 - background-color: #333 - background-color: rgba(51, 51, 51, 0.9) - width: 100% - height: 100% - opacity: 0 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) - transition: opacity .2s - text-align: center - -.is-help.flowplayer .fp-help - left: 0 - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - -.flowplayer - .fp-help - .fp-help-section - margin: 3% - direction: ltr - .fp-help-basics - margin-top: 6% - p - color: #eee - margin: .5em 0 - font-size: 14px - line-height: 1.5 - display: inline-block - margin: 1% 2% - em - background: #eee - border-radius: .3em - margin-right: .4em - padding: .3em .6em - color: #333 - small - font-size: 90% - color: #aaa - .fp-close - display: block - .fp-dropdown - position: absolute - top: 5px - width: 100px - background-color: black !important - border-radius: 3px - box-sizing: border-box - margin: 0 !important - list-style-type: none !important - &:before - content: '' - display: block - position: absolute - top: -5px - left: calc(50% - 5px) - width: 0 - height: 0 - border-left: 5px solid transparent - border-right: 5px solid transparent - border-bottom: 5px solid rgba(51, 51, 51, 0.9) - li - padding: 10px !important - margin: 0 !important - color: white !important - font-size: 11px !important - list-style-type: none !important - &.active - background-color: #00a7c8 !important - cursor: default !important - &.fp-dropup - bottom: 20px - top: auto - &:before - top: auto - bottom: -5px - border-bottom: none - border-top: 5px solid rgba(51, 51, 51, 0.9) - .fp-tooltip - background-color: black - color: white - display: none - position: absolute - padding: 5px - &:before - content: '' - display: block - position: absolute - bottom: -5px - width: 0 - height: 0 - left: calc(50% - 5px) - border-left: 5px solid transparent - border-right: 5px solid transparent - border-top: 5px solid black - .fp-timeline-tooltip - bottom: 35px - .fp-timeline:hover + .fp-timeline-tooltip - display: block - -@media (max-width: 600px) - .flowplayer .fp-help p - font-size: 9px - -.is-touch.flowplayer .fp-timeline:hover + .fp-timeline-tooltip - display: none - -.flowplayer - .fp-subtitle - position: absolute - bottom: 40px - left: -99999em - z-index: 10 - text-align: center - width: 100% - opacity: 0 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) - transition: opacity .3s - p - display: inline - background-color: #333 - background-color: rgba(51, 51, 51, 0.9) - color: #eee - padding: .1em .4em - font-size: 16px - line-height: 1.6 - &:after - content: '' - clear: both - b - font-weight: bold - i - font-style: italic - u - text-decoration: underline - &.fp-active - left: 0 - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - .fp-fullscreen, .fp-unload, .fp-mute, .fp-embed, .fp-close, .fp-play, .fp-menu - font-family: 'pillar-font' !important - color: white !important - font-size: 15px !important - text-align: center !important - line-height: 30px !important - text-decoration: none !important - -.flowplayer - .fp-fullscreen:before - content: "\e842" - .fp-unload:before, .fp-close:before - content: "\e600" - .fp-mute:before - content: "\e86c" - .fp-embed:before - content: "\e603" - .fp-play:before - content: "\e851" - .fp-menu:before - content: "\e604" - .fp-flash-disabled - background: #333 - width: 390px - margin: 0 auto - position: absolute - bottom: 0 - color: white - -.is-fullscreen.flowplayer .fp-ui - background-size: auto - -.is-seeking.flowplayer .fp-ui, .is-loading.flowplayer .fp-ui - background-image: none - -.flowplayer - .fp-fullscreen, .fp-unload, .fp-close - position: absolute - top: 10px - left: auto - right: 10px - display: block - width: 30px - height: 23px - text-align: center - cursor: pointer - height: 30px - width: 30px - -.flowplayer - .fp-unload, .fp-close - display: none - .fp-play - display: none - height: 30px !important - position: absolute - bottom: 0 - left: 0 - text-align: center - -.is-playing.flowplayer .fp-play:before - content: "\f00e" - -.flowplayer .fp-menu - display: none - position: absolute - bottom: 0 - z-index: 11 - right: 10px - -.has-menu.flowplayer .fp-menu - display: block - -.flowplayer .fp-menu .fp-dropdown - z-index: 12 - display: none - left: -42.5px - line-height: auto - width: 149px - transform: none - -.flowplayer - .fp-menu.dropdown-open .fp-dropdown - display: block - &.is-ready.is-closeable - .fp-unload - display: block - .fp-embed - right: 90px - .fp-fullscreen - right: 50px - &.is-fullscreen .fp-fullscreen - display: block !important - &:before - content: "\e843" - .fp-timeline - height: 8px - position: relative - overflow: hidden - top: 11px - height: 10px - margin: 0 160px 0 55px - border-radius: 999em - -.no-brand.flowplayer .fp-timeline - margin-right: 160px - -.has-menu.no-brand.flowplayer .fp-timeline - margin-right: 187px - -.no-volume.no-brand.flowplayer .fp-timeline - margin-right: 95px - -.no-mute - &.no-brand.flowplayer .fp-timeline - margin-right: 130px - &.no-volume.no-brand.flowplayer .fp-timeline - margin-right: 55px - -.has-menu.flowplayer .fp-timeline - margin-right: 252px - -.no-volume.flowplayer .fp-timeline - margin-right: 160px - -.no-mute - &.flowplayer .fp-timeline - margin-right: 195px - &.no-volume.flowplayer .fp-timeline - margin-right: 120px - -.has-menu.no-mute.no-volume.flowplayer .fp-timeline - margin-right: 157px - - -.is-long.flowplayer .fp-timeline - margin: 0 255px 0 85px - -.no-volume.is-long.flowplayer .fp-timeline - margin-right: 180px - -.no-mute.is-long.flowplayer .fp-timeline - margin-right: 140px - -.has-menu.is-long.flowplayer .fp-timeline - margin-right: 292px - -.no-brand.is-long.flowplayer .fp-timeline - margin-right: 190px - -.no-volume.no-brand.is-long.flowplayer .fp-timeline - margin-right: 125px - -.no-mute.no-brand.is-long.flowplayer .fp-timeline - margin-right: 85px - -.has-menu.no-brand.is-long.flowplayer .fp-timeline - margin-right: 227px - -.aside-time.flowplayer .fp-timeline, .no-time.flowplayer .fp-timeline - margin: 0 190px 0 10px - -.has-menu - &.aside-time.flowplayer .fp-timeline, &.no-time.flowplayer .fp-timeline - margin-right: 227px - -.aside-time - &.no-brand.flowplayer .fp-timeline, &.no-volume.flowplayer .fp-timeline - margin-right: 115px - -.no-time.no-volume.flowplayer .fp-timeline - margin-right: 115px - -.aside-time.no-mute.flowplayer .fp-timeline, .no-time.no-mute.flowplayer .fp-timeline - margin-right: 75px - -.flowplayer - .fp-buffer, .fp-progress - position: absolute - top: 0 - left: auto - height: 100% - cursor: col-resize - .fp-buffer - transition: width .25s linear - .fp-timeline.no-animation .fp-buffer - transition: none - .fp-progress.animated - transition-timing-function: linear - transition-property: width,height - &.is-touch - .fp-timeline - overflow: visible - .fp-progress - transition: width .2s linear - box-sizing: border-box - .fp-timeline.is-dragging .fp-progress - transition: right .1s linear,border .1s linear,top .1s linear,left .1s linear - &.is-mouseover .fp-progress - &:after, &:before - content: '' - box-sizing: border-box - display: block - border-radius: 10px - position: absolute - right: -5px - &.is-mouseover - .fp-progress - &:before - width: 10px - height: 10px - &:after - height: 18px - width: 18px - top: -4px - right: -10px - border: 5px solid rgba(255, 255, 255, 0.65) - box-shadow: 1px 0 4px rgba(0, 0, 0, 0.5) - .fp-timeline.is-dragging .fp-progress:after - border: 10px solid white - border-radius: 20px - transition: inherit - top: -5px - right: -10px - .fp-volume - position: absolute - height: 6px - bottom: 12px - right: 10px - -.has-menu.flowplayer .fp-volume - right: 37px - -.flowplayer .fp-mute - position: relative - width: 30px - height: 30px - float: left - top: -12px - cursor: pointer - -.no-mute.flowplayer .fp-mute - display: none - -.flowplayer .fp-volumeslider - width: 75px - height: 6px - cursor: col-resize - float: left - -.no-volume.flowplayer .fp-volumeslider - display: none - -.flowplayer - .fp-volumelevel - height: 100% - .fp-time - text-shadow: 0 0 1px black - font-size: 11px - font-weight: normal - font-family: 'myriad pro',Helvetica,Arial,sans-serif !important - color: white - width: 100% - &.is-inverted - .fp-duration - display: none - .fp-remaining - display: inline - em - width: 35px - height: 10px - line-height: 10px - text-align: center - position: absolute - bottom: 9px - -.no-time.flowplayer .fp-time - display: none - -.is-long.flowplayer .fp-time em - width: 65px - -.flowplayer .fp-elapsed - left: 10px - -.flowplayer - .fp-remaining, .fp-duration - right: 180px - color: #eee - -.no-brand.flowplayer - .fp-remaining, .fp-duration - right: 125px - -.has-menu.no-brand.flowplayer - .fp-remaining, .fp-duration - right: 152px - -.no-volume.no-brand.flowplayer - .fp-remaining, .fp-duration - right: 50px - -.no-mute - &.no-brand.flowplayer - .fp-remaining, .fp-duration - right: 95px - &.no-volume.no-brand.flowplayer - .fp-remaining, .fp-duration - right: 10px - -.has-menu.flowplayer - .fp-remaining, .fp-duration - right: 217px - -.no-volume.flowplayer - .fp-remaining, .fp-duration - right: 115px - -.no-mute - &.flowplayer - .fp-remaining, .fp-duration - right: 160px - &.no-volume.flowplayer - .fp-remaining, .fp-duration - right: 75px - -.has-menu.no-mute.no-volume.flowplayer - .fp-remaining, .fp-duration - right: 112px - -.flowplayer - .fp-remaining - display: none - &.aside-time .fp-time - position: absolute - top: 10px - left: 10px - bottom: auto !important - width: auto - background-color: black - background-color: rgba(0, 0, 0, 0.65) - height: 30px - padding: 0 5px - border-radius: control_border_radius - line-height: 30px - text-align: center - font-size: 15px - -.no-background.flowplayer.aside-time .fp-time - background-color: transparent !important - -.flowplayer - &.aside-time .fp-time - strong, em - position: static - .fp-elapsed::after - content: ' / ' - &.is-splash, &.is-poster - cursor: pointer - &.is-poster .fp-controls, &.is-splash .fp-fullscreen, &.is-poster .fp-fullscreen, &.is-splash .fp-unload, &.is-poster .fp-unload, &.is-splash .fp-time, &.is-poster .fp-time, &.is-splash .fp-embed, &.is-poster .fp-embed, &.is-splash .fp-title, &.is-poster .fp-title, &.is-splash .fp-brand - display: none !important - &.is-poster - .fp-brand - display: none !important - .fp-engine - top: -9999em - &.is-loading - .fp-waiting - display: block - .fp-controls, .fp-time - display: none - .fp-ui - background-position: -9999em - video.fp-engine - position: absolute - top: -9999em - &.is-seeking .fp-waiting - display: block - &.is-playing - background-image: none !important - background-color: black !important - - &.hls-fix.is-finished .fp-engine - position: absolute - top: -9999em - &.is-fullscreen - top: 0 !important - left: 0 !important - border: 0 !important - margin: 0 !important - width: 100% !important - height: 100% !important - max-width: 100% !important - z-index: 99999 !important - box-shadow: 0 !important - background-image: none !important - - -.flowplayer - &.is-error - border: 1px solid #909090 - background: #fdfdfd !important - h2 - font-weight: bold - font-size: large - margin-top: 10% - .fp-message - display: block - object, video, .fp-controls, .fp-time, .fp-subtitle - display: none - &.is-ready.is-muted .fp-mute - opacity: .7 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70) - &:before - content: "\e86d" - font-family: 'pillar-font' - - &.is-mouseout .fp-controls - opacity: 0 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) - transition: opacity .15s .3s - -// .is-fullscreen.flowplayer.is-mouseout .fp-controls -// height: 3px -// bottom: 0 - -.flowplayer - &.is-mouseout - .fp-title - // overflow: hidden - .fp-timeline - margin: 0 !important - height: 0 - top: 0 - border-radius: 0 - .fp-fullscreen, .fp-unload, .fp-elapsed, .fp-remaining, .fp-duration, .fp-embed, .fp-title, .fp-volume, .fp-play, .fp-menu, .fp-brand, .fp-timeline-tooltip, &.aside-time .fp-time - opacity: 0 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) - transition: opacity .5s .3s - &.is-mouseover .fp-controls, &.fixed-controls .fp-controls, &.is-mouseover .fp-title, &.fixed-controls .fp-title - height: $flowplayer-controls-height - &.is-mouseover .fp-fullscreen, &.fixed-controls .fp-fullscreen, &.is-mouseover .fp-unload, &.fixed-controls .fp-unload, &.is-mouseover .fp-elapsed, &.fixed-controls .fp-elapsed, &.is-mouseover .fp-remaining, &.fixed-controls .fp-remaining, &.is-mouseover .fp-duration, &.fixed-controls .fp-duration, &.is-mouseover .fp-embed, &.fixed-controls .fp-embed, &.is-mouseover .fp-logo, &.fixed-controls .fp-logo, &.is-mouseover .fp-volume, &.fixed-controls .fp-volume, &.is-mouseover .fp-play, &.fixed-controls .fp-play, &.is-mouseover .fp-menu - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - &.fixed-controls - .fp-menu - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - .fp-volume - display: block - .fp-controls - bottom: ($flowplayer-controls-height * -1) - -.is-splash.flowplayer.is-mouseout.is-paused - .fp-controls - height: $flowplayer-controls-height - - .fp-fullscreen, .fp-unload, .fp-elapsed, .fp-remaining, .fp-duration, .fp-embed, .fp-title, .fp-volume, .fp-play, .fp-menu, .fp-brand, .fp-timeline-tooltip, &.aside-time .fp-time - opacity: 1 - -.is-fullscreen.flowplayer.fixed-controls .fp-controls - bottom: 0 - -.flowplayer.fixed-controls .fp-time em - bottom: -20px - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - -.is-fullscreen.flowplayer.fixed-controls .fp-time em - bottom: 10px - -.flowplayer - &.is-disabled .fp-progress - background-color: #999 - &.is-flash-disabled - background-color: #333 - object.fp-engine - z-index: 100 - .fp-flash-disabled - display: block - z-index: 101 - .fp-embed - position: absolute - top: 10px - left: auto - right: 50px - display: block - width: 30px - height: 30px - text-align: center - - -.flowplayer .fp-embed-code - position: absolute - display: none - top: 10px - right: 67px - background-color: #333 - padding: 3px 5px - border-radius: 3px - box-shadow: 0 0 3px #ccc - font-size: 12px - -.is-closeable.flowplayer .fp-embed-code - right: 99px - -.flowplayer .fp-embed-code:before - content: '' - width: 0 - height: 0 - position: absolute - top: 2px - right: -10px - border: 5px solid transparent - border-left-color: #333 - - -.flowplayer - .fp-embed-code - textarea - width: 400px - height: 16px - font-family: monaco,"courier new",verdana - color: #777 - white-space: nowrap - resize: none - overflow: hidden - border: 0 - outline: 0 - background-color: transparent - color: #ccc - label - display: block - color: #999 - &.is-embedding - .fp-embed, .fp-embed-code - display: block - opacity: 1 - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100) - &.no-time .fp-embed - left: 10px !important - -.flowplayer - &.is-live - .fp-timeline, .fp-duration, .fp-remaining - display: none - &.is-touch.is-mouseover .fp-progress:before - background-color: #00a7c8 - .fp-menu .fp-dropdown - right: -10px - left: auto - bottom: 30px - border-radius: 0 - &:before - display: none - -.flowplayer - .fp-play - width: 30px - &.aside-time .fp-time - top: 0 - left: 0 - -.no-brand.flowplayer - .fp-remaining, .fp-duration - right: 115px - -.flowplayer - .fp-fullscreen, .fp-unload, .fp-close, .fp-embed - right: 0 - top: 0 - -.flowplayer .fp-embed - right: 32px - -.flowplayer.is-closeable.is-ready - .fp-fullscreen - right: 32px - .fp-embed - right: 64px - -.flowplayer.play-button - .fp-play - display: block - .fp-elapsed - left: 27px - -.flowplayer.play-button .fp-timeline - margin-left: 72px - -.is-long.flowplayer.play-button .fp-timeline - margin-left: 102px - -.no-time.flowplayer.play-button .fp-timeline, .aside-time.flowplayer.play-button .fp-timeline - margin-left: 27px - -/* This get removed by using the key, but adding this to develop the theme under localhost */ -.flowplayer .fp-context-menu, -.flowplayer .fp-logo, .flowplayer .fp-brand - display: none !important - opacity: 0 !important - visibility: hidden !important diff --git a/src/styles/plugins/_videoplayer.sass b/src/styles/plugins/_videoplayer.sass new file mode 100644 index 00000000..c8278e34 --- /dev/null +++ b/src/styles/plugins/_videoplayer.sass @@ -0,0 +1,1273 @@ +$flowplayer-skin-main: $color-background-nav +$flowplayer-skin-highlight: $color-primary +$flowplayer-skin-background: $color-background-nav +$flowplayer-controls-height: 30px + +$videoplayer-background-color: $color-background-nav + +.video-js + .vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + .vjs-big-play-button:before, .vjs-control:before + text-align: center + + .vjs-big-play-button, .vjs-play-control + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-modal-dialog .vjs-modal-dialog-content + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + +@font-face + font-family: VideoJS + src: url("../font/1.5.1/VideoJS.eot?#iefix") format("eot") + + +@font-face + font-family: VideoJS + src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"), url(data:application/x-font-ttf;charset=utf-8;base64,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ATcuAScjBh8BHgEXDgEFMz8BFTMRIwYDJRUnAxyEzZRbCA2rgketCAEBqlRoCglxYwF+IiEOIysBAkswHQEECiQ0AgE+YyIhDiIsAQJLMB4BBQokNAE/YyIhDiIsAQJLMB4BBQokNAEBPvmD7kHhqs0s0gEnjgHJAv0FD2a9gIrADwUFAwPDAlVMZ3MF/pUHwgc1HTyWV325PgsJED+oY3G9TAc1HTyWV325PgsJED+oY3G9TAc1HTyWV325PgsJED+oY3G9UmQBZQMMR/61g/kBAAAAAAAQAMYAAQAAAAAAAQAHAAAAAQAAAAAAAgAHAAcAAQAAAAAAAwAHAA4AAQAAAAAABAAHABUAAQAAAAAABQALABwAAQAAAAAABgAHACcAAQAAAAAACgArAC4AAQAAAAAACwATAFkAAwABBAkAAQAOAGwAAwABBAkAAgAOAHoAAwABBAkAAwAOAIgAAwABBAkABAAOAJYAAwABBAkABQAWAKQAAwABBAkABgAOALoAAwABBAkACgBWAMgAAwABBAkACwAmAR5WaWRlb0pTUmVndWxhclZpZGVvSlNWaWRlb0pTVmVyc2lvbiAxLjBWaWRlb0pTR2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0Lmh0dHA6Ly9mb250ZWxsby5jb20AVgBpAGQAZQBvAEoAUwBSAGUAZwB1AGwAYQByAFYAaQBkAGUAbwBKAFMAVgBpAGQAZQBvAEoAUwBWAGUAcgBzAGkAbwBuACAAMQAuADAAVgBpAGQAZQBvAEoAUwBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAACAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4AAAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4EcGxheQtwbGF5LWNpcmNsZQVwYXVzZQt2b2x1bWUtbXV0ZQp2b2x1bWUtbG93CnZvbHVtZS1taWQLdm9sdW1lLWhpZ2gQZnVsbHNjcmVlbi1lbnRlcg9mdWxsc2NyZWVuLWV4aXQGc3F1YXJlB3NwaW5uZXIJc3VidGl0bGVzCGNhcHRpb25zCGNoYXB0ZXJzBXNoYXJlA2NvZwZjaXJjbGUOY2lyY2xlLW91dGxpbmUTY2lyY2xlLWlubmVyLWNpcmNsZQJoZAZjYW5jZWwGcmVwbGF5CGZhY2Vib29rBWdwbHVzCGxpbmtlZGluB3R3aXR0ZXIGdHVtYmxyCXBpbnRlcmVzdBFhdWRpby1kZXNjcmlwdGlvbgAAAAAA) format("truetype") + font-weight: normal + font-style: normal + + +.vjs-icon-play + font-family: VideoJS + font-weight: normal + font-style: normal + + &:before + content: '\f101' + +.video-js + .vjs-big-play-button:before, .vjs-play-control:before + content: '\f101' + +.vjs-icon-play-circle + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f102' + +.vjs-icon-pause, .video-js .vjs-play-control.vjs-playing + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing:before + content: '\f103' + +.vjs-icon-volume-mute + font-family: VideoJS + font-weight: normal + font-style: normal + +.video-js + .vjs-mute-control.vjs-vol-0, .vjs-volume-menu-button.vjs-vol-0 + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-volume-mute:before + content: '\f104' + +.video-js + .vjs-mute-control.vjs-vol-0:before, .vjs-volume-menu-button.vjs-vol-0:before + content: '\f104' + +.vjs-icon-volume-low + font-family: VideoJS + font-weight: normal + font-style: normal + +.video-js + .vjs-mute-control.vjs-vol-1, .vjs-volume-menu-button.vjs-vol-1 + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-volume-low:before + content: '\f105' + +.video-js + .vjs-mute-control.vjs-vol-1:before, .vjs-volume-menu-button.vjs-vol-1:before + content: '\f105' + +.vjs-icon-volume-mid + font-family: VideoJS + font-weight: normal + font-style: normal + +.video-js + .vjs-mute-control.vjs-vol-2, .vjs-volume-menu-button.vjs-vol-2 + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-volume-mid:before + content: '\f106' + +.video-js + .vjs-mute-control.vjs-vol-2:before, .vjs-volume-menu-button.vjs-vol-2:before + content: '\f106' + +.vjs-icon-volume-high + font-family: VideoJS + font-weight: normal + font-style: normal + +.video-js + .vjs-mute-control, .vjs-volume-menu-button + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-volume-high:before + content: '\f107' + +.video-js + .vjs-mute-control:before, .vjs-volume-menu-button:before + content: '\f107' + +.vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control:before + content: '\f108' + +.vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control:before + content: '\f109' + +.vjs-icon-square + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f10a' + +.vjs-icon-spinner + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f10b' + +.vjs-icon-subtitles, .video-js .vjs-subtitles-button + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-subtitles:before, .video-js .vjs-subtitles-button:before + content: '\f10c' + +.vjs-icon-captions, .video-js .vjs-captions-button + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-captions:before, .video-js .vjs-captions-button:before + content: '\f10d' + +.vjs-icon-chapters, .video-js .vjs-chapters-button + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-chapters:before, .video-js .vjs-chapters-button:before + content: '\f10e' + +.vjs-icon-share + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f10f' + +.vjs-icon-cog + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f110' + +.vjs-icon-circle + font-family: VideoJS + font-weight: normal + font-style: normal + +.video-js + .vjs-mouse-display, .vjs-play-progress, .vjs-volume-level + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-circle:before + content: '\f111' + +.video-js + .vjs-mouse-display:before, .vjs-play-progress:before, .vjs-volume-level:before + content: '\f111' + +.vjs-icon-circle-outline + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f112' + +.vjs-icon-circle-inner-circle + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f113' + +.vjs-icon-hd + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f114' + +.vjs-icon-cancel, .video-js .vjs-control.vjs-close-button + font-family: VideoJS + font-weight: normal + font-style: normal + +.vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button:before + content: '\f115' + +.vjs-icon-replay + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f116' + +.vjs-icon-facebook + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f117' + +.vjs-icon-gplus + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f118' + +.vjs-icon-linkedin + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f119' + +.vjs-icon-twitter + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f11a' + +.vjs-icon-tumblr + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f11b' + +.vjs-icon-pinterest + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f11c' + +.vjs-icon-audio-description + font-family: VideoJS + font-weight: normal + font-style: normal + &:before + content: '\f11d' + +.video-js + display: block + vertical-align: top + box-sizing: border-box + color: white + background-color: black + position: relative + padding: 0 + font-size: 10px + line-height: 1 + font-weight: normal + font-style: normal + font-family: Arial, Helvetica, sans-serif + -webkit-user-select: none + -moz-user-select: none + -ms-user-select: none + user-select: none + &:-moz-full-screen + position: absolute + &:-webkit-full-screen + width: 100% !important + height: 100% !important + * + box-sizing: inherit + &:before, &:after + box-sizing: inherit + ul + font-family: inherit + font-size: inherit + line-height: inherit + list-style-position: outside + margin-left: 0 + margin-right: 0 + margin-top: 0 + margin-bottom: 0 + &.vjs-fluid, &.vjs-16-9, &.vjs-4-3 + width: 100% + max-width: 100% + height: 0 + &.vjs-16-9 + padding-top: 56.25% + &.vjs-4-3 + padding-top: 75% + &.vjs-fill + width: 100% + height: 100% + .vjs-tech + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + +body.vjs-full-window + padding: 0 + margin: 0 + height: 100% + overflow-y: auto + +.vjs-full-window .video-js.vjs-fullscreen + position: fixed + overflow: hidden + z-index: 1000 + left: 0 + top: 0 + bottom: 0 + right: 0 + +.video-js.vjs-fullscreen + width: 100% !important + height: 100% !important + padding-top: 0 !important + &.vjs-user-inactive + cursor: none + +.vjs-hidden + display: none !important + +.video-js .vjs-offscreen + height: 1px + left: -9999px + position: absolute + top: 0 + width: 1px + +.vjs-lock-showing + display: block !important + opacity: 1 + visibility: visible + +.vjs-no-js + padding: 20px + color: white + background-color: black + font-size: 18px + font-family: Arial, Helvetica, sans-serif + text-align: center + width: 300px + height: 150px + margin: 0px auto + a + color: #66A8CC + &:visited + color: #66A8CC + +.video-js .vjs-big-play-button + font-size: 3em + line-height: 1.5em + height: 1.5em + width: 3em + display: block + position: absolute + padding: 0 + cursor: pointer + opacity: 1 + background-color: $videoplayer-background-color + background-color: rgba($videoplayer-background-color, .7) + -webkit-border-radius: 0.3em + -moz-border-radius: 0.3em + border-radius: 0.3em + -webkit-transition: all 0.4s + -moz-transition: all 0.4s + -o-transition: all 0.4s + transition: all 0.4s + + top: 50% + left: 50% + margin-top: -0.75em + margin-left: -1.5em + +.video-js + &:hover .vjs-big-play-button, .vjs-big-play-button:focus + outline: 0 + border-color: white + background-color: #73859f + background-color: rgba(115, 133, 159, 0.5) + -webkit-transition: all 0s + -moz-transition: all 0s + -o-transition: all 0s + transition: all 0s + +.vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button + display: none + +.video-js + button + background: none + border: none + color: inherit + display: inline-block + overflow: visible + font-size: inherit + line-height: inherit + text-transform: none + text-decoration: none + transition: none + -webkit-appearance: none + -moz-appearance: none + appearance: none + .vjs-control.vjs-close-button + cursor: pointer + height: 3em + position: absolute + right: 0 + top: 0.5em + z-index: 2 + +.vjs-menu-button + cursor: pointer + +.vjs-menu .vjs-menu-content + display: block + padding: 0 + margin: 0 + overflow: auto + +.vjs-scrubbing .vjs-menu-button:hover .vjs-menu + display: none + +.vjs-menu li + list-style: none + margin: 0 + padding: 0.2em 0 + line-height: 1.4em + font-size: 1.2em + text-align: center + text-transform: lowercase + &:focus, &:hover + outline: 0 + background-color: #73859f + background-color: rgba(115, 133, 159, 0.5) + &.vjs-selected + background-color: white + color: $videoplayer-background-color + &:focus, &:hover + background-color: white + color: $videoplayer-background-color + &.vjs-menu-title + text-align: center + text-transform: uppercase + font-size: 1em + line-height: 2em + padding: 0 + margin: 0 0 0.3em 0 + font-weight: bold + cursor: default + +.vjs-menu-button-popup .vjs-menu + display: none + position: absolute + bottom: 0 + width: 10em + left: -3em + height: 0em + margin-bottom: 1.5em + border-top-color: rgba($videoplayer-background-color, .7) + .vjs-menu-content + background-color: $videoplayer-background-color + background-color: rgba($videoplayer-background-color, .7) + position: absolute + width: 100% + bottom: 1.5em + max-height: 15em + +.vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu, .vjs-menu-button-popup .vjs-menu.vjs-lock-showing + display: block + +.video-js + .vjs-menu-button-inline + -webkit-transition: all 0.4s + -moz-transition: all 0.4s + -o-transition: all 0.4s + transition: all 0.4s + overflow: hidden + &:before + width: 2.222222222em + &:hover, &:focus, &.vjs-slider-active + width: 12em + &.vjs-no-flex .vjs-menu-button-inline + width: 12em + .vjs-menu-button-inline.vjs-slider-active + -webkit-transition: none + -moz-transition: none + -o-transition: none + transition: none + +.vjs-menu-button-inline + .vjs-menu + opacity: 0 + height: 100% + width: auto + position: absolute + left: 4em + top: 0 + padding: 0 + margin: 0 + -webkit-transition: all 0.4s + -moz-transition: all 0.4s + -o-transition: all 0.4s + transition: all 0.4s + &:hover .vjs-menu, &:focus .vjs-menu, &.vjs-slider-active .vjs-menu + display: block + opacity: 1 + +.vjs-no-flex .vjs-menu-button-inline + .vjs-menu + display: block + opacity: 1 + position: relative + width: auto + &:hover .vjs-menu, &:focus .vjs-menu, &.vjs-slider-active .vjs-menu + width: auto + +.vjs-menu-button-inline .vjs-menu-content + width: auto + height: 100% + margin: 0 + overflow: hidden + +.video-js .vjs-control-bar + display: none + width: 100% + position: absolute + bottom: 0 + left: 0 + right: 0 + height: 3.0em + background-color: rgba($videoplayer-background-color, .7) + +.vjs-has-started + .vjs-control-bar + display: -webkit-box + display: -webkit-flex + display: -ms-flexbox + display: flex + visibility: visible + opacity: 1 + -webkit-transition: visibility 0.1s, opacity 0.1s + -moz-transition: visibility 0.1s, opacity 0.1s + -o-transition: visibility 0.1s, opacity 0.1s + transition: visibility 0.1s, opacity 0.1s + &.vjs-user-inactive.vjs-playing .vjs-control-bar + visibility: hidden + opacity: 0 + -webkit-transition: visibility 1s, opacity 1s + -moz-transition: visibility 1s, opacity 1s + -o-transition: visibility 1s, opacity 1s + transition: visibility 1s, opacity 1s + +.vjs-controls-disabled .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar, .vjs-error .vjs-control-bar + display: none !important + +.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar + opacity: 1 + visibility: visible + +@media \0screen + .vjs-user-inactive.vjs-playing .vjs-control-bar :before + content: "" + +.vjs-has-started.vjs-no-flex .vjs-control-bar + display: table + +.video-js + .vjs-control + outline: none + position: relative + text-align: center + margin: 0 + padding: 0 + height: 100% + width: 4em + -webkit-box-flex: none + -moz-box-flex: none + -webkit-flex: none + -ms-flex: none + flex: none + &:before + font-size: 1.8em + line-height: 1.67 + &:focus:before, &:hover:before, &:focus + text-shadow: 0em 0em 1em white + .vjs-control-text + border: 0 + clip: rect(0 0 0 0) + height: 1px + margin: -1px + overflow: hidden + padding: 0 + position: absolute + width: 1px + +.vjs-no-flex .vjs-control + display: table-cell + vertical-align: middle + +.video-js + .vjs-custom-control-spacer + display: none + .vjs-progress-control + -webkit-box-flex: auto + -moz-box-flex: auto + -webkit-flex: auto + -ms-flex: auto + flex: auto + display: -webkit-box + display: -webkit-flex + display: -ms-flexbox + display: flex + -webkit-box-align: center + -webkit-align-items: center + -ms-flex-align: center + align-items: center + min-width: 4em + +.vjs-live .vjs-progress-control + display: none + +.video-js + .vjs-progress-holder + -webkit-box-flex: auto + -moz-box-flex: auto + -webkit-flex: auto + -ms-flex: auto + flex: auto + -webkit-transition: all 0.2s + -moz-transition: all 0.2s + -o-transition: all 0.2s + transition: all 0.2s + height: 0.3em + .vjs-progress-control:hover + .vjs-progress-holder + font-size: 1.666666666666666666em + .vjs-mouse-display:after, .vjs-play-progress:after + display: block + font-size: 0.6em + .vjs-progress-holder + .vjs-play-progress + position: absolute + display: block + height: 0.3em + margin: 0 + padding: 0 + width: 0 + left: 0 + top: 0 + .vjs-load-progress + position: absolute + display: block + height: 0.3em + margin: 0 + padding: 0 + width: 0 + left: 0 + top: 0 + div + position: absolute + display: block + height: 0.3em + margin: 0 + padding: 0 + width: 0 + left: 0 + top: 0 + .vjs-mouse-display:before + display: none + .vjs-play-progress + background-color: white + &:before + position: absolute + top: -0.333333333333333em + right: -0.5em + font-size: 0.9em + .vjs-mouse-display:after + display: none + position: absolute + top: -3.4em + right: -1.5em + font-size: 0.9em + color: black + content: attr(data-current-time) + padding: 6px 8px 8px 8px + background-color: white + background-color: rgba(255, 255, 255, 0.8) + -webkit-border-radius: 0.3em + -moz-border-radius: 0.3em + border-radius: 0.3em + .vjs-play-progress + &:after + display: none + position: absolute + top: -3.4em + right: -1.5em + font-size: 0.9em + color: black + content: attr(data-current-time) + padding: 6px 8px 8px 8px + background-color: white + background-color: rgba(255, 255, 255, 0.8) + -webkit-border-radius: 0.3em + -moz-border-radius: 0.3em + border-radius: 0.3em + &:before, &:after + z-index: 1 + .vjs-load-progress + background: #bfc7d3 + background: rgba(115, 133, 159, 0.5) + div + background: white + background: rgba(115, 133, 159, 0.75) + &.vjs-no-flex .vjs-progress-control + width: auto + .vjs-progress-control .vjs-mouse-display + display: none + position: absolute + width: 1px + height: 100% + background-color: black + z-index: 1 + +/* If we let the font size grow as much as everything else, the current time tooltip ends up + *ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled + *to avoid a weird hitch when you roll off the hover. + +.vjs-no-flex .vjs-progress-control .vjs-mouse-display + z-index: 0 + +.video-js + .vjs-progress-control:hover .vjs-mouse-display + display: block + &.vjs-user-inactive + .vjs-progress-control .vjs-mouse-display + visibility: hidden + opacity: 0 + -webkit-transition: visibility 1s, opacity 1s + -moz-transition: visibility 1s, opacity 1s + -o-transition: visibility 1s, opacity 1s + transition: visibility 1s, opacity 1s + &:after + visibility: hidden + opacity: 0 + -webkit-transition: visibility 1s, opacity 1s + -moz-transition: visibility 1s, opacity 1s + -o-transition: visibility 1s, opacity 1s + transition: visibility 1s, opacity 1s + &.vjs-no-flex .vjs-progress-control .vjs-mouse-display + display: none + &:after + display: none + .vjs-progress-control .vjs-mouse-display:after + color: white + background-color: black + background-color: rgba(0, 0, 0, 0.8) + .vjs-slider + outline: 0 + position: relative + cursor: pointer + padding: 0 + margin: 0 0.45em 0 0.45em + background-color: #73859f + background-color: rgba(115, 133, 159, 0.5) + &:focus + text-shadow: 0em 0em 1em white + -webkit-box-shadow: 0 0 1em white + -moz-box-shadow: 0 0 1em white + box-shadow: 0 0 1em white + .vjs-mute-control, .vjs-volume-menu-button + cursor: pointer + -webkit-box-flex: none + -moz-box-flex: none + -webkit-flex: none + -ms-flex: none + flex: none + .vjs-volume-control + width: 5em + -webkit-box-flex: none + -moz-box-flex: none + -webkit-flex: none + -ms-flex: none + flex: none + display: -webkit-box + display: -webkit-flex + display: -ms-flexbox + display: flex + -webkit-box-align: center + -webkit-align-items: center + -ms-flex-align: center + align-items: center + .vjs-volume-bar + margin: 1.35em 0.45em + +.vjs-volume-bar + &.vjs-slider-horizontal + width: 5em + height: 0.3em + &.vjs-slider-vertical + width: 0.3em + height: 5em + margin: 1.35em auto + +.video-js .vjs-volume-level + position: absolute + bottom: 0 + left: 0 + background-color: white + &:before + position: absolute + font-size: 0.9em + +.vjs-slider-vertical .vjs-volume-level + width: 0.3em + &:before + top: -0.5em + left: -0.3em + +.vjs-slider-horizontal .vjs-volume-level + height: 0.3em + &:before + top: -0.3em + right: -0.5em + +.vjs-volume-bar + &.vjs-slider-vertical .vjs-volume-level + height: 100% + &.vjs-slider-horizontal .vjs-volume-level + width: 100% + +.vjs-menu-button-popup + &.vjs-volume-menu-button .vjs-menu + display: block + width: 0 + height: 0 + border-top-color: transparent + &.vjs-volume-menu-button-vertical .vjs-menu + left: 0.5em + height: 8em + &.vjs-volume-menu-button-horizontal .vjs-menu + left: -2em + &.vjs-volume-menu-button .vjs-menu-content + height: 0 + width: 0 + overflow-x: hidden + overflow-y: hidden + +.vjs-volume-menu-button-vertical + &:hover .vjs-menu-content, &:focus .vjs-menu-content, &.vjs-slider-active .vjs-menu-content, .vjs-lock-showing .vjs-menu-content + height: 8em + width: 2.9em + +.vjs-volume-menu-button-horizontal + &:hover .vjs-menu-content, &:focus .vjs-menu-content, .vjs-slider-active .vjs-menu-content, .vjs-lock-showing .vjs-menu-content + height: 2.9em + width: 8em + +.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content + background-color: transparent !important + +.vjs-poster + display: inline-block + vertical-align: middle + background-repeat: no-repeat + background-position: 50% 50% + background-size: contain + cursor: pointer + margin: 0 + padding: 0 + position: absolute + top: 0 + right: 0 + bottom: 0 + left: 0 + height: 100% + img + display: block + vertical-align: middle + margin: 0 auto + max-height: 100% + padding: 0 + width: 100% + +.vjs-has-started .vjs-poster + display: none + +.vjs-audio.vjs-has-started .vjs-poster + display: block + +.vjs-controls-disabled .vjs-poster, .vjs-using-native-controls .vjs-poster + display: none + +.video-js .vjs-live-control + display: -webkit-box + display: -webkit-flex + display: -ms-flexbox + display: flex + -webkit-box-align: flex-start + -webkit-align-items: flex-start + -ms-flex-align: flex-start + align-items: flex-start + -webkit-box-flex: auto + -moz-box-flex: auto + -webkit-flex: auto + -ms-flex: auto + flex: auto + font-size: 1em + line-height: 3em + +.vjs-no-flex .vjs-live-control + display: table-cell + width: auto + text-align: left + +.video-js .vjs-time-control + -webkit-box-flex: none + -moz-box-flex: none + -webkit-flex: none + -ms-flex: none + flex: none + font-size: 1em + line-height: 3em + min-width: 2em + width: auto + padding-left: 1em + padding-right: 1em + +.vjs-live .vjs-time-control, .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time, .video-js .vjs-duration, .vjs-no-flex .vjs-duration + display: none + +.vjs-time-divider + display: none + line-height: 3em + +.vjs-live .vjs-time-divider + display: none + +.video-js .vjs-play-control + cursor: pointer + -webkit-box-flex: none + -moz-box-flex: none + -webkit-flex: none + -ms-flex: none + flex: none + +.vjs-text-track-display + position: absolute + bottom: 3em + left: 0 + right: 0 + top: 0 + pointer-events: none + +.video-js + &.vjs-user-inactive.vjs-playing .vjs-text-track-display + bottom: 1em + .vjs-text-track + font-size: 1.4em + text-align: center + margin-bottom: 0.1em + background-color: black + background-color: rgba(0, 0, 0, 0.5) + +.vjs-subtitles + color: white + +.vjs-captions + color: #fc6 + +.vjs-tt-cue + display: block + +video::-webkit-media-text-track-display + -moz-transform: translateY(-3em) + -ms-transform: translateY(-3em) + -o-transform: translateY(-3em) + -webkit-transform: translateY(-3em) + transform: translateY(-3em) + +.video-js + &.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display + -moz-transform: translateY(-1.5em) + -ms-transform: translateY(-1.5em) + -o-transform: translateY(-1.5em) + -webkit-transform: translateY(-1.5em) + transform: translateY(-1.5em) + .vjs-fullscreen-control + cursor: pointer + -webkit-box-flex: none + -moz-box-flex: none + -webkit-flex: none + -ms-flex: none + flex: none + +.vjs-playback-rate + .vjs-playback-rate-value + font-size: 1.5em + line-height: 2 + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + text-align: center + .vjs-menu + width: 4em + left: 0em + +.vjs-error .vjs-error-display + .vjs-modal-dialog-content + font-size: 1.4em + text-align: center + &:before + color: white + content: 'X' + font-family: Arial, Helvetica, sans-serif + font-size: 4em + left: 0 + line-height: 1 + margin-top: -0.5em + position: absolute + text-shadow: 0.05em 0.05em 0.1em black + text-align: center + top: 50% + vertical-align: middle + width: 100% + +.vjs-loading-spinner + display: none + position: absolute + top: 50% + left: 50% + margin: -25px 0 0 -25px + opacity: 0.85 + text-align: left + border: 6px solid rgba($videoplayer-background-color, .7) + box-sizing: border-box + background-clip: padding-box + width: 50px + height: 50px + border-radius: 25px + +.vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner + display: block + +.vjs-loading-spinner + &:before, &:after + content: "" + position: absolute + margin: -6px + box-sizing: inherit + width: inherit + height: inherit + border-radius: inherit + opacity: 1 + border: inherit + border-color: transparent + border-top-color: white + +.vjs-seeking .vjs-loading-spinner + &:before, &:after + -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite + animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite + +.vjs-waiting .vjs-loading-spinner + &:before, &:after + -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite + animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite + +.vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before + border-top-color: white + +.vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after + border-top-color: white + -webkit-animation-delay: 0.44s + animation-delay: 0.44s + +@keyframes vjs-spinner-spin + 100% + transform: rotate(360deg) + + +@-webkit-keyframes vjs-spinner-spin + 100% + -webkit-transform: rotate(360deg) + + +@keyframes vjs-spinner-fade + 0% + border-top-color: #73859f + + 20% + border-top-color: #73859f + + 35% + border-top-color: white + + 60% + border-top-color: #73859f + + 100% + border-top-color: #73859f + + +@-webkit-keyframes vjs-spinner-fade + 0% + border-top-color: #73859f + + 20% + border-top-color: #73859f + + 35% + border-top-color: white + + 60% + border-top-color: #73859f + + 100% + border-top-color: #73859f + + +.vjs-chapters-button .vjs-menu ul + width: 24em + +.video-js + &.vjs-layout-tiny:not(.vjs-fullscreen) + .vjs-custom-control-spacer + -webkit-box-flex: auto + -moz-box-flex: auto + -webkit-flex: auto + -ms-flex: auto + flex: auto + &.vjs-no-flex .vjs-custom-control-spacer + width: auto + .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-progress-control, .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button + display: none + &.vjs-layout-x-small:not(.vjs-fullscreen) + .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button + display: none + &.vjs-layout-small:not(.vjs-fullscreen) + .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button + display: none + +.vjs-caption-settings + position: relative + top: 1em + background-color: $videoplayer-background-color + background-color: rgba(43, 51, 63, 0.75) + color: white + margin: 0 auto + padding: 0.5em + height: 15em + font-size: 12px + width: 40em + .vjs-tracksettings + top: 0 + bottom: 2em + left: 0 + right: 0 + position: absolute + overflow: auto + .vjs-tracksettings-colors, .vjs-tracksettings-font + float: left + .vjs-tracksettings-colors:after, .vjs-tracksettings-font:after + clear: both + .vjs-tracksettings-controls + &:after + clear: both + position: absolute + bottom: 1em + right: 1em + .vjs-tracksetting + margin: 5px + padding: 3px + min-height: 40px + label + display: block + width: 100px + margin-bottom: 5px + span + display: inline + margin-left: 5px + > div + margin-bottom: 5px + min-height: 20px + &:last-child + margin-bottom: 0 + padding-bottom: 0 + min-height: 0 + label > input + margin-right: 10px + input[type="button"] + width: 40px + height: 40px + +.video-js .vjs-modal-dialog + background: rgba(0, 0, 0, 0.8) + background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)) + background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)) + +.vjs-modal-dialog .vjs-modal-dialog-content + font-size: 1.2em + line-height: 1.5 + padding: 20px 24px + z-index: 1 diff --git a/src/templates/nodes/custom/asset/video/view_embed.jade b/src/templates/nodes/custom/asset/video/view_embed.jade index 93e41d4f..de05d4b1 100644 --- a/src/templates/nodes/custom/asset/video/view_embed.jade +++ b/src/templates/nodes/custom/asset/video/view_embed.jade @@ -4,17 +4,32 @@ #node-overlay section.node-preview.video - #flowplayer_container.is-splash.play-button( - style="{% if node.picture %}background-image:url({{node.picture.thumbnail('l', api=api)}}); background-repeat:no-repeat; {% endif %}") - .fp-startscreen.fp-toggle - a.big-play-button - i.pi-play - .fp-endscreen - a.watch-again.fp-toggle - i.pi-replay - | Watch again - .fp-waiting - i.pi-spin.spin + | {% if node.video_sources %} + video.video-js.vjs-fluid( + controls, + data-setup="{}", + preload="auto", + poster="{% if node.picture %}{{ node.picture.thumbnail('l', api=api) }}{% endif %}") + | {% for source in node.video_sources %} + source( + src="{{ source.src }}", + type="{{ source.type }}") + | {% endfor %} + p.vjs-no-js. + To view this video please enable JavaScript, and consider upgrading to a web browser that + supports HTML5 video + | {% else %} + .video-dummy.sorry( + style="{% if node.picture %}height: {{ node.picture.height }}px{% endif %}") + | {% if node.picture %} + img.video-dummy-thumbnail(src="{{ node.picture.thumbnail('l', api=api) }}") + | {% endif %} + .video-dummy-content + i.pi-lock.video-dummy-content-icon + .video-dummy-content-text + span Only available to Blender Cloud subscribers. + a(href="{{ url_for('main.join') }}") Support Blender and get awesome stuff. Subscribe now! + | {% endif %} section.node-details-container.video @@ -131,23 +146,8 @@ script(type="text/javascript"). var content_type = $("li.node-details-meta-list-item.type").text(); $("li.node-details-meta-list-item.type").text(content_type.substring(content_type.indexOf("/") + 1)); - var container = document.getElementById("flowplayer_container"); - - flowplayer(container, { - key: "{{config.FLOWPLAYER_KEY}}", - embed: false, - splash: true, - {% if node.video_sources %} - clip: { - sources: {{ node.video_sources | safe }} - } - {% else %} - disabled: true - {% endif %} - }); - {% if not node.video_sources %} - $('#flowplayer_container, .sorry').click(function() { + $('.sorry').click(function() { $.get('/403', function(data) { $('#node-overlay').html(data).addClass('active'); }) diff --git a/src/templates/projects/view.jade b/src/templates/projects/view.jade index 77d1d9fd..18ada9dd 100644 --- a/src/templates/projects/view.jade +++ b/src/templates/projects/view.jade @@ -235,7 +235,7 @@ link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css', v | {% block footer_scripts %} script(src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js") -script(src="//releases.flowplayer.org/6.0.5/flowplayer.min.js") +script(src="//vjs.zencdn.net/5.8.8/video.js") | {% if project.has_method('PUT') %} | {# JS containing the Edit, Add, Featured, and Move functions #}