Code Snippet: GDPR compliant Vimeo Videos

<?php
/*
Plugin Name:	MA GDPR Vimeo
Description:	GDPR compliant Vimeo video embedding
Author:			<a href="https://www.altmann.de/">Matthias Altmann</a>
Project:		Code Snippet: GDPR Compliant Vimeo Embed
Version:		1.2.0
Plugin URI:		https://www.altmann.de/blog/code-snippet-gdpr-compliant-vimeo-videos/
Description:	en: https://www.altmann.de/blog/code-snippet-gdpr-compliant-vimeo-videos/
				de: https://www.altmann.de/blog/code-snippet-dsgvo-konforme-vimeo-videos/
Copyright:		© 2023, Matthias Altmann


Notes:
Oxygen Builder
	Modals, on close, reset src attribute of iframes to stop running videos. 
	That is done by this.src = this.src, which also kills event handlers we assigned.
	If a modal is closed with a playing video, it's stopped, but we'll lose control 
	over it since we don't get any further events. 
Bricks
	Bricks keeps rendering the shortcode while you type, for every single char. So it tries to render the shortcode even it's not yet complete.
	Assume, you're typing the video id char by char, e.g. 347119375, the shortcode is rendered with video id 3, then 34, then 347... and so on.
	Honestly, that's the weirdest shortcode handling I've ever seen.
	Every time a ma-gdpr-vimeo shortcode has to be rendered, my snippet makes a call to Vimeo to check if the video exists. 
	And it creates folders 3, 34, 347, ... each containing a JSON file with the info about an invalid video id.
	I didn't find yet a way to handle or change that behavior.

Version History:
Date		Version		Description
--------------------------------------------------------------------------------------------------------------
2023-12-30	1.2.0		New Features:
						- Complete rebuild of JS
						- Now using Vimeo Player API to provide more control
						- Video player management via players registry and observer
							- Pause current video if another one is started
							- Pause video if modal/popup closed (evaluated by visibility of parent DOM element)
						- Support for dynamically embedded videos using AJAX calls:
							- Removed init prevention for AJAX calls
							- Added PHP method MA_GDPR_Vimeo::enable_footercode() to trigger output of footer
							  code (styles, scripts, svg) for video embeds dynamically loaded by AJAX calls
 							- Play click handler is now assigned as onclick event instead of collecting all 
							  videos after page load. This eliminates the need for an extra click handler 
							  initialization for players dynamically loaded after page load.  
						- Optimizations for accessibility 
						Fixes:
						- Prefixed wrapper/player IDs with snippet slug to prevent IDs starting with number
						- Fallback for aspect ratio via padding-top (CSS variable, @supports rule) 
						  for older browsers not supporting aspect-ratio like Safari < V15
2023-11-09	1.1.1		Fix: "Attempt to assign property 'notes' on null" error in get_video_details()
2023-04-04	1.1.0		New Feature: Pause handler for closed Oxygen Modals
2023-04-03	1.0.0		Initial Release
2023-04-02	0.0.0		Development start

Samples
https://vimeo.com/347119375	> Sample Video
https://vimeo.com/814361316 > Orbiting Earth

Documentation:
https://developer.vimeo.com/api/oembed/videos


*/


if (!class_exists('MA_GDPR_Vimeo')) :

class MA_GDPR_Vimeo {

	const TITLE							= 'MA GDPR Vimeo';
	const SLUG							= 'ma-gdpr-vimeo';
	const VERSION						= '1.2.0';

	// ===== CONFIGURATION ==============================================================================================
	public static $timing				= false; 	// Write timing info to wordpress debug.log if WP_DEBUG enabled		

	private static $default_width				= '100%';		// width of the video block. Can be specified in %, px
	private static $default_aspect_ratio		= '16/9';		// aspect ratio of the video block. Syntax X:X or X/X
	private static $default_gdpr_text_size		= '.7em';		// font size for GDPR text
	private static $default_new_window			= false;		// open video in new window

	private static $default_gdpr_text 			= [ 			// GDPR notice text in different languages.  
		'da' => ['Når du har trykket, vil videoen blive indlæst fra Vimeo\'s servere. Se vores %s for flere informationer.','privatlivspolitik'],
		'de' => ['Bei Klick wird dieses Video von den Vimeo Servern geladen. Details siehe %s.', 'Datenschutzerklärung'],
		'en' => ['When clicked, this video is loaded from Vimeo servers. See our %s for details.', 'privacy policy'],
		'es' => ['Al hacer clic, este vídeo se carga desde los servidores de Vimeo. Consulte la %s para más detalles.', 'política de privacidad'],
		'fi' => ['Klikattuasi, tämä video ladataan Vimeon palvelimilta. Katso lisätietoja meidän %s.', 'tietosuojaselosteesta'],
		'fr' => ['En cliquant, cette vidéo est chargée depuis les serveurs de Vimeo. Voir la %s.', 'politique de confidentialité'], 
		'hu' => ['Kattintás után ez a videó a Vimeo szervereiről kerül lejátszásra. A részletekért olvassa el az %s oldalt.', 'Adatkezelési Tájékoztatót'],
		'it' => ['Quando si clicca, questo video viene caricato dai server di Vimeo. Vedere %s per i dettagli.', 'l\'informativa sulla privacy'],
		'ja' => ['クリックすると、この動画が Vimeo サーバーから読み込まれます。詳細については、%s をご覧ください。', 'プライバシー ポリシー'],
	]; 

	// ===== INTERNAL ===================================================================================================
	private static $trace_level_base	= 0;		// initial trace level - for indentation of debug messages
	private static $thumbnails_base		= null;		// will be set to the thumbnail base folder dir and url
	private static $footercode_needed	= false;	// will be set to true if shortcode used on current page
	private static $footercode_minimize = true;		// should we minimize all footer code (style, script, svg)?
	private static $total_runtime		= 0;
	private static $urlformat_json_embed= 'https://vimeo.com/api/oembed.json?url=https%%3A//vimeo.com/%s';
	private static $urlformat_json_api	= 'http://vimeo.com/api/v2/video/%s.json';


	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Initialize the snippet 
	 * */
	public static function init() {
		$st = microtime(true);
		if (WP_DEBUG && self::$timing) {self::$trace_level_base = count(debug_backtrace()) -1;}

		// check thumbnails directory
		self::$thumbnails_base = self::get_thumbnails_base();
		if (!self::$thumbnails_base) 	{self::set_admin_notice('warning', 'Error creating thumbnail cache base folder.'); return;}
		
		add_shortcode('ma-gdpr-vimeo', [__CLASS__, 'shortcode']);
		add_action('wp_footer',[__CLASS__,'footercode']);
		// for timing
		add_action('shutdown', [__CLASS__,'total_runtime']);

		if ( ($_GET['ct_builder']??null) == true) {
			// emit styles, script, svg when Oxygen Builder is active
			self::$footercode_needed = true;
		}
		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s() Timing: %.5f sec.', self::get_callstack_padding(), __CLASS__, __FUNCTION__, $et-$st));}
		self::$total_runtime += $et-$st;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Return padding for timing strings. Evaluated based on initial debug_backtrace count. 
	 * @return int	The callstack level
	 */
	private static function get_callstack_padding(){
		return str_pad('',count(debug_backtrace(!DEBUG_BACKTRACE_PROVIDE_OBJECT|DEBUG_BACKTRACE_IGNORE_ARGS)) - self::$trace_level_base);
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Logs total timing for shortcodes on a page 
	 */
	public static function total_runtime(){
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s() Timing: %.5f sec.', self::get_callstack_padding(), __CLASS__, __FUNCTION__,self::$total_runtime));}
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Set a WP Admin notice
	 * @param string $type		The notice type (error, warning, success, info)
	 * @param string $msg		The message
	 */
	private static function set_admin_notice($type, $msg) {
		add_action('admin_notices', function() use($type, $msg){
			echo sprintf('<div class="notice notice-%s"><p>[%s] %s</p></div>', $type, MA_GDPR_Vimeo::TITLE, $msg);
		});
		error_log(sprintf('%s%s::%s() %s.', self::get_callstack_padding(), __CLASS__, __FUNCTION__, ucfirst($type).': '.$msg)); 
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Return base dir/url for video thumbnails. 
	 * Create directory /wp-content/ma-gdpr-vimeo/ if necessary
	 * @return object|null	A dirinfo object (->dir, ->url)
	 */
	private static function get_thumbnails_base() {
		$st = microtime(true);

		$retval = (object)['dir'=>null,'url'=>''];
		$thumbnail_dir_info = wp_get_upload_dir();
		$retval->dir = $thumbnail_dir_info['basedir'].'/'.self::SLUG;
		$retval->url = $thumbnail_dir_info['baseurl'].'/'.self::SLUG;
		// create thumbnails folder if not exists
		if (!file_exists($retval->dir)) {
			if (!@mkdir($retval->dir)) {
				error_log(sprintf('[%s] Error creating thumbnail cache base folder.', self::TITLE)); 
				return null;
			}
		}
		// create scheme-less URL
		$retval->url = preg_replace('/^https?\:/','',$retval->url);

		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s() Timing: %.5f sec.', self::get_callstack_padding(), __CLASS__, __FUNCTION__, $et-$st));}
		return $retval;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Return a link to the privacy policy page (if configured in WordPress) or just the passed text
	 * @param string $text	The text to return if privacy policy page is not defined in WordPress
	 * @return string		The HTML link element for the privacy policy page or the initial text
	 */
	private static function get_privacy_policy_link(string $text='privacy policy') {
		$pplink = get_the_privacy_policy_link();
		return  $pplink ? $pplink : $text; 
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Parses a Vimeo URL for a video ID.
	 * Handles numerous URL formats, or plain video ID.
	 * @param string $s	The URL/string to parse
	 * @return array	Array containing key v (video ID), or empty
	 */
	private static function parse_video_url(string $s=''): array {
		$st = microtime(true);
		$retval = [];
		// regex for parsing vimeo url variants
		$re = '/^
			(?:https?\:)?\/{2}														# protocol http, https, or schemeless
			(?:www\.)?																# optional www
			(?:(?:player\.)?vimeo\.com)\/											# domain variants
			(?:(?:video)[\/]?) ?													# video term
			([A-Za-z0-9\-\_]+)														# THE ID
		/x';
		// parse url
		if (preg_match($re,$s,$matches)) 							{$retval['v'] = $matches[1];}
		// id only?
		else if (preg_match('/^([A-Za-z0-9\-\_]+)$/',$s,$matches))	{$retval['v'] = $matches[1];}
	
		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s("%s") => %s Timing: %.5f sec.', 
			self::get_callstack_padding(), __CLASS__, __FUNCTION__, $s, json_encode($retval), $et-$st));}
		return $retval;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/** 
	 * Get the image type as extension string from an integer value. Handles gif, jpg, pmg, webp.
	 * @param int $image_type 	The image type as int 
	 * @return string 			The image extension
	 */
	private static function get_image_type_as_string(int $image_type): string {
		switch ($image_type) {
			case IMAGETYPE_GIF: 	return 'gif';
			case IMAGETYPE_JPEG:	return 'jpg';
			case IMAGETYPE_PNG:		return 'png';
			case IMAGETYPE_WEBP:	return 'webp';
			default:				return '';
		}
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Get type, width, height from an image file.
	 * @param string $filepath 	The image file path
	 * @return object 			The image info object: (bool) status, (string) type, (int) width, (int) height
	 */
	private static function get_image_info(string $filepath): object {
		$retval = (object)[
			'status'	=> false,
			'type'		=> null,
			'width'		=> null,
			'height'	=> null,
		];
		if ($result = getimagesize($filepath)) {
			$retval->status = true;
			$retval->type 	= self::get_image_type_as_string($result[2]);
			$retval->width	= $result[0];
			$retval->height	= $result[1];
		}
		return $retval;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Parses some info from an vimeo embed request result
	 * @param object $data	The embed request result
	 * @return object 		The info parsed 
	 */
	private static function parse_embed_info(object $data): object {
		$retval = (object)[
			'embed_code' 	=> null,
			'app_id'		=> null,
			'title'			=> null,
			'status_code' 	=> null,
		];
		$html = $data->html??'';
		/* Sample: 
		<iframe src="https://player.vimeo.com/video/347119375?h=1699409fe2&app_id=122963&autoplay=1&color=ef2200&byline=0&portrait=0" 
			width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Sample Video"></iframe>
		*/
		if (preg_match('/[\?&;]h=([\da-f]+)/',$html,$matches)) 		{$retval->embed_code = $matches[1];}
		if (preg_match('/[\?&;]app_id=([\da-f]+)/',$html,$matches))	{$retval->app_id = $matches[1];}
		if (preg_match('/title="([^"]+)"/',$html,$matches)) 		{$retval->title = html_entity_decode($matches[1]);}
		if ($data->domain_status_code??'') 							{$retval->domain_status_code = $data->domain_status_code;}
		return $retval;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Get details for video $id, containing e.g. thumbnails, if already downloaded. Load if not yet available.
	 * @param string $id	The video ID
	 * @return object		Object with (bool) status, (int) status_code, (string) status_text, (object) info, (object) thumbnails
	 */
	private static function get_video_details(string $id): object {
		$st = microtime(true);
		$retval = (object)[
			'status' 		=> false,
			'notes'			=> [],
			'embed'			=> (object)['code'=>null,'text'=>null,'data'=> null],
			'api'			=> (object)['code'=>null,'text'=>null,'data'=> null],
			'thumbnails'	=> null,
		];
		if (!self::$thumbnails_base) 	{goto DONE;}
		// check if directory for this video exists
		$vid_dir = self::$thumbnails_base->dir.'/'.$id;
		if (!file_exists($vid_dir)) {
			if (!@mkdir($vid_dir)) {
				$note = sprintf('Error creating cache folder for video %s.', $id);
				$retval->notes[] = $note;
				error_log('['.self::TITLE.'] '.$note); 
				goto DONE;
			}
		}
		$info_file_path = $vid_dir.'/'.$id.'.json';
		// read from cache if available
		if (file_exists($info_file_path)) {
			// read from cache
			$result = json_decode(@file_get_contents($info_file_path));
			// status OK and thumbnails available?
			if ($result && ($result->status??null) && ($result->thumbnails??[])) {
				$retval = $result;
				goto DONE;
			}
		}


		// Retrieve from Vimeo, using current language
		$referer = ($_SERVER['HTTPS']??'' == 'on' ? 'https:' : 'http').'//'.($_SERVER['HTTP_HOST']??'');
		$http_request_headers = [
			'Accept-language: '.self::get_current_language(),
			'Referer: '.$referer,
		];
		$options = ['http'=>['method'=>'GET','header'=>implode("\r\n",$http_request_headers)]];
		$context = stream_context_create($options);

		// get embed info, to get the embed code
		$url = sprintf(self::$urlformat_json_embed, $id);
		$result = @file_get_contents($url, false, $context);
		// check status
		$http_status = $http_response_header[0];
		preg_match( "#HTTP/[0-9\.]+\s+([0-9]+)\s(.*)#",$http_status, $matches);
		$retval->embed->code = intval($matches[1]);
		$retval->embed->text = trim($matches[2]);
		if ($retval->embed->code == 200) {
			$retval->embed->data = json_decode($result);
			// parse embed info
			$parsed = self::parse_embed_info($retval->embed->data);
			if (($parsed->domain_status_code??null) == 403) {
				$retval->embed->code = 403;
				$retval->embed->text = 'Forbidden';
			}
			if (($parsed->domain_status_code??null) == 404) {
				$retval->embed->code = 404;
				$retval->embed->text = 'Not Found';
			}
			$retval->parsed = $parsed;
		}
		if ($retval->embed->code != 200) {
			$note = sprintf('Video %s embed: %s', $id, $retval->embed->text);
			$retval->notes[] = $note;
			error_log('['.self::TITLE.'] '.$note); 
			goto DONE;
		}


		// get api info
		$url = sprintf(self::$urlformat_json_api, $id);
		$result = @file_get_contents($url, false, $context);
		// check status
		$http_status = $http_response_header[0];
		preg_match( "#HTTP/[0-9\.]+\s+([0-9]+)\s(.*)#",$http_status, $matches);
		$retval->api->code = intval($matches[1]);
		$retval->api->text = trim($matches[2]);
		if ($retval->api->code == 200) {
			$retval->api->data = json_decode($result);
			// flatten if json is an array
			if (is_array($retval->api->data)) {$retval->api->data = $retval->api->data[0];}
		} else {
			$note = sprintf('Video %s API: %s', $id, $retval->api->text);
			$retval->notes[] = $note;
			error_log('['.self::TITLE.'] '.$note); 
		}
		
		$retval->status = (($retval->embed->code??null) == 200) && (($retval->api->code??null) == 200);

		// check thumbnails
		if ($retval->status && !($retval->thumbnails??null)) {
			$retval->thumbnails = (object)[];
			$img_path = $vid_dir.'/'.$id;
			foreach(['embed:url','api:small','api:medium','api:large'] as $slug) {
				list($obj,$tag) = explode(':',$slug,2);
				if ($img_url = $retval->{$obj}->data->{'thumbnail_'.$tag}??null) {
					// load and store thumbnail
					if ($img_data = @file_get_contents($img_url)) {
						$status = $http_response_header[0];
						if (!preg_match('/200\sOK/',$status)) continue;
						// store as tmp file to get image type from exif
						file_put_contents($img_path.'.tmp', $img_data);
						$img_info = self::get_image_info($img_path.'.tmp');
						if ($img_info->status) {
							$img_spec = $img_info->width.'.'.$img_info->type;
							// store with correct filename
							if (@rename($img_path.'.tmp', $img_path.'_'.$img_spec)) {
								// update json
								$name = basename($img_path.'_'.$img_spec);
								$retval->thumbnails->{$img_info->width} = $name;
								@file_put_contents($info_file_path, json_encode($retval,JSON_PRETTY_PRINT));
							}
						}
					}
				}
			}
		}
		
		DONE:
		// save video details, even if not yet complete
		@file_put_contents($info_file_path, json_encode($retval,JSON_PRETTY_PRINT));

		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s("%s") Timing: %.5f sec.', self::get_callstack_padding(), __CLASS__, __FUNCTION__, $id, $et-$st));}

		return $retval;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Get the current page/post get_current_language
	 * @return string		The language code as e.g. "de", "en"
	 */
	private static function get_current_language(): string {
		$retval = get_locale();
		// Is a translation plugin active? Supporting Polylang, WPML 
		foreach (['pll_current_language','wpml_current_language'] as $func) {
			if (function_exists($func)) {$retval = $func(); break;}
		}
		$retval = str_replace('_','-',$retval);
		$retval = explode('-',$retval??'')[0];
		return $retval;
	}

	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Handle the shortcode "ma-gdpr-vimeo". 
	 * @param array $atts		The shortcode attributes
	 * @param string $content	The content of the shortcode
	 * @return string			The output
	 */
	public static function shortcode(array $shortcode_atts = [], string $content = ''): string {
		$st = microtime(true);
		if (WP_DEBUG && self::$timing) {self::$trace_level_base = count(debug_backtrace()) -1;}

		$lang = self::get_current_language();

		// get defaults for unspecified attributes
		$atts_default = [
			'slug'				=> self::SLUG,
			'video'				=> null,
			'uniqid'			=> null,
			'width'				=> self::$default_width,
			'aspect-ratio'		=> self::$default_aspect_ratio,
			'notice-class'		=> null,
			'notice-style'		=> null,
			'gdpr-text'			=> isset(self::$default_gdpr_text[$lang]) 
									? sprintf(self::$default_gdpr_text[$lang][0],self::get_privacy_policy_link(self::$default_gdpr_text[$lang][1])) 
									: sprintf(self::$default_gdpr_text['en'][0],self::get_privacy_policy_link(self::$default_gdpr_text['en'][1])),
			'gdpr-text-size'	=> self::$default_gdpr_text_size,
			'alt'				=> null,
			'title'				=> null,
			'thumbnail'			=> null,
			'title-text'		=> null,
			'title-class'		=> null,
			'title-style'		=> null,
			'play-button'		=> 'vimeo', // currently included: vimeo, circle, circle-o, play
			'play-button-style'	=> null,
			'play-button-color'	=> null,
			'new-window'		=> self::$default_new_window,
		];

		// merge global settings
		$atts = array_merge($atts_default, $GLOBALS['ma_gdpr_vimeo']??[]);
		// choose correct language for gdpr-text
		if ($GLOBALS['ma_gdpr_vimeo']['gdpr-text-'.strtolower($lang)]??'') {
			$atts['gdpr-text'] = $GLOBALS['ma_gdpr_vimeo']['gdpr-text-'.strtolower($lang)];
		}
		// allow html in shortcode attributes title-text, gdpr-text
		foreach (['title-text','gdpr-text'] as $att) {
			if ($shortcode_atts[$att]??'') {$shortcode_atts[$att] = html_entity_decode($shortcode_atts[$att]);}
		}
		// merge shortcode attributes
		$atts = (object)array_merge($atts, $shortcode_atts);

		if ($atts->video) {
			$video = self::parse_video_url($atts->video);
			if (isset($video['v'])) {
				$atts->id = $video['v'];
			}
		}

		// any other parameter will be passed to vimeo directly
		$vimeo_parameters = [];
		foreach ($atts as $att_key => $att_val) {
			if (!in_array($att_key,array_keys($atts_default))) {
				$vimeo_parameters[$att_key] = $att_val;
			} 
		}

		if (!isset($atts->id) || ($atts->id == '' )) 			{return sprintf('[%s] Missing video id.',self::TITLE);}
		if (preg_match('/[^A-Za-z0-9\-\_]/',$atts->id))			{return sprintf('[%s] Invalid video id.',self::TITLE);}
		// generate an unique id (for the case a video is embedded multiple times)
		$atts->uniqid = $atts->slug.'-'.uniqid();

		if (!self::$thumbnails_base) 							{return sprintf('[%s] Error creating thumbnail directory.',self::TITLE);}
		// check if we already have a thumbnail
		$video_details = self::get_video_details($atts->id);
		if (!$video_details->status) 							{return sprintf('[%s] %s',self::TITLE, implode(', ',$video_details->notes));}

		// insert vimeo attributes
		if ($video_details->status) {
			foreach (['alt','title','title-text'] as $attr) {
				foreach (['title','author_name','description'] as $info) {
					$atts->{$attr} = str_replace('@'.$info.'@', $video_details->embed->data->{$info}??'', $atts->{$attr}??'');
				}

			}
		}

		$thumbnail = '';
		$sources = [];
		$click_handler = 'onclick="ma_gdpr_vimeo.click(this)"';


		if ($atts->thumbnail) {
			if (is_numeric($atts->thumbnail)) {
				// numeric value => media id
				// get available image sizes
				$metadata = wp_get_attachment_metadata($atts->thumbnail);
				$image_sizes = [];
				// add original size
				$img_src = wp_get_attachment_image_src($atts->thumbnail,'full');	// '0': url, '1': width, '2': height, '3': resized
				$mime_type = get_post_mime_type($atts->thumbnail);
				$image_sizes['original'] = [
					'file'		=> $metadata['file'],
					'width'		=> $metadata['width'],
					'height'	=> $metadata['height'],
					'mime-type'	=> $mime_type,
					'filesize'	=> $metadata['filesize']??null,
					'url'		=> $img_src[0],
					'key'		=> 'full',
				];
				// add resized sizes
				foreach ($metadata['sizes'] as $key => $data) {
					// retrieve url for specific size
					$img_src = wp_get_attachment_image_src($atts->thumbnail,$key);	// '0': url, '1': width, '2': height, '3': resized
					$data['url'] = $img_src['0']; 
					$data['key'] = $key;
					$image_sizes[$key] = $data;
				}
				// sort image sizes by width ascending
				uasort($image_sizes, function($a,$b){
					if ($a['width'] == $b['width']) {return 0;}
					return ($a['width'] < $b['width']) ? -1 : 1;
				});

				// get largest image 
				$largest = (object)end($image_sizes);

				foreach ($image_sizes as $key => $data) {
					// to improve thumbnail quality, use higher res image if we reach half its size 
					$sources[] = '<source media="(min-width:'.($data['width']/2).'px)" type="'.$data['mime-type'].'" srcset="'.$data['url'].'">';
				}
				// create thumbnail
				$thumbnail .= sprintf('<picture class="ma-gdpr-vimeo-thumbnail" '.$click_handler.'>%s <img loading="lazy" src="%s" width="%s" height="%s" alt="%s" title="%s"></picture>',
									implode('',array_reverse($sources)), $largest->url, $largest->width, $largest->height, $atts->alt??'', $atts->title??'');
			} else {
				$sources = [];
				$thumbnail .= '<picture class="ma-gdpr-vimeo-thumbnail" '.$click_handler.'>';
				$thumbnail .= sprintf('<img loading="lazy" src="%s" alt="%s" title="%s">',$atts->thumbnail, $atts->alt, $atts->title);
				$thumbnail .= '</picture>';
			}
		} else {
			$thmbs = $video_details->thumbnails;
			foreach(get_object_vars($thmbs) as $size => $name) {
				$type = substr(strrchr($name,'.'),1);
				// to improve thumbnail quality, use higher res image if we reach half its size 
				$sources[] = '<source media="(min-width:'.($size/2).'px)" type="image/'.$type.'" srcset="'.self::$thumbnails_base->url.'/'.$atts->id.'/'.$name.'">';
			}
			// get smallest thumbnail as img src
			$thmbs = (array)$thmbs;
			$smallest = array_shift($thmbs);
			$img_src = self::$thumbnails_base->url.'/'.$atts->id.'/'.$smallest;
			$thumbnail .= '<picture id="'.$atts->uniqid.'-thumbnail'.'" class="ma-gdpr-vimeo-thumbnail">' . implode('',array_reverse($sources)) . '<img src="'.$img_src.'" alt="'.$atts->alt.'" title="'.$atts->title.'"></picture>';
		}

		// calculate dimensions of video block depending on width and aspect ratio
		list ($arw,$arh) = explode('/',str_replace(':','/',$atts->{'aspect-ratio'}),2); // aspect ratio elements
		list ($width_value, $width_unit) = ['100','%']; // default width value and unit
		// split width value and unit
		preg_match('/^(\d+)(.+)$/',$atts->width,$matches);
		if (count($matches) == 3) {array_shift($matches); list ($width_value, $width_unit) =  $matches;}
		// calculate block dimensions
		$block_width = $width_value.$width_unit;
		$block_height = ($width_value * ($arh/$arw)) . $width_unit;

		// privacy policy url and link
		$atts->{'gdpr-text'} = str_replace('{privacy-policy-url}', get_privacy_policy_url(), $atts->{'gdpr-text'});
		$atts->{'gdpr-text'} = str_replace('{privacy-policy-link}', get_the_privacy_policy_link(), $atts->{'gdpr-text'});

		// title overlay
		$title_overlay = !empty($atts->{'title-text'})
			? sprintf('<div class="ma-gdpr-vimeo-title %1$s" %2$s>%3$s</div>',
				$atts->{'title-class'} ?? '',
				$atts->{'title-style'} ? 'style="'.$atts->{'title-style'}.'"' : '',
				$atts->{'title-text'}
				)
			: '';

		// play button style, color
		$play_button_style = '';
		if ($atts->{'play-button-style'}) {$play_button_style .= $atts->{'play-button-style'}.';';}
		if ($atts->{'play-button-color'}) {$play_button_style .= 'color:'.$atts->{'play-button-color'}.';';}
		if ($play_button_style) {$play_button_style = 'style="'.$play_button_style.'"';}


		// vimeo iframe
		$content = <<<END_OF_CONTENT
		<iframe src="https://player.vimeo.com/video/{$video_details->api->data->id}?h={$video_details->parsed->embed_code}&app_id={$video_details->parsed->app_id}&autoplay=0&dnt=1" 
			style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
		<script src="https://player.vimeo.com/api/player.js"></script>
END_OF_CONTENT;


		$aspect_ratio		= str_replace(':','/',$atts->{'aspect-ratio'});
		$new_window			= $atts->{'new-window'};
		$vimeo_params		= count($vimeo_parameters) ? base64_encode(json_encode($vimeo_parameters)) : '';
		$play_button 		= $atts->{'play-button'} ?? '';
		$play_button_class	= $atts->{'play-button-class'} ?? '';
		$notice_class		= $atts->{'notice-class'} ?? '';
		$notice_style		= $atts->{'notice-style'} ?? '';
		$gdpr_text_size 	= $atts->{'gdpr-text-size'};
		$gdpr_text			= $atts->{'gdpr-text'};
		$content_b64		= base64_encode($content);

		// @since 1.2.0 width/height/aspect-ratio now set via CSS var for older browsers not supporting aspect-ratio, like e.g. Safari <V15
		$retval = <<<END_OF_HTML
		<div id="{$atts->uniqid}" data-video-id="{$atts->id}" class="ma-gdpr-vimeo-wrapper" style="--_width:{$block_width};--_height:{$block_height};--_aspect-ratio:{$aspect_ratio};" data-new-window="{$new_window}" data-parameters="{$vimeo_params}">
			{$thumbnail}
			<svg id="{$atts->uniqid}-button" class="ma-gdpr-vimeo-button button-{$play_button} {$play_button_class}" tabindex="0" role="button" aria-label="play video" {$play_button_style} {$click_handler}><use xlink:href="#ma-gdpr-vimeo-play-button-{$play_button}"></use></svg>
			{$title_overlay}
			<div class="ma-gdpr-vimeo-notice {$notice_class}" style="font-size:{$gdpr_text_size}; {$notice_style}">{$gdpr_text}</div>
			<div id="{$atts->uniqid}-content" class="ma-gdpr-vimeo-content" style="display:none">{$content_b64}</div>
		</div>
END_OF_HTML;
		self::$footercode_needed = true;

		DONE:
		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s() Timing: %.5f sec.', self::get_callstack_padding(), __CLASS__, __FUNCTION__, $et-$st));}
		self::$total_runtime += $et-$st;
		return $retval;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Enables emission of footercode (styles, scripts, svg) for the video embed. 
	 * Can be used for pages where video is embedded dynamically by an AJAX call.
	 * On the parent page, call MA_GDPR_Vimeo::enable_footercode()
	 * @since 1.2.0
	 */
	public static function enable_footercode() {
		self::$footercode_needed = true;
	}
	//-------------------------------------------------------------------------------------------------------------------
	/**
	 * Emits style, script, svg definitions
	 */
	public static function footercode() {
		$st = microtime(true);

		if (!self::$footercode_needed) {goto DONE;}

		// debugging info
		$codebase = basename(__FILE__) == 'ma-gdpr-vimeo.php' ? 'Plugin' : 'Code Snippet';
		echo sprintf('<span id="ma-gdpr-vimeo-info" data-nosnippet style="display:none">%s %s %s</span>', $codebase, self::SLUG, self::VERSION); 
		
		// emit style
		// @since 1.2.0: @supports rule provides wrapper height for older browsers not supporting aspect-ratio, like e.g. Safari <V15
		$style = <<<'END_OF_STYLE'
		<style id="ma-gdpr-vimeo-style">
			.ma-gdpr-vimeo-wrapper {position:relative; display:flex; isolation:isolate; width:var(--_width);aspect-ratio:var(--_aspect-ratio);}
			@supports not (aspect-ratio:1/1) {.ma-gdpr-vimeo-wrapper{height:var(--_height);padding-top:var(--_height);}}
			.ma-gdpr-vimeo-thumbnail {position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; display:flex; cursor:pointer; }
			.ma-gdpr-vimeo-thumbnail img {width:100%; height:100%; object-fit:cover; object-position:50% 50%;}
			.ma-gdpr-vimeo-button {position:absolute; z-index:4; top:50%; left:50%; transform:translate(-50%,-50%); width:70px; height:70px; cursor:pointer; color:white;}
			.ma-gdpr-vimeo-button.button-vimeo {color:black; filter:drop-shadow(0px 0px 4px darkgray);}
			.ma-gdpr-vimeo-button.button-circle {filter:drop-shadow(0px 0px 4px darkgray);}
			.ma-gdpr-vimeo-button.button-circle-o {filter:drop-shadow(0px 0px 4px darkgray);}
			.ma-gdpr-vimeo-notice {position:absolute; z-index:2; width:100%; left:0; right:0; bottom:0; max-width:100%; text-align:center; font-size:.7em; background-color:rgba(255,255,255,.8); padding:.2em .5em;}
			.ma-gdpr-vimeo-notice:empty {display:none;}
			.ma-gdpr-vimeo-title {position:absolute; z-index:3; width:100%; top:1em; padding:0 1em; color:white; text-shadow: black 1px 1px 2px;}
		</style>
END_OF_STYLE;
		if (self::$footercode_minimize) { 
			$style = preg_replace('/\/\*.*?\*\//','',$style); 
			$style = preg_replace('/\r?\n */','',$style); 
			$style = preg_replace('/\t/','',$style); 
		}
		echo $style;

		// emit code
		// Vimeo Player API: https://developer.vimeo.com/player/sdk/embed
		$script = <<<'END_OF_SCRIPT'
		<script id="ma-gdpr-vimeo-script" type="text/javascript">
		"use strict";
		
		if ((typeof window.ma_gdpr_vimeo == 'undefined')){
			window.ma_gdpr_vimeo = {
				debug: (new URLSearchParams(window.location.search)).get('ma-gdpr-vimeo-debug')!=null,
				player_observer_timer: 1000,
				player_observer_interval: null,
				players: {}, /* list of active players */

				init: function(){
					this.debug && console.log('MA GDPR Vimeo initialized.');
				},

				player_observer_init: function(){
					if (this.player_observer_interval == null) {
						this.player_observer_interval = setInterval(ma_gdpr_vimeo.player_observer, this.player_observer_timer);
						this.debug && console.log('MA GDPR Vimeo Player Observer initialized.');
					}
				},

				player_observer: function() {
					/* pauses video if iframe is not visible anymore - e.g. closed modal */
					ma_gdpr_vimeo.debug && console.log('MA GDPR Vimeo Player Observer (entries: '+Object.values(ma_gdpr_vimeo.players).length+')');
					for (let $playerID in ma_gdpr_vimeo.players) {
						let $player = ma_gdpr_vimeo.players[$playerID];
						ma_gdpr_vimeo.debug && console.log('MA GDPR Vimeo Player Observer checking player '+$playerID+'...');
						
						$player.player.getPaused().then(function ($paused) {
							let $state = $paused ? 'STOP' : 'PLAY';
							ma_gdpr_vimeo.debug && console.log('MA GDPR Vimeo Player Observer got status of video '+$playerID+' as '+$state); 
							if ($state=='PLAY') {
								let $iframe = document.getElementById($playerID);
								if ($iframe) {
									ma_gdpr_vimeo.debug && console.log('MA GDPR Vimeo Player Observer checking iframe offsetParent '+$iframe.offsetParent);
									if (($iframe.offsetParent === null)) {
										ma_gdpr_vimeo.debug && console.log('MA GDPR Vimeo Player Observer pauses hidden video '+$playerID);
										$player.player.pauseVideo();
									}
								}
							}
						});
					}
				},
				player_stop_all_except: function($apiID) {
					/* loop through players and pause all except this one */
					ma_gdpr_vimeo.debug && console.log('Looping players', ma_gdpr_vimeo.players);
					for (let $playerID in ma_gdpr_vimeo.players) {
						ma_gdpr_vimeo.debug && console.log('Checking player '+$playerID);
						if ($playerID != $apiID) {
							ma_gdpr_vimeo.debug && console.log('Pausing player '+$playerID);
							ma_gdpr_vimeo.players[$playerID].player.pause().then(function() {
								ma_gdpr_vimeo.debug && console.log('Paused player '+$playerID);
							}).catch(function($error) {
								console.log('error: '+$error.name);
							});
						}
					}
				},

				click: function($target){
					let $wrapper = $target.closest('.ma-gdpr-vimeo-wrapper'); 
					if (!$wrapper) return;
					if ($wrapper.getAttribute('data-new-window') == '1') {
						/* get the video id from the wrapper */
						let $video_id = $wrapper.getAttribute('data-video-id');
						window.open('https://vimeo.com/'+$video_id);
						return;
					}
					/* initialize the player observer */
					ma_gdpr_vimeo.player_observer_init();

					/* replace wrapper content with video iframe */
					let b64 = $wrapper.querySelector('.ma-gdpr-vimeo-content').innerText;
					let content = decodeURIComponent(atob(b64).split('').map(function(c) {
						return '%'+('00'+c.charCodeAt(0).toString(16)).slice(-2);
					}).join(''));
					$wrapper.innerHTML = content;

					/* check if Vimeo API has already been loaded */
					if (document.querySelectorAll('#ma-gdpr-vimeo-player-api').length==0 ) {
						/* load the Vimeo API */
						ma_gdpr_vimeo.debug && console.log('Loading Vimeo API...');
						let $script = document.createElement('script');
						$script.id = 'ma-gdpr-vimeo-player-api';
						$script.src = 'https://player.vimeo.com/api/player.js';
						/* handler for Vimeo API loaded */
						$script.onload = function ($script) {
							ma_gdpr_vimeo.debug && console.log('Vimeo API loaded.');
							ma_gdpr_vimeo.video_start($wrapper);
						};
						document.body.appendChild($script);
					} else {
						/* Vimeo API is already loaded */
						ma_gdpr_vimeo.video_start($wrapper);
					}

				},

				video_start: function($wrapper) {
					/* get the video id from the parent div's id attribute */
					let $videoID = $wrapper.getAttribute('data-video-id');
					let $apiID = $wrapper.getAttribute('id');
					ma_gdpr_vimeo.debug && console.log('Starting video '+$videoID+' from wrapper '+$apiID);
					/* get the inner dimensions of the wrapper */
					const $wrapperWidth = window.getComputedStyle($wrapper).width;
					const $wrapperHeight = window.getComputedStyle($wrapper).height;
					ma_gdpr_vimeo.debug && console.log('Video WxH',[$wrapperWidth,$wrapperHeight]);

					/* remove styles from wrapper */
					$wrapper.style.height = $wrapperHeight;
					$wrapper.style.padding = 'unset';

					/* connect player */
					let $iframe = document.querySelector('#'+$apiID+' iframe');
					let $player = new Vimeo.Player($iframe);
					ma_gdpr_vimeo.players[$apiID] = {player:$player};

					/* handler to stop other videos */
					$player.on('play', function($data) {
						let $apiID = this.element.offsetParent.getAttribute('id');
						ma_gdpr_vimeo.debug && console.log('Event play', this, $apiID, $data);
						ma_gdpr_vimeo.player_stop_all_except($apiID);
					});
					/* now start video */
					$player.play();
				},
			};
			ma_gdpr_vimeo.init();
		}
		</script>
END_OF_SCRIPT;
		if (self::$footercode_minimize) { 
			$script = preg_replace('/\/\*.*?\*\//','',$script); 
			$script = preg_replace('/\r?\n */','',$script); 
			$script = preg_replace('/\t/','',$script); 
		}
		echo $script;
		

		// emit play button svg symbol
		$symbol = <<<'END_OF_SYMBOL'
		<svg id="ma-gdpr-vimeo-symbols" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
					aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;">
			<defs>
				<symbol id="ma-gdpr-vimeo-play-button-vimeo" viewBox="0 0 500 350" >
					<path fill="currentColor" d="M500,74.767C500,33.472,466.55,0,425.277,0 H74.722C33.45,0,0,33.472,0,74.767v200.467C0,316.527,33.45,350,74.722,350h350.555C466.55,350,500,316.527,500,275.233V74.767z  M200,259.578v-188.3l142.789,94.15L200,259.578z"/>
					<path fill="white" d="M199.928,71.057l0.074,188.537l142.98-94.182 L199.928,71.057z"/>
				</symbol>
				<symbol id="ma-gdpr-vimeo-play-button-circle" viewBox="0 0 24 28" >
					<path fill="currentColor" d="M12 2c6.625 0 12 5.375 12 12s-5.375 12-12 12-12-5.375-12-12 5.375-12 12-12zM18 14.859c0.313-0.172 0.5-0.5 0.5-0.859s-0.187-0.688-0.5-0.859l-8.5-5c-0.297-0.187-0.688-0.187-1-0.016-0.313 0.187-0.5 0.516-0.5 0.875v10c0 0.359 0.187 0.688 0.5 0.875 0.156 0.078 0.328 0.125 0.5 0.125s0.344-0.047 0.5-0.141z"/>
				</symbol>
				<symbol id="ma-gdpr-vimeo-play-button-circle-o" viewBox="0 0 24 28" >
					<path fill="currentColor" d="M18.5 14c0 0.359-0.187 0.688-0.5 0.859l-8.5 5c-0.156 0.094-0.328 0.141-0.5 0.141s-0.344-0.047-0.5-0.125c-0.313-0.187-0.5-0.516-0.5-0.875v-10c0-0.359 0.187-0.688 0.5-0.875 0.313-0.172 0.703-0.172 1 0.016l8.5 5c0.313 0.172 0.5 0.5 0.5 0.859zM20.5 14c0-4.688-3.813-8.5-8.5-8.5s-8.5 3.813-8.5 8.5 3.813 8.5 8.5 8.5 8.5-3.813 8.5-8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z"/>
				</symbol>
				<symbol id="ma-gdpr-vimeo-play-button-play" viewBox="0 0 24 28" >
					<path fill="currentColor" d="M21.625 14.484l-20.75 11.531c-0.484 0.266-0.875 0.031-0.875-0.516v-23c0-0.547 0.391-0.781 0.875-0.516l20.75 11.531c0.484 0.266 0.484 0.703 0 0.969z"/>
				</symbol>
			</defs>
		</svg>
END_OF_SYMBOL;
		if (self::$footercode_minimize) { $symbol = preg_replace('/\r?\n[\t ]*/','',$symbol); }
		echo $symbol;


		DONE:
		$et = microtime(true);
		if (WP_DEBUG && self::$timing) {error_log(sprintf('%s%s::%s() Timing: %.5f sec.', self::get_callstack_padding(), __CLASS__, __FUNCTION__, $et-$st));}
		self::$total_runtime += $et-$st;
	}
}


//===================================================================================================================
// Initialize


// Warn about incompatibilities (allow_furl_open=OFF)
add_action('wp_loaded',function(){
	if (is_admin()) {
		if (!isset($GLOBALS['MA_GDPR_Vimeo_Incompatibilities'])) {$GLOBALS['MA_GDPR_Vimeo_Incompatibilities'] = [];}
		$codebase = basename(__FILE__) == 'ma-gdpr-vimeo.php' ? 'Plugin' : 'Code Snippet';
		// PHP allow_url_fopen = Off
		if (!ini_get('allow_url_fopen')) 
			{$GLOBALS['MA_GDPR_VimeoIncompatibilities'][] = 'PHP setting <code>allow_url_fopen</code> needs to be <b><On</b> for the '.$codebase.' to work correctly.';}
		if (count($GLOBALS['MA_GDPR_Vimeo_Incompatibilities'])) {
			if (WP_DEBUG && MA_GDPR_Vimeo::$timing) 
				{error_log('MA_GDPR_Vimeo / Incompatibilities: '.print_r($GLOBALS['MA_GDPR_Vimeo_Incompatibilities'],true));}
			add_action('admin_notices', function() use ($codebase){
				if (WP_DEBUG ) {error_log('MA_GDPR_Vimeo/ Incompatibilities: '.print_r($GLOBALS['MA_GDPR_Vimeo_Incompatibilities'],true));}
				echo '<div class="notice notice-warning is-dismissible">
						<p>The '.$codebase.'  "'.MA_GDPR_Vimeo::TITLE.'" is skipped: '.implode(' or ',$GLOBALS['MA_GDPR_Vimeo_Incompatibilities']).'</p>
					</div>';
			});
		}
	}
}, 1000); 

add_action('wp_loaded',function(){
	if (count($GLOBALS['MA_GDPR_Vimeo_Incompatibilities']??[])) return;
	if (wp_doing_cron()) 													return;	// don't run for CRON requests
	if (is_favicon()) 														return;	// don't run for favicon request
	if ((($_SERVER['QUERY_STRING']??null)	== 'service-worker'))			return;	// don't run for service-worker
	if ((($_SERVER['REQUEST_URI']??null)	== '/favicon.ico'))				return;	// don't run for favicon
	if ((strpos(($_SERVER['REQUEST_URI']??''),'/apple-touch-icon') === 0))	return;	// don't run for apple touch icons
	if ((strpos(($_SERVER['REQUEST_URI']??''),'/wp-content/') === 0))		return;	// don't run for dynamic wp-content file
		
	$codebase = basename(__FILE__) == 'ma-gdpr-vimeo.php' ? 'Plugin' : 'Code Snippet';
	if (WP_DEBUG && MA_GDPR_Vimeo::$timing) 
		{error_log(sprintf('%s Initializing %s for %srequest URI="%s" action="%s"', MA_GDPR_Vimeo::TITLE, $codebase, wp_is_json_request()?'JSON ':'',$_SERVER['REQUEST_URI']??'', $_REQUEST['action']??''));}

	MA_GDPR_Vimeo::init();

}, 1200); 
endif;