From 559a3850557614f9abd82c6a2d5db462d25915a4 Mon Sep 17 00:00:00 2001
From: buttle <chris@gatopelao.org>
Date: Fri, 30 Jul 2021 13:20:46 +0200
Subject: [PATCH] Video renders with block defined width, and respects initial
 ratio.

---
 Module.php                           |  9 ++++++++-
 asset/js/height_calculator.js        |  4 ++++
 config/module.config.php             |  2 +-
 src/Form/VimeoBlockForm.php          | 11 +++++++----
 src/Site/BlockLayout/Vimeo.php       | 12 +++++++-----
 view/common/block-layout/vimeo.phtml | 15 ++++++++++-----
 6 files changed, 37 insertions(+), 16 deletions(-)
 create mode 100644 asset/js/height_calculator.js

diff --git a/Module.php b/Module.php
index fdc8b84..be511ae 100644
--- a/Module.php
+++ b/Module.php
@@ -9,12 +9,19 @@ class Module extends AbstractModule
 {
 	const NAMESPACE = __NAMESPACE__;
 
+	const IMAGE_WIDTH = [
+			'25' => '25 %',
+			'50' => '50 %',
+			'75' => '75 %',
+			'100' => '100 %',
+	];
+/*
 	const RATIOS = [
 		'1.777' => '16:9',
 		'1.333' => '4:3',
 		'2' => '2:1',
 	];
-
+*/
 	public function getConfig()
 	{
 		return include __DIR__ . '/config/module.config.php';
diff --git a/asset/js/height_calculator.js b/asset/js/height_calculator.js
new file mode 100644
index 0000000..1411939
--- /dev/null
+++ b/asset/js/height_calculator.js
@@ -0,0 +1,4 @@
+function get_height(container, ratio) {
+  var height = $(container).width() / ratio
+  return height
+}
diff --git a/config/module.config.php b/config/module.config.php
index bcbfe61..802147e 100644
--- a/config/module.config.php
+++ b/config/module.config.php
@@ -31,7 +31,7 @@ return [
         'VimeoBlockForm' => [
             'title' => '',
             'renderSourceLink' => true,
-            'width' => 600,
+            'width' => 100,
             'ratio' => '2',
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]
diff --git a/src/Form/VimeoBlockForm.php b/src/Form/VimeoBlockForm.php
index 939d878..2ecec5a 100644
--- a/src/Form/VimeoBlockForm.php
+++ b/src/Form/VimeoBlockForm.php
@@ -12,13 +12,16 @@ class VimeoBlockForm extends Form
 
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
-			'type' => Element\Number::class,
-      'options' => [
-				'label' => 'Width in pixels',
-			],
+			'type' => Element\Select::class,
+			'options' => [
+          'label' => 'Width',
+					'value_options' => Module::IMAGE_WIDTH,
+      ],
+			/*
 			'attributes' => [
 				'min' => '100',
 			],
+			*/
 		]);
 
 		$this->add([
diff --git a/src/Site/BlockLayout/Vimeo.php b/src/Site/BlockLayout/Vimeo.php
index 70f9477..a72bf68 100644
--- a/src/Site/BlockLayout/Vimeo.php
+++ b/src/Site/BlockLayout/Vimeo.php
@@ -75,15 +75,17 @@ class Vimeo extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
-    $width = 900;
-    //$height = $width / $block->dataValue('ratio');
-    $height = $width / 1.333;
+    $vimeo_width = $media->mediaData()['width'];
+    $vimeo_height = $media->mediaData()['height'];
+    $ratio = $vimeo_width / $vimeo_height;
+
     return $view->partial('common/block-layout/vimeo', [
       'title' => $block->dataValue('title'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
       'item_url' => $attachments[0]->item()->url(),
-      'width' => $width,
-      'height' => $height,
+      'width' => $block->dataValue('width'),
+      'video_id' =>  $media->mediaData()['video_id'],
+      'ratio' => $ratio,
       'vimeo_iframe' => $media->mediaData()['html'],
     ]);
 	}
diff --git a/view/common/block-layout/vimeo.phtml b/view/common/block-layout/vimeo.phtml
index 9c11fa4..bc7d13b 100644
--- a/view/common/block-layout/vimeo.phtml
+++ b/view/common/block-layout/vimeo.phtml
@@ -1,4 +1,9 @@
-<div class="vimeo-wrap" style="position:relative;">
+<?php
+$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+																								'Vimeo'));
+?>
+
+<div id="vimeo_<?= $video_id ?>" class="vimeo-wrap" style="position:relative;">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -16,11 +21,11 @@
 
 </div>
 
-
 <script>
 jQuery(document).ready(function() {
-	var vimeo = $(".vimeo-wrap").find('iframe');
-	//$(vimeo).prop('width', <?= $width ?>);
-	//$(vimeo).prop('height', <?= $height ?>);
+	var vimeo = $("#vimeo_<?= $video_id ?>").find('iframe');
+	$(vimeo).prop("width", "<?= $width ?>%")
+	var height = get_height(vimeo, <?= $ratio ?>)
+	$(vimeo).prop("height", height)
 });
 </script>