Commit 976668f
authored
Merge pull request guardian#20106 from guardian/audio-player-test-4
Audio AB Test 4: new player vs old player with image in optimal position4 files changed
Lines changed: 17 additions & 24 deletions
File tree
- applications/app/views/fragments
- common/app/experiments
- static/src/stylesheets/module/content-garnett
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -36,6 +36,10 @@ | |||
| 36 | 36 | <div class="media-primary player"> | |
| 37 | 37 | @media match { | |
| 38 | 38 | case audio: Audio => { | |
| 39 | + @audio.elements.images.map{ img => | ||
| 40 | + @fragments.imageFigure(img.images) | ||
| 41 | + } | ||
| 42 | + | ||
| 39 | 43 | <figure data-component="main audio new-player" | |
| 40 | 44 | id="audio-component-container" | |
| 41 | 45 | data-media-id="@audio.elements.mainAudio.map{ audioElement => @audioElement.properties.id}" | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -5,9 +5,6 @@ | |||
| 5 | 5 | @import views.support.Commercial.{isPaidContent, isAdFree} | |
| 6 | 6 | @import views.support.TrailCssClasses.toneClass | |
| 7 | 7 | @import views.support.{RenderClasses, SeoOptimisedContentImage, StripHtmlTags, Video640, Video1280} | |
| 8 | - @import experiments.{ActiveExperiments, AudioChangeImagePosition} | ||
| 9 | - | ||
| 10 | - @ImageBelowPlayer = @{ActiveExperiments.isParticipating(AudioChangeImagePosition)} | ||
| 11 | 8 | ||
| 12 | 9 | @defining(page.media, page.media match { case _: Audio => "audio" case _ => "video" }) { case (media, mediaType) => | |
| 13 | 10 | @defining(isPaidContent(page), isAdFree(request)) { case (isPaidContent, isAdFree) => | |
@@ -37,10 +34,8 @@ | |||
| 37 | 34 | @media match { | |
| 38 | 35 | case audio: Audio => { | |
| 39 | 36 | ||
| 40 | - @if(!ImageBelowPlayer) { | ||
| 41 | - @audio.elements.images.map{ img => | ||
| 42 | - @fragments.imageFigure(img.images) | ||
| 43 | - } | ||
| 37 | + @audio.elements.images.map{ img => | ||
| 38 | + @fragments.imageFigure(img.images) | ||
| 44 | 39 | } | |
| 45 | 40 | ||
| 46 | 41 | <figure data-component="main audio"> | |
@@ -56,14 +51,6 @@ | |||
| 56 | 51 | ) | |
| 57 | 52 | } | |
| 58 | 53 | </figure> | |
| 59 | - | ||
| 60 | - @if(ImageBelowPlayer) { | ||
| 61 | - <figure data-component="image-below"> | ||
| 62 | - @audio.elements.images.map{ img => | ||
| 63 | - @fragments.imageFigure(img.images) | ||
| 64 | - } | ||
| 65 | - </figure> | ||
| 66 | - } | ||
| 67 | 54 | } | |
| 68 | 55 | case video: Video => { | |
| 69 | 56 | <figure data-component="main video"> | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -7,7 +7,6 @@ import play.api.mvc.RequestHeader | |||
| 7 | 7 | ||
| 8 | 8 | object ActiveExperiments extends ExperimentsDefinition { | |
| 9 | 9 | override val allExperiments: Set[Experiment] = Set( | |
| 10 | - AudioChangeImagePosition, | ||
| 11 | 10 | AudioPageChange, | |
| 12 | 11 | CommercialClientLogging, | |
| 13 | 12 | OrielParticipation, | |
@@ -46,13 +45,5 @@ object AudioPageChange extends Experiment( | |||
| 46 | 45 | description = "Show a different version of the audio page to certain people", | |
| 47 | 46 | owners = Owner.group(SwitchGroup.Journalism), | |
| 48 | 47 | sellByDate = new LocalDate(2018, 8, 20), | |
| 49 | - participationGroup = Perc0A | ||
| 50 | - ) | ||
| 51 | - | ||
| 52 | - object AudioChangeImagePosition extends Experiment( | ||
| 53 | - name = "audio-change-image-position", | ||
| 54 | - description = "Test the position of the image on audio pages", | ||
| 55 | - owners = Owner.group(SwitchGroup.Journalism), | ||
| 56 | - sellByDate = new LocalDate(2018, 8, 3), | ||
| 57 | 48 | participationGroup = Perc50 | |
| 58 | 49 | ) | |
Lines changed: 11 additions & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -45,11 +45,22 @@ | |||
| 45 | 45 | .content__meta-container { | |
| 46 | 46 | top: auto; | |
| 47 | 47 | } | |
| 48 | + | ||
| 49 | + figure.media-content { | ||
| 50 | + padding-left: 10rem; | ||
| 51 | + | ||
| 52 | + margin-bottom: 0; | ||
| 53 | + padding-bottom: 6px; | ||
| 54 | + background-color: #121212; | ||
| 55 | + } | ||
| 48 | 56 | } | |
| 49 | 57 | @media (min-width: 81.25em) { | |
| 50 | 58 | .player { | |
| 51 | 59 | margin-left: -15rem; | |
| 52 | 60 | } | |
| 61 | + figure.media-content { | ||
| 62 | + padding-left: 15rem; | ||
| 63 | + } | ||
| 53 | 64 | } | |
| 54 | 65 | ||
| 55 | 66 | } | |
0 commit comments