EBMS Tickets

Story points assume storage of the videos on YouTube (and that the embedding markup will be created in the code, rather than in a user-accessible WYSIWYG editing interface), and include layout decisions, getting the videos onto YouTube, modifying the page, and developer testing.

As a side note, I noticed when looking at the Help page that the single PDF document attached to it needs updating to reflect the new login screen.

I have added a couple of (not so) random videos as placeholders for the ticket. Let me know when you've got the URLs for the actual training videos.

On hold pending receipt of links to training videos.

We do not have completed (or even started) videos, but this is something we plan to work on later in the year. I thought we were just adding the capability with this ticket, not the finished videos, but I can see that's not clear with my comment above. I guess what I'm really asking for is the ability to post/remove videos as needed (like we do with the help documents on this page). If that's a significant diversion or you think we really need the actual videos to move forward, then we can move this to the backlog and try to address it in the Board manager release in the fall.

Modified story points, since the new requirements don't match the assumptions I posted on June 1 for the original LOE.

Added ~henryec as a watcher. She will be coming by to talk to you about some concerns with our proposed approach for this ticket.

~JutheR - Double checked an no issues with posting the training video to YouTube. The guidance was to double check with Janette once you are done with the video in case she needs to help add captions or the ins and outs.

~BKline - I like ~ZhangY41's idea to implement a new video content type, which should then allow the system users to add/modify their own YouTube videos via a WYSIWYG. Sounds like there are Drupal modules that can support this readily. I want to assign this story to Yijun, but understand she is still troubleshooting her access. Please consult with her if she doesn't get her access by the time you get to this story.

Thanks. Robin will be happy with this news.

What I told Yijun at the end of the day yesterday was that if the ticket was resurrected and she still didn't have a working EBMS dev environment I would like her to come up with the approach and as much guidance for me as she can give for implementing it, and I will hold on to the ticket and get the page on DEV, working closely with her. I'll learn a lot from this process.

... which should then allow the system users to add/modify their own YouTube videos via a WYSIWYG.

To clarify: both of the approaches I was considering (once Robin clarified the requirements, eliminating the use of a page with a fixed set of videos) would support that. But I do agree that the approach based on a new Drupal content type would be the preferable way to do it, given the availability of Yijun's expertise.

While waiting for guidance I tried a couple of approaches which will let the users add video clips to the help page. For one version, I used what I think is the most popular third-party module for implementing a video embedding field ("Video Embed Field"). The other version uses the Drupal FAPI (Form API) to implement an interface which allows the users to enter information about the hosted videos which should appear on the Help page. In this version, the Help page code retrieves the videos which have an Active status and embeds them on the help page in the order specified by the users.

The pros and cons of the first approach (third party module implementing a new field type):
➕ Allows the users to edit the complete page
➖ Introduces a dependency on another third-party module
➖ Does not appear to support control over things like the frame size
➖ No provision for displaying a title above the video

For the second approach:
➕ Gives more control over the appearance of the page
➕ Easier to implement and modify
➕ Provision for title above video (required) and further description below (optional)
➕ Separate settings for frame border, frame dimensions, full-screen permission, etc.
➖ The lead paragraph on the page is embedded in code, so can't be directly edited by the users

The results of the two approaches can be seen here:
https://ebms-dev.nci.nih.gov/hilfe (third-party module)
https://ebms-dev.nci.nih.gov/help (FAPI solution) [edit: no longer available; see later comments]

There is another approach which might provide a solution, involving the use of a "Media Embed" plugin for CKEditor. I haven't had a chance to investigate this option yet, but I'll look into it while waiting for guidance from Yijun.

(Edit: As far as I can tell, the "Media Embed" plugins (there are two of them, I think), are written to support CKEditor 4.x, and we're using 3.6.6.2.)

If the help page is a content page that can be edited directly thru wysiwyg, you can use a simple contrib module called video_filter: https://www.drupal.org/project/video_filter This module allows you to embed video token anywhere in your wysiwyg editor with the format [video:video_url]. For example: [video:https://www.youtube.com/watch?v=3fZR37JC2G0]

This module may depend on Token module. After you enable the two modules, go to admin/config/content/formats/full_html (or filtered_html), and check "Video filter" option and select the video sources you need (youtube, vimeo etc.), you will be able to use it directly in any wysiwyg editor then.

I have implemented this fourth approach and it is installed on DEV, available for users to take a look and experiment with plugging in video links. With this approach, the entire page is editable by users with sufficient permissions. You'll want to keep the text format for this page set at "Video HTML." Also, the styling for the page depends on the title string we use for this page ("Online User Documentation"); if that string gets changed, some of the cosmetic layout for the page will be lost.

Unfortunately, there is supposed to be a button to make the process more user-friendly, but it doesn't work, and neither Yijun nor I have been had the time to track down the cause of the failure. So in the meantime you will have to enter the syntax directly. There is online documentation for the WYSIWYG editing interface (https://ebms-dev.nci.nih.gov/filter/tips). Quoting from that documentation:

You may insert videos from popular video sites by using a simple tag [video:URL].

Examples:

Single video:
[video:http://www.youtube.com/watch?v=uN1qUeId]

Random video out of multiple:
[video:http://www.youtube.com/watch?v=uN1qUeId1,http://www.youtube.com/watch?v=uN1qUeId2]

Override default autoplay setting: [video:http://www.youtube.com/watch?v=uN1qUeId autoplay:1]

Override default width and height:
[video:http://www.youtube.com/watch?v=uN1qUeId width:X height:Y]

Override default aspect ratio:
[video:http://www.youtube.com/watch?v=uN1qUeId ratio:4/3]

Align the video:
[video:http://www.youtube.com/watch?v=uN1qUeId align:right]

Supported sites: Vimeo, YouTube, YouTube (Playlist).

The ckeditor library was upgraded in the process of implementing this, so you may see some changes in the editing UI.

The next step, which Yijun and I will tackle tomorrow, will be to serialize the settings created to support the new functionality in a way that makes it possible to script the changes to the upper tiers.

As we move up the tiers, we'll remove the test video links from the new version of the page. You'll be able to add the real links later in the year when you have the actual training videos ready.

Hmm, not out of the woods yet. Looks like the editing form is (sort of) working on IE, but not in Chrome. Digging in.

It turned out to be a known problem with the Chrome caching mechanism. The normal means of clearing the cache aren't sufficient when this happens, so you have to dig down into the settings pages to clear out the offending bits. Makes me a little nervous, but it's working again now, so I'm going to declare the work on this basic ticket done, and turn now to the deployment steps for this (and all the other tickets for the release), to make sure I've got a working script when we get to the QA build.

Just a heads-up: I've been working on scripting the deployment for this solution, following the approach used by the original developer(s) who implemented the customization of the WYSIWYG editing, and I'm not having as much success as I hoped. There's just too much stuff that's either undocumented (or documented somewhere that I haven't been able to find yet), and the final solution we've adopted for this ticket turns out to be more complicated than what those original developers were doing in the .install script (and that was complicated enough to start with).

It's looking like we might have to do one of the following:

1. delay the QA build

2. fall back on my FAPI solution

3. deploy the current solution for this ticket manually up the tiers

4. deploy the current solution manually on QA and get Yijun fix the deployment script for Stage and Prod

The last option could mean fixing my script or it could mean using the Features module after all.

Here's another possible solution. We could add a drush command to the deploy script which would give the Site Admin role permission to manage the text editing filters. This would avoid having to give CBIIT instructions for manual steps.

I manually configured this on QA, and I've captured the steps in case we (or CBIIT) end up doing it manually on the upper tiers:

1. https://[host]/admin/config/content/wysiwyg/profile

   1. make sure CKeditor 4.5.9.a35abfe is listed for Filtered HTML and Video HTML

   2. click save

2. https://[host]/admin/config/content/wysiwyg/profile/filtered_html/edit

   1. check all buttons EXCEPT:

      • Left-to-right

      • Right-to-left

      • Flash

      • Templates

      • Teaser break

      • Video filter

      • Smiley

      • Maximize

      • About

   2. In Basic setup

      1. check "Enabled by default"

      2. uncheck "Allow users to choose default"

      3. check "Show enable/disable rich text toggle link"

      4. check "Enable on summary fields"

   3. Click Save

3. https://[host]/admin/config/content/wysiwyg/profile/filtered_html/edit

   1. Everything the same as for filtered_html immediately above

4. https://[host]/admin/config/content/formats/filtered_html

   1. Roles:

      1. check authenticated user

   2. Enabled filters - check:

      • Limit allowed HTML tags

      • Convert URLS into links

      • Convert line breaks into HTML (i.e. <br> and <p>)

      • Correct faulty and chopped of HTML

   3. Filter processing order:

      • Convert URLS into links

      • Limit allowed HTML tags

      • Convert line breaks into HTML (i.e. <br> and <p>)

      • Correct faulty and chopped of HTML

   4. Filter settings:

      1. Limit allowed HTML tags:

         • paste into "Allowed HTML tags field":

           <a> <em> <i> <strong> <b> <u> <br> <p> <img> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <hr> <sup> <sub> <h2> <h3> <strike> <table> <tr> <td> <iframe> <div>

         • check "Display basic HTML help in long filter tips

         • uncheck "Add rel="nofollow" to all links"

      2. Convert URLS into links

         • Maxiumum link text length: 72

   5. Click "Save Configuration" button

5. https://[host]/admin/config/content/formats/video_html

   1. Roles:

      1. check authenticated user

   2. Enabled filters - check:

      • Convert URLS into links

      • Video Filter

      • Convert line breaks into HTML (i.e. <br> and <p>)

      • Correct faulty and chopped of HTML

   3. Filter processing order:

      • Limit allowed HTML tags

      • Video Filter

      • Convert line breaks into HTML (i.e. <br> and <p>)

      • Correct faulty and chopped of HTML

   4. Filter settings:

      1. Limit allowed HTML tags:

         • paste into "Allowed HTML tags field":

           <a> <em> <i> <strong> <b> <u> <br> <p> <img> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <hr> <sup> <sub> <h2> <h3> <strike> <table> <tr> <td> <iframe> <div>

         • check "Display basic HTML help in long filter tips

         • uncheck "Add rel="nofollow" to all links"

      2. Video Filter

         • Default width setting: 400

         • Default height setting: 300

         • Default autoplay setting: No

         • Related videos setting: Yes

         • Use HTML5: Yes

         • Allow multiple sources: Yes

         • Codecs (check these; uncheck the rest):

           • Vimeo

           • YouTube

           • YouTube (Playlist)

   5. Click "Save Configuration" button

Seems to be working, though you can see why I'd prefer to allow my own role to do this on Stage and Prod if we can't get this scripted. In theory, the QA deployment would be done, but the message type customization isn't working yet. I will post a comment in the ticket affected by that problem, and soldier on until everything is ready for testing on QA.

~ZhangY41 created a new module which captures the settings we were trying to script (using Features), and I have successfully tested it on a clone of STAGE EBMS.

Thanks, Yijun!

Verified on QA.

This hasn't been tested on PROD since we don't have a video ready for posting, but I'm closing the issue. We'll reopen if we run into problems.