Skip to content

Commit

Permalink
[SDPA-3545] Fixed video links (#612)
Browse files Browse the repository at this point in the history
  • Loading branch information
tim-yao authored Dec 9, 2019
1 parent 4bde2d6 commit 9f49262
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 15 deletions.
64 changes: 64 additions & 0 deletions examples/vic-gov-au/test/e2e/fixtures/media/embedded-video.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
- entity: node
type: landing_page
title: Embedded video test
status: 1
moderation_state:
- '#process':
callback: reference
args:
- content_moderation_state
- workflow: editorial
moderation_state: published
# Page header.

field_landing_page_summary: Embedded video test.
field_landing_page_hero_theme: light
field_landing_page_bg_colour: white

# Content Components.
field_landing_page_component:
# Basic Text.
- entity: paragraph
type: basic_text
field_paragraph_body:
- format: rich_text
value: |
<h2>Victorian women say thank you</h2>
<drupal-entity data-embed-button="tide_media" data-entity-embed-display="view_mode:media.embedded_with_transcript" data-entity-type="media" data-entity-uuid="7be769bb-9e9f-4c63-9a79-6fbd6d3bf48d" data-langcode="en"></drupal-entity>
<p>In September 2019, recipients of the 2019 Queen’s Birthday Honours were presented with their Order of Australia medals, by the Governor at official ceremonies at Government House, Melbourne.</p>
<drupal-entity data-embed-button="tide_media" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="36edb597-6253-40a0-845f-2de0c47f19e5" data-langcode="en"></drupal-entity>
<p>In April 2019, recipients of the 2019 Australian Day Honours were presented with their Order of Australia medals, by the Governor at official ceremonies at Government House, Melbourne.</p>
# Other.
field_show_social_sharing: 0
field_show_content_rating: 0
field_show_site_section_nav: 0
# Topic and Tags.
field_topic:
- '#process':
callback: reference
args:
- taxonomy_term
- vid: topic
name: 'Equality'
# Sites.
field_node_site:
- '#process':
callback: reference
args:
- taxonomy_term
- vid: sites
name: 'vic.gov.au'
- '#process':
callback: reference
args:
- taxonomy_term
- vid: sites
name: 'demo.vic.gov.au'
field_node_primary_site:
- '#process':
callback: reference
args:
- taxonomy_term
- vid: sites
name: 'vic.gov.au'
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
Feature: Media page
Feature: Media

This test is not ready yet
Test Media

@skip
Scenario: Test
Scenario: Embedded media video
Given the "/embedded-video-test" page exists with fixture "media/embedded-video-test" data
When I visit the page "/embedded-video-test"
Then there should be 2 embedded videos
And there should be a embedded video transcript link
24 changes: 14 additions & 10 deletions packages/ripple-nuxt-tide/lib/config/markup-plugins.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Note: for add obj type prop in template, please return data instead of set them in template otherwise it won't work.
// Note: for add obj type prop in template, please return data instead of set them in template otherwise it won't work properly.
// e.g You have something like in your plugin: `<component-obj-prop :author="{name: 'Veronica', company: 'Veridian Dynamics'}"></component-obj-prop>`
// You should make template: `<component-obj-prop :author="myPluginData.author"></component-obj-prop>`
// Then set myPluginData.author = {name: 'Veronica', company: 'Veridian Dynamics'} and return {myPluginData} in your plugin.
// You should make template: `<component-obj-prop :author="myPluginData1.author"></component-obj-prop>`
// Then set myPluginData1.author = {name: 'Veronica', company: 'Veridian Dynamics'} and return {myPluginData1, myPluginData2 ... } in your plugin.
// See a example in `pluginEmbeddedMediaVideo` plugin below.

import { getAnchorLinkName } from '@dpc-sdp/ripple-global/utils/helpers.js'
Expand Down Expand Up @@ -122,10 +122,13 @@ const pluginIframe = function () {
}

const pluginEmbeddedMediaVideo = function () {
// Component data
const embeddedMediaVideoData = {}
// wrap iFrames
this.find('.embedded-entity--media--embedded-video').map((i, el) => {
// Component data
const data = {}
const dataName = `embeddedMediaVideoData${i}`

const element = this.find(el)
const iframe = element.find('iframe')
const height = iframe.attr('height')
Expand All @@ -135,25 +138,26 @@ const pluginEmbeddedMediaVideo = function () {
const transcript = figcaption ? figcaption.text() : null
const link = element.find('.field--name-field-media-link a')
// For Obj type props, using data to pass value to avoid HTML syntax and encoding issue.
embeddedMediaVideoData.mediaLink = link && link.is('a') ? { text: link.text(), url: link.attr('href') } : null
data.mediaLink = link && link.is('a') ? { text: link.text(), url: link.attr('href') } : null

// Add each video component data into return result.
embeddedMediaVideoData[dataName] = data

const RplEmbeddedVideo = `<rpl-embedded-video
width="${width}"
height="${height}"
src="${src}"
class="rpl-markup__embedded-video"
variant="${embeddedMediaVideoData.mediaLink ? 'link' : 'full'}"
variant="${data.mediaLink ? 'link' : 'full'}"
:display-transcript="true"
${embeddedMediaVideoData.mediaLink ? ':media-link="embeddedMediaVideoData.mediaLink"' : ''}
${data.mediaLink ? ':media-link="' + dataName + '.mediaLink"' : ''}
${transcript ? 'transcript="' + _escapeQuotes(transcript) + '"' : ''}
/>`
return element.replaceWith(RplEmbeddedVideo)
})

// Return data
return {
embeddedMediaVideoData
}
return embeddedMediaVideoData
}

const pluginLinks = function () {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,34 @@ const html = `
<figcaption>Some video caption text <&'"</figcaption>
</figure>
<figure role="group" class="caption caption-div embedded-entity embedded-entity--media embedded-entity--media--embedded-video">
<div data-embed-button="tide_media" data-entity-embed-display="view_mode:media.embedded_with_transcript" data-entity-type="media" data-entity-uuid="12345" data-langcode="en">
<article class="media media--type-embedded-video media--view-mode-embedded-with-transcript">
<div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item">
<div class="video-embed-field-provider-youtube video-embed-field-responsive-video">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="480" src="https://www.youtube.com/embed/aGU2la0fHds?autoplay=0&amp;start=0&amp;rel=0" width="854"></iframe>
</div>
</div>
<div class="field field--name-field-media-link field--type-string field--label-hidden field__item">
<a href="/media/2" hreflang="en">View transcript</a>
</div>
</article>
</div>
<figcaption>Some video caption text <&'"</figcaption>
</figure>
<figure role="group" class="caption caption-div embedded-entity embedded-entity--media embedded-entity--media--embedded-video">
<div data-embed-button="tide_media" data-entity-embed-display="view_mode:media.embedded_with_transcript" data-entity-type="media" data-entity-uuid="12345" data-langcode="en">
<article class="media media--type-embedded-video media--view-mode-embedded-with-transcript">
<div class="field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item">
<div class="video-embed-field-provider-youtube video-embed-field-responsive-video">
<iframe allowfullscreen="allowfullscreen" frameborder="0" height="480" src="https://www.youtube.com/embed/aGU2la0fHds?autoplay=0&amp;start=0&amp;rel=0" width="854"></iframe>
</div>
</div>
</article>
</div>
</figure>
<!-- blockquote -->
<blockquote class="quotation">
<p>Berios sim destrum facientota nis ex eost aut prae vendis explam aliquis dolorpo rrorem reptaep elenis net.</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,11 @@ exports[`Markup transpiler should able transpile html into vue template with plu
</tbody></table></div>
<!-- pluginEmbeddedMediaVideo -->
<rpl-embedded-video width=\\"854\\" height=\\"480\\" src=\\"https://www.youtube.com/embed/Xb4ElZqit8k?autoplay=0&amp;start=0&amp;rel=0\\" class=\\"rpl-markup__embedded-video\\" variant=\\"link\\" :display-transcript=\\"true\\" :media-link=\\"embeddedMediaVideoData.mediaLink\\" transcript=\\"Some video caption text &lt;&amp;&apos;&quot;\\"></rpl-embedded-video>
<rpl-embedded-video width=\\"854\\" height=\\"480\\" src=\\"https://www.youtube.com/embed/Xb4ElZqit8k?autoplay=0&amp;start=0&amp;rel=0\\" class=\\"rpl-markup__embedded-video\\" variant=\\"link\\" :display-transcript=\\"true\\" :media-link=\\"embeddedMediaVideoData0.mediaLink\\" transcript=\\"Some video caption text &lt;&amp;&apos;&quot;\\"></rpl-embedded-video>
<rpl-embedded-video width=\\"854\\" height=\\"480\\" src=\\"https://www.youtube.com/embed/aGU2la0fHds?autoplay=0&amp;start=0&amp;rel=0\\" class=\\"rpl-markup__embedded-video\\" variant=\\"link\\" :display-transcript=\\"true\\" :media-link=\\"embeddedMediaVideoData1.mediaLink\\" transcript=\\"Some video caption text &lt;&amp;&apos;&quot;\\"></rpl-embedded-video>
<rpl-embedded-video width=\\"854\\" height=\\"480\\" src=\\"https://www.youtube.com/embed/aGU2la0fHds?autoplay=0&amp;start=0&amp;rel=0\\" class=\\"rpl-markup__embedded-video\\" variant=\\"full\\" :display-transcript=\\"true\\"></rpl-embedded-video>
<!-- blockquote -->
<blockquote class=\\"quotation\\">
Expand Down Expand Up @@ -121,6 +125,34 @@ exports[`Markup transpiler should get same HTML with no plugins 1`] = `
<figcaption>Some video caption text &lt;&amp;&apos;&quot;</figcaption>
</figure>
<figure role=\\"group\\" class=\\"caption caption-div embedded-entity embedded-entity--media embedded-entity--media--embedded-video\\">
<div data-embed-button=\\"tide_media\\" data-entity-embed-display=\\"view_mode:media.embedded_with_transcript\\" data-entity-type=\\"media\\" data-entity-uuid=\\"12345\\" data-langcode=\\"en\\">
<article class=\\"media media--type-embedded-video media--view-mode-embedded-with-transcript\\">
<div class=\\"field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item\\">
<div class=\\"video-embed-field-provider-youtube video-embed-field-responsive-video\\">
<iframe allowfullscreen=\\"allowfullscreen\\" frameborder=\\"0\\" height=\\"480\\" src=\\"https://www.youtube.com/embed/aGU2la0fHds?autoplay=0&amp;start=0&amp;rel=0\\" width=\\"854\\"></iframe>
</div>
</div>
<div class=\\"field field--name-field-media-link field--type-string field--label-hidden field__item\\">
<a href=\\"/media/2\\" hreflang=\\"en\\">View transcript</a>
</div>
</article>
</div>
<figcaption>Some video caption text &lt;&amp;&apos;&quot;</figcaption>
</figure>
<figure role=\\"group\\" class=\\"caption caption-div embedded-entity embedded-entity--media embedded-entity--media--embedded-video\\">
<div data-embed-button=\\"tide_media\\" data-entity-embed-display=\\"view_mode:media.embedded_with_transcript\\" data-entity-type=\\"media\\" data-entity-uuid=\\"12345\\" data-langcode=\\"en\\">
<article class=\\"media media--type-embedded-video media--view-mode-embedded-with-transcript\\">
<div class=\\"field field--name-field-media-video-embed-field field--type-video-embed-field field--label-hidden field__item\\">
<div class=\\"video-embed-field-provider-youtube video-embed-field-responsive-video\\">
<iframe allowfullscreen=\\"allowfullscreen\\" frameborder=\\"0\\" height=\\"480\\" src=\\"https://www.youtube.com/embed/aGU2la0fHds?autoplay=0&amp;start=0&amp;rel=0\\" width=\\"854\\"></iframe>
</div>
</div>
</article>
</div>
</figure>
<!-- blockquote -->
<blockquote class=\\"quotation\\">
<p>Berios sim destrum facientota nis ex eost aut prae vendis explam aliquis dolorpo rrorem reptaep elenis net.</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,6 @@ require('./navigation')
require('./utils')

require('./modules/events')
require('./modules/media')
require('./modules/profile')
require('./modules/search')
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
/* global cy */

const { Then } = require('cypress-cucumber-preprocessor/steps')

Then(`there should be {int} embedded videos`, (number) => {
cy.get('.rpl-embedded-video').its('length').should('eq', number)
})

Then(`there should be a embedded video transcript link`, (number) => {
const link = cy.get('.rpl-embed-video__link').find('a')
link.its('href').should('eq', '/media/7008')
link.contains('View transcript')
})

0 comments on commit 9f49262

Please sign in to comment.