Play YouTube Video

[davidmoore1]

YouTube video reference can be found in the SAB PWA Test app at CUK Luke 23:33

The android app html to play this video is:

I believe the problem is in app-builder-video.js in playOnlineVideo. If the video is a YouTube video, the URL needs to be adjusted from the youtu.be reference to www.youtube/embed as in the original with ?autoplay=1&rel=0 as in the Android version. There may be other changes to handle fullscreen properly, or restrict it. In my simple test, I experienced issues when I went to full screen. The video did not limit itself to the available frame size and I was unable to get it out of full screen mode.

[davidmoore1]

For video type youtube, existing app looks for videos matching reg expression "https://(?:www\\.)?youtu\\.be/([a-zA-Z0-9-_]+)(&.+)" or "https://(?:www\\.)?youtube\\.(?:\\w+)/watch\\?v=([a-zA-Z0-9-_]+)(&.+)" to match as a you tube video. It then changes it to "https://www.youtube.com/embed/" + id. It adds the ?autoplay=1 to that. If the "video-youtube-related-same-channel" feature is set in the videos options, then it adds &rel=0

For video type vimeo: If the url matches the reg expression "https://(?:www\\.)?vimeo\\.(\\w+)/([0-9]+)", then it changes it to "https://player.vimeo.com/video/" + m.group(2) and then adds ?autoplay=1

[chrisvire]

I don't think it is a good idea to modify the app-builder-player.js. We want to preserve that so that if there are bug fixes in the version that is included in the android app, that we can just copy it over to the PWA.

I should have been more clear in our meeting. I would like the video urls to be changed during the convert process that reads in the data/appdef.xml and generates src/lib/data/config.js. It is better for us to do this transformation at build time than at runtime on the device.

You will need to add a function to convertConfig.ts like this:

function convertVideoUrl(url: string): string {
  // Regular expressions to match YouTube and Vimo URL patterns

  // If the url matches the pattern, then return the conversion

  // IF the URL doesn't match any pattern, then return unchanged
  return url
}

So you need to specify the patterns and the matching parts.

Then this:

            const onlineUrlHTML = tag.getElementsByTagName('online-url')[0]
                ? tag.getElementsByTagName('online-url')[0]?.innerHTML
                : '';

Can be changed to:

            let onlineUrlHTML = tag.getElementsByTagName('online-url')[0]
                ? tag.getElementsByTagName('online-url')[0]?.innerHTML
                : '';
            if (onlineUrlHTML) {
                onlineUrlHTML = convertVideoUrl(onlineUrlHTML);
            }

[chrisvire]

video options moved to #603

[chrisvire]

Please use separate pattern for the different youtube urls:

    const youTuBePattern = /https:\/\/(?:www\.)?youtu\.be\/([a-zA-Z0-9-]+)(&.+)*/;
    const youTubePattern = /https:\/\/(?:www\.)?youtube\.(?:\w+)\/watch\?v=([a-zA-Z0-9-]+)(&.+)*/;