Merge pull request #1307 from robertoszek/master

add video-on-login-screen plugin

plugins/video-on-login-screen/LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2023 SnappyMail Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

plugins/video-on-login-screen/README

@@ -0,0 +1 @@
+Fullscreen background video on login screen.

plugins/video-on-login-screen/VERSION

@@ -0,0 +1 @@
+1.1

plugins/video-on-login-screen/index.php

@@ -0,0 +1,44 @@
+<?php
+
+class VideoOnLoginScreenPlugin extends \RainLoop\Plugins\AbstractPlugin
+{
+	const
+	NAME = 'Video On Login Screen',
+	VERSION = '0.1',
+	RELEASE = '2023-11-09',
+	REQUIRED = '2.5.0',
+	CATEGORY = 'Login',
+	DESCRIPTION = 'Play a simple video on the login screen.';
+
+	/**
+	 * @return void
+	 */
+	public function Init() : void
+	{
+		$this->addJs('js/video-on-login.js');
+		$this->addHook('main.content-security-policy', 'ContentSecurityPolicy');
+	}
+
+	/**
+	 * @return array
+	 */
+	protected function configMapping() : array
+	{
+		return array(
+			\RainLoop\Plugins\Property::NewInstance('mp4_file')->SetLabel('Url to a mp4 file')
+				->SetPlaceholder('http://')
+				->SetAllowedInJs(true)
+				->SetDefaultValue(''),
+			\RainLoop\Plugins\Property::NewInstance('playback_rate')->SetLabel('Playback rate')
+				->SetAllowedInJs(true)
+				->SetType(\RainLoop\Enumerations\PluginPropertyType::SELECTION)
+				->SetDefaultValue(array('100%', '25%', '50%', '75%', '125%', '150%', '200%')),
+		);
+	}
+
+	public function ContentSecurityPolicy(\SnappyMail\HTTP\CSP $CSP)
+	{
+		$vSource = $this->Config()->Get('plugin', 'mp4_file', 'self');
+		$CSP->add('media-src', $vSource);
+	}
+}

plugins/video-on-login-screen/js/video-on-login.js

@@ -0,0 +1,107 @@
+(rl => {
+
+	rl && addEventListener('rl-view-model', e => {
+		const id = e.detail.viewModelTemplateID;
+		if (e.detail && ('AdminLogin' === id || 'Login' === id)) {
+			let
+				nId = null,
+				script;
+
+			let
+				iRate = 1,
+				sRate = window.rl.pluginSettingsGet('video-on-login-screen', 'playback_rate')
+			;
+
+			switch (sRate)
+			{
+				case '25%':
+					iRate = 0.25;
+					break;
+				case '50%':
+					iRate = 0.5;
+					break;
+				case '75%':
+					iRate = 0.75;
+					break;
+				case '125%':
+					iRate = 1.25;
+					break;
+				case '150%':
+					iRate = 1.5;
+					break;
+				case '200%':
+					iRate = 2;
+					break;
+			}
+			const
+				mode = 'Login' === id ? 'user' : 'admin',
+
+				doc = document,
+				loginContainer = doc.querySelectorAll('#V-Login #V-AdminLogin'),
+				container = doc.querySelector('#rl-content'),
+
+				ShowVideo = () => {
+					if (loginContainer) {
+						var stEl = doc.createElement('style');
+						stEl.innerHTML =
+							`
+							#video-el {
+								z-index: -1;
+								overflow: hidden;
+								position: absolute;
+								left: 0;
+								right: 0;
+								top: 0;
+								bottom: 0;
+								margin: auto;
+								height: 100vh;
+								width: 100%;
+								object-fit: cover;
+							}
+							`
+						var ref = doc.querySelector('script');
+						ref.parentNode.insertBefore(stEl, ref);
+
+						const oEl = doc.createElement('div');
+						oEl.className = 'video-div';
+						const vEl = doc.createElement('video');
+						vEl.setAttribute('loop', true);
+						vEl.setAttribute('playsinline', '');
+						vEl.setAttribute('muted', '');
+						vEl.setAttribute('autoplay', '');
+						vEl.muted = true;
+						vEl.setAttribute('playbackRate', iRate);
+						vEl.setAttribute('id', 'video-el');
+						oEl.appendChild(vEl);
+						const sEl = doc.createElement('source');
+						sEl.setAttribute('src', rl.pluginSettingsGet('video-on-login-screen', 'mp4_file'));
+						sEl.setAttribute('type', 'video/mp4');
+						vEl.appendChild(sEl);
+
+						container.before(oEl);
+
+					}
+				},
+
+				DestroyVideo = () => {
+					const vEl = doc.querySelector('#video-el');
+					if (vEl) {
+						vEl.parentElement.removeChild(vEl);
+					}
+				};
+
+			window.ShowVideo = ShowVideo;
+
+			window.DestroyVideo = DestroyVideo;
+
+			ShowVideo();
+
+			addEventListener(`sm-${mode}-login-response`, e => {
+				if (!e.detail.error) {
+					DestroyVideo();
+				}
+			});
+		}
+	});
+
+})(window.rl);

snappymail/v/0.0.0/app/libraries/snappymail/http/csp.php

@@ -22,6 +22,7 @@ class CSP
 		// Knockout.js requires unsafe-inline?
 //		'script-src' => ["'self'", "'unsafe-inline'", "'unsafe-eval'"],
 		'img-src' => ["'self'", 'data:'],
+		'media-src' => ["'self'", 'data:'],
 		'style-src' => ["'self'", "'unsafe-inline'"],
 	];