Youtube iframe API controls

[cocarrig]

Description: To better curate the experience for touch enabled display systems, it is beneficial to provide some specific capabilities in the YouTube block without enabling the ability to visit the youtube site and subsequently leaving the DAKboard URL.

Capabilities should include the following made selectable in the block modal:

• mute
• set volume level via slider
• play/pause

And the following if possible but not required

• closed captioning
• ability to open other videos in playlist/related

Since prevention of opening other tabs into youtube cannot be done via url tags, the iframe API must be utilized with a transparent covering over the video block to prevent accessing the traditional controls.

iframe API: https://developers.google.com/youtube/iframe_api_reference#changing-the-player-volume

Control Style: Fonts: fa-regular fa-circle-play (displayed in center after single press and video is paused) fa-regular fa-circle-pause (displayed in center after single press and video is playing)

If we cannot gather and change icons on play state gracefully, display the following in center: fa-solid fa-play-pause

At the bottom of the window when pressed display the same volume option we use in dakboard OS:

[Dan-Peck]

NOTE: This issue will require the work done on https://github.com/dakboard/Cloud-Platform/issues/2047

[Dan-Peck]

These features and enhancements are currently in testing:

• Config modal:
  • Volume slider bar
• YouTube Block:
  • Play / Pause button
  • Volume slider bar
  • Mute toggle button
  • CC toggle button
  • t=xxx parameter from YT URL is now retained and used for "time to start"
  • Video contents no longer clickable (prevents leaving Screen)
  • Controls show on mouse entry or touch; hides after a few seconds
• Includes: Changes from #2047

[Dan-Peck]

Merged in @ abf68d6 and added to the queue for upcoming release to the live site.