Skip to content

Instantly share code, notes, and snippets.

@oberhamsi

oberhamsi/bitmovin-mojo.diff

Created May 11, 2020 11:48
Show Gist options
  • Save oberhamsi/abf35698ba253f995a7b921b0223cd19 to your computer and use it in GitHub Desktop.
Save oberhamsi/abf35698ba253f995a7b921b0223cd19 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bitmovin-mojo.diff
Index: modules/tvthek/storyserver/Content/tvthek.skin
===================================================================
--- modules/tvthek/storyserver/Content/tvthek.skin (revision 57617)
+++ modules/tvthek/storyserver/Content/tvthek.skin (working copy)
@@ -1,6 +1,7 @@
<div class="video tvthek" data-tvthek-segment="<% param.id %>"
data-tvthek-jump-mark="<% param.jumpMark %>"
data-loadingmessage="Video wird geladen&hellip;"
+ <% param.title prefix="data-title=\"" suffix="\"" | typograph | escapeHtml %>
data-disable-ads="<% param.disableAds | boolean true="true" false=<% story.isBannerActive failmode="silent" | boolean true="false" false="true" %> %>"
data-adworx-ressort="<% story.adworxCat failmode="silent" %>"
data-errormessage="Dieses Video ist nicht mehr verf&uuml;gbar"></div>
Index: static/storyserver/common/js/jquery.stripebox.js
===================================================================
--- static/storyserver/common/js/jquery.stripebox.js (revision 57617)
+++ static/storyserver/common/js/jquery.stripebox.js (working copy)
@@ -49,6 +49,12 @@
}
}
+ // old stripebox dont have data-title so read from headline
+ if (!$(this).attr('data-title')) {
+ const videoTitle = $(this).parents('.stripe').find('.stripe-text-wrapper > h2').text();
+ $(this).attr('data-title', videoTitle);
+ }
+
return this.on('player:configloaded', function (e, config) {
var params = config || e.detail;
fixCaption(e.target, params.contentVideo);
@@ -70,11 +76,6 @@
$stripe.prev(".stripe-credits").remove();
//move caption out (otherwise impossible to position)
$(this).parent().find(".caption.tvthek").addClass('stripe-credits').insertBefore($stripe);
- const duration = params.contentVideo.duration;
- const min = Math.floor(duration / 60);
- const sec = Math.floor(duration % 60);
- const formattedDuration = `${min}:${sec < 10 ? '0' + sec : sec}`;
- $stripe.append('<div class="stripe-duration">' + formattedDuration + "</div>");
})
.on('player:cannotplay', function() {
const $stripe = $(this).closest('.stripe');
Index: static/storyserver/common/piratebunny/storylayout-partials/_opener-video.scss
===================================================================
--- static/storyserver/common/piratebunny/storylayout-partials/_opener-video.scss (revision 57617)
+++ static/storyserver/common/piratebunny/storylayout-partials/_opener-video.scss (working copy)
@@ -14,38 +14,7 @@
font-family: $ORFON;
font-size: 1rem;
}
- &.oonmedia-placeholder {
- @include mq($from: tablet) {
- padding-top: 40% !important;
- }
- background-size: cover;
- .oonmedia-playbutton {
- top: calc(50% - #{$playbuttonSize/2});
- left: calc(50% - #{$playbuttonSize/2});
- right: auto;
- bottom: auto;
- z-index: 1;
- width: $playbuttonSize;
- height: $playbuttonSize;
- padding: 0;
- background-color: white;
- border-radius: #{$playbuttonSize/2};
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS41NTIiIGhlaWdodD0iMjUuMjU2IiB2aWV3Qm94PSIwIDAgMjEuNTUyIDI1LjI1NiI+CiAgICA8cGF0aCBmaWxsPSIjNDY2MTk5IiBkPSJNMS43OTEgMjQuOTg1Yy0xIC42LTEuNzkxLjE3OS0xLjc5MS0xVjEuMjg0QzAgLjA5Ljc3Ni0uMzI4IDEuNzkxLjI2OWwxOS4wMTUgMTEuMzEzYTEuMSAxLjEgMCAwIDEgMCAyLjA5eiIvPgo8L3N2Zz4K');
- background-position: 55% center;
- transition: transform 300ms;
- background-size: 30%;
- &:hover {
- transform: scale(1.1,1.1);
- }
-
- }
- .oonmedia-past-message,
- .oonmedia-future-message,
- .oonmedia-geoprotected-message {
- top: 0;
- }
- }
&.oonmedia-video:not(.oonmedia-placeholder) ~ .shunter {
margin-top: 0;
transition: margin 0.3s ease-in-out;
Index: static/storyserver/common/piratebunny/storylayout-partials/_stripe.scss
===================================================================
--- static/storyserver/common/piratebunny/storylayout-partials/_stripe.scss (revision 57617)
+++ static/storyserver/common/piratebunny/storylayout-partials/_stripe.scss (working copy)
@@ -22,69 +22,9 @@
}
}
- // position duration of video top right
- .stripe-duration {
- position: absolute;
- right: 0;
- top: 0;
- padding: 4px;
- background-color: rgba(0, 0, 0, 0.24);
- font-size: rem-calc(18px);
- line-height: rem-calc(20px);
- text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
- font-family: $ORFONTF;
- color: white;
- }
-
- // closed video wrapper
- .stripe-video-wrapper {
- .oonmedia-video {
- // playbutton is completely different
- .bigplaybutton {
- top: calc(50% - #{$playbuttonSize/2});
- left: calc(50% - #{$playbuttonSize/2});
- right: auto;
- bottom: auto;
- z-index: 1;
-
- width: $playbuttonSize;
- height: $playbuttonSize;
- padding: 0;
- background-color: white;
- border-radius: #{$playbuttonSize/2};
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS41NTIiIGhlaWdodD0iMjUuMjU2IiB2aWV3Qm94PSIwIDAgMjEuNTUyIDI1LjI1NiI+CiAgICA8cGF0aCBmaWxsPSIjNDY2MTk5IiBkPSJNMS43OTEgMjQuOTg1Yy0xIC42LTEuNzkxLjE3OS0xLjc5MS0xVjEuMjg0QzAgLjA5Ljc3Ni0uMzI4IDEuNzkxLjI2OWwxOS4wMTUgMTEuMzEzYTEuMSAxLjEgMCAwIDEgMCAyLjA5eiIvPgo8L3N2Zz4K');
- background-position: 55% center;
- background-size: 30%;
- }
- }
- // gradient behind headline
- &:after {
- content: '';
- position: absolute;
- background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.65));
- height: 80%;
- width: 100%;
- bottom: 0;
- left: 0;
- }
- }
-
- // hide text except the headline which is moved above the video
+ // hide text if not expanded
.stripe-text-wrapper {
- position: absolute;
- bottom: 0;
- left: 0;
- * {
- display: none;
- }
- h2 {
- display: block;
- padding: 0 5px 10px 15px;
- color: white;
- font-size: rem-calc(21px);
- line-height: rem-calc(26px);
- margin: 2px 0 0;
- }
+ display: none;
}
// disable stripe can not be clicked
@@ -97,47 +37,8 @@
margin-bottom: 40px;
}
.stripe-text-wrapper {
- h2 {
- display: none;
- }
- }
- .stripe-duration {
display: none;
}
- .stripe-video-wrapper {
- .oonmedia-video {
- position: relative;
- &:after {
- position: absolute;
- content: '';
- background-color: rgba(255, 255, 255, 0.6);
- background-image: none;
- width: 100%;
- height: 100%;
- top: 0;
- right: 0;
- }
- .bigplaybutton {
- display: block;
- z-index: auto;
- }
- .oonmedia-geoprotected-message,
- .oonmedia-past-message,
- .oonmedia-future-message {
- background-color: transparent;
- width: 100%;
- color: black;
- font-size: rem-calc(20px);
- line-height: rem-calc(25px);
- text-align: center;
- font-weight: bold;
- z-index: 1;
- }
- }
- &::after {
- content: none;
- }
- }
}
// opened stripe is full width
@@ -149,9 +50,6 @@
overflow: hidden;
cursor: auto;
- .stripe-duration {
- display: none;
- }
.stripe-video-wrapper {
&:after {
content: none;
@@ -160,6 +58,7 @@
// text is now below the video
// and as wide as the text
.stripe-text-wrapper {
+ display: block;
h2 {
padding: 0;
margin-top: 25px;
Index: static/storyserver/news/common/scss/_ticker-storylayout.scss
===================================================================
--- static/storyserver/news/common/scss/_ticker-storylayout.scss (revision 57617)
+++ static/storyserver/news/common/scss/_ticker-storylayout.scss (working copy)
@@ -158,21 +158,6 @@
margin: -10px -1*map-get($ticker-padding, desktop) 0px -1*map-get($ticker-padding, desktop);
}
.stripe-text-wrapper {
- position: absolute;
- bottom: 0;
- left: 0;
- h2 {
- display: block;
- padding: 0 5px 10px 15px;
- color: white;
- font-size: rem-calc(21px);
- line-height: rem-calc(26px);
- margin: 2px 0 0;
- }
- }
- .stripe-text-wrapper p,
- .stripe-duration,
- .unavailable-info {
display: none;
}
.stripe-video-link {
@@ -183,33 +168,8 @@
font-weight: 200;
}
}
- .stripe-video-wrapper:after {
- content: '';
- position: absolute;
- background-image: linear-gradient(to bottom, transparent 15%, rgba(0,0,0,0.65));
- height: 80%;
- width: 100%;
- bottom: 0;
- left: 0;
- }
- .stripe-video-wrapper .oonmedia-video {
- .bigplaybutton {
- top: calc(50% - #{$playbuttonSize/2});
- left: calc(50% - #{$playbuttonSize/2});
- right: auto;
- bottom: auto;
- z-index: 1;
- width: $playbuttonSize;
- height: $playbuttonSize;
- padding: 0;
- background-color: white;
- border-radius: #{$playbuttonSize/2};
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMS41NTIiIGhlaWdodD0iMjUuMjU2IiB2aWV3Qm94PSIwIDAgMjEuNTUyIDI1LjI1NiI+CiAgICA8cGF0aCBmaWxsPSIjNDY2MTk5IiBkPSJNMS43OTEgMjQuOTg1Yy0xIC42LTEuNzkxLjE3OS0xLjc5MS0xVjEuMjg0QzAgLjA5Ljc3Ni0uMzI4IDEuNzkxLjI2OWwxOS4wMTUgMTEuMzEzYTEuMSAxLjEgMCAwIDEgMCAyLjA5eiIvPgo8L3N2Zz4K');
- background-position: 55% center;
- background-size: 30%;
- }
- }
+
&.expanded {
background-color: #f0f1f4;
.stripe-video-link {
@@ -216,11 +176,15 @@
display: block;
}
.stripe-text-wrapper {
+ display: block;
position: relative;
margin: 10px 15px;
h2 {
+ font-family: $ORFONCondensed;
padding: 0;
margin-top: 25px;
+ font-size: rem-calc(20px);
+ line-height: rem-calc(24px);
}
* {
display: block;
@@ -228,9 +192,6 @@
margin: 13px auto;
}
}
- .stripe-video-wrapper:after {
- content: none;
- }
}
}
.stripe-credits {
Index: .
===================================================================
--- . (revision 57617)
+++ . (working copy)
Property changes on: .
___________________________________________________________________
Modified: svn:mergeinfo
## -0,0 +0,1 ##
Merged /vietnam2/branches/mojo_1_4_1-bitmovin-2020:r57477-57617
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment