diff --git a/.travis.yml b/.travis.yml index 145bcc92e1..878679a1bc 100644 --- a/.travis.yml +++ b/.travis.yml @@ -127,6 +127,8 @@ jobs: export S3_REGION=eu-west-1 export S3_HOST_ALIAS=de-codevise-pageflow-storybook-seed.s3-eu-west-1.amazonaws.com export S3_PROTOCOL=https + export PAGEFLOW_SKIP_ENCODING_STORYBOOK_FILES=true + export S3_OUTPUT_HOST_ALIAS=de-codevise-pageflow-storybook-seed.s3-eu-west-1.amazonaws.com export PT=b55731926f7bcb9344a0b3ff662613954a4137d3c21c1be748e9929823f19b08 - (cd entry_types/scrolled; bundle exec rake pageflow_scrolled:storybook:seed:setup[package/.storybook/seed.json]) - (cd entry_types/scrolled/package; yarn run snapshot) diff --git a/entry_types/scrolled/doc/creating_content_elements.md b/entry_types/scrolled/doc/creating_content_elements.md index 7b0b3cf0f4..c75aec2cd3 100644 --- a/entry_types/scrolled/doc/creating_content_elements.md +++ b/entry_types/scrolled/doc/creating_content_elements.md @@ -94,10 +94,12 @@ storiesOfContentElement(module, { ``` The storybook depends on a static JSON file that contains seed for -example files (e.g. images) that would normally be served by the -Pageflow server. The easiest way to generate the seed file is to use -the development setup of a working host application. Run the following -command in the root directory of your host application: +example files (e.g. images, audio and video files) that would normally +be served by the Pageflow server. The easiest way to generate the seed +file is to use the development setup of a working host application. +Run the following command in the root directory of your host application +(in case of audio and video files, first see +[documentation below](#using-transcoded-files-in-storybook-or-percy)): ```bash $ bundle exec rake pageflow_scrolled:storybook:seed:setup[./seed.json] @@ -119,6 +121,51 @@ When opening pull requests against `codevise/pageflow` the third party service [Percy](https://percy.io/) will be used to make snapshots of the stories and generate visual diffs. +### Using transcoded files in storybook + +The Rake-task to setup seeds for storybook described above comprises three separate tasks: +Deleting the storybook seed entry (if present), creating the storybook seed entry (from data +specified within the task files source) and serializing the created entry to JSON. +In order to use transcoded audio and video files in the local storybook, +you need to run these tasks separately while adding a step for transcoding in between: + +First run `$ bundle exec rake pageflow_scrolled:storybook:seed:destroy_entry` to delete +an existing "Storybook seed" entry if present. + +Then run `$ bundle exec rake pageflow_scrolled:storybook:seed:create_entry` to create the +storybook seed entry. This will create audio and video files in untranscoded state at first. +To transcode these files, simply start your development server and give the resque workers +some time for the actual transcoding. You can check the route `/resque` to view the progress +of the transcoding workers, or simply open the newly created "Storybook seed" entry +in the editor and check the status under the files tab. + +Once all audio and video files of the "Storybook seed" entry are transcoded +successfully, you can stop the server and run the last part of the Rake-task: +`$ bundle exec rake pageflow_scrolled:storybook:seed:generate_json[./seed.json]`. +This will serialize the now transcoded files, including their "ready"-state and all +available variants of the transcoded source files of the entry. +Afterwards copy the generated `seed.json` file into the pageflow project directory as +described above. + +### Using transcoded files in CI/Percy +Since in CI there is no transcoding configured, using transcoded files in Percy requires +some manual work to set up: +First you need to specify an `ENV`-variable named `PAGEFLOW_SKIP_ENCODING_STORYBOOK_FILES` +and set it to `true` in your `.travis` config file. This will cause transcoding to be skipped +and set the `output_presences`, usually assigned during transcoding, explicitly during +creation of the file records. +Furthermore, specify another `ENV`-variable named `S3_OUTPUT_HOST_ALIAS` and set it to the +same URL as your `S3_HOST_ALIAS` `ENV`-variable. +Now audio and video files will expect their transcoded files in the same location as their +source files, so you need to manually copy the outputs generated for these files to the +bucket specified by `S3_HOST_ALIAS`. + +Since the files are processed in sequential order and the data is created on an empty +database, the ids of video and audio files always remain the same on each run of CI, +i.e. the first audio file will have an id of 1, and the first video file will also have +an id of 1. Remember to adjust the id part of the files directory structure accordingly +upon copying manually. + ## Editor JavaScript The `editor.js` file registers the content element type with the diff --git a/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb b/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb index be4d092250..ff88de48a5 100644 --- a/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb +++ b/entry_types/scrolled/lib/pageflow_scrolled/seeds.rb @@ -106,6 +106,21 @@ def create_files(draft_entry, file_type, file_data_by_name, skip_encoding = fals if %i[audio video].include?(file_type) if skip_encoding file.update!(state: 'encoded') + if file_type.eql?(:video) + file.update!(output_presences: { + "dash-playlist" => true, + "hls-playlist" => true, + "dash-medium"=> true, + "hls-medium" => true, + "dash-high" => true, + "hls-high" => true, + "dash-low" => true, + "hls-low" => true, + "medium" => true, + "high" => true, + "low" => true + }) + end else file.publish! end diff --git a/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake b/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake index dabfafcc6b..c9159ceec3 100644 --- a/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake +++ b/entry_types/scrolled/lib/tasks/pageflow_scrolled_tasks.rake @@ -90,7 +90,7 @@ namespace :pageflow_scrolled do } }, options: { - skip_encoding: true + skip_encoding: ENV.fetch('PAGEFLOW_SKIP_ENCODING_STORYBOOK_FILES', false) } ) end diff --git a/entry_types/scrolled/package/src/contentElements/inlineAudio/stories.js b/entry_types/scrolled/package/src/contentElements/inlineAudio/stories.js index b15f338b6a..cc9bf9240d 100644 --- a/entry_types/scrolled/package/src/contentElements/inlineAudio/stories.js +++ b/entry_types/scrolled/package/src/contentElements/inlineAudio/stories.js @@ -4,7 +4,7 @@ import {storiesOfContentElement, filePermaId} from 'pageflow-scrolled/spec/suppo storiesOfContentElement(module, { typeName: 'inlineAudio', baseConfiguration: { - id: null, + id: filePermaId('audioFiles', 'quicktime_jingle'), autoplay: false, controls: false } diff --git a/entry_types/scrolled/package/src/contentElements/inlineVideo/stories.js b/entry_types/scrolled/package/src/contentElements/inlineVideo/stories.js index af38bf2995..67240ceeee 100644 --- a/entry_types/scrolled/package/src/contentElements/inlineVideo/stories.js +++ b/entry_types/scrolled/package/src/contentElements/inlineVideo/stories.js @@ -4,7 +4,7 @@ import {storiesOfContentElement, filePermaId} from 'pageflow-scrolled/spec/suppo storiesOfContentElement(module, { typeName: 'inlineVideo', baseConfiguration: { - id: null, + id: filePermaId('videoFiles', 'interview_toni'), autoplay: false, controls: false } diff --git a/entry_types/scrolled/package/src/frontend/Audio.js b/entry_types/scrolled/package/src/frontend/Audio.js index eb661233ae..a700c0df07 100644 --- a/entry_types/scrolled/package/src/frontend/Audio.js +++ b/entry_types/scrolled/package/src/frontend/Audio.js @@ -78,5 +78,5 @@ function AudioPlayer(props) { Audio.defaultProps = { interactive: false, - controls: false + controls: true }; diff --git a/entry_types/scrolled/package/src/frontend/Video.js b/entry_types/scrolled/package/src/frontend/Video.js index 032919ea9a..4d9a172487 100644 --- a/entry_types/scrolled/package/src/frontend/Video.js +++ b/entry_types/scrolled/package/src/frontend/Video.js @@ -82,5 +82,5 @@ function VideoPlayer(props) { Video.defaultProps = { interactive: false, - controls: false + controls: true }; diff --git a/entry_types/scrolled/spec/pageflow_scrolled/seeds_spec.rb b/entry_types/scrolled/spec/pageflow_scrolled/seeds_spec.rb index 4eb28548c3..7edbca46ac 100644 --- a/entry_types/scrolled/spec/pageflow_scrolled/seeds_spec.rb +++ b/entry_types/scrolled/spec/pageflow_scrolled/seeds_spec.rb @@ -434,6 +434,26 @@ module SeedsDsl expect(video_file.state).to eq('encoded') end + it 'assigns output_presences when transcoding is skipped' do + entry = SeedsDsl.sample_scrolled_entry(attributes: { + account: create(:account), + title: 'Example', + video_files: { + 'some-video' => { + 'url' => 'https://example.com/some.mp4' + } + }, + chapters: [] + }, + options: { + skip_encoding: true + }) + + video_file = entry.draft.find_files(Pageflow::VideoFile).first + + expect(video_file.output_presences).to include('high' => true) + end + context 'with text track' do it 'rewrites parent file id' do entry = SeedsDsl.sample_scrolled_entry(attributes: {