@dcodegroup-au/page-builder 0.5.5 → 0.5.7

package/src/components/presenters/modules/Paragraph.vue

@@ -1,23 +1,45 @@
 <template>
   <div class="overflow-hidden mt-4">
-    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16">
-      <div class="max-w-[800px]" v-if="section.components[0]?.title">
+    <div class="max-w-[1640px] md:px-[120px] mx-auto w-full pt-4 mb-4 flex gap-16 items-center" :class="{'flex-row-reverse mt-6 !mb-10': section?.revert}">
+      <div class="max-w-[800px] py-4" :class="{'!max-w-full w-full': section?.is_full_width }" v-if="component?.title" ref="leftColumn">
         <h3 class="text-[36px] text-gray-900 font-semibold">
-          {{ section.components[0].title }}
+          {{ component.title }}
         </h3>
         <div class="all-unset">
-          <div v-html="section.components[0].paragraph"></div>
+          <div v-html="component.paragraph"></div>
+          <div v-if="component?.hasOwnProperty('button')">
+            <a :href="button.url"
+               class="inline-flex items-center gap-2 !no-underline px-3 py-2.5 rounded-full shadow-xs text-md font-semibold !text-white bg-brand-600 hover:bg-brand-700 border border-brand-600 text-center cursor-pointer"
+            >{{ button.title }} <ArrowUpRight class="w-5 h-5"></ArrowUpRight></a>
+          </div>
         </div>
       </div>
-      <div class="w-full rounded-[24px]" v-if="section.components[0]?.featured_image">
-        <img :src="section.components[0]?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-[24px]"/>
+      <div class="w-full max-w-[536px] rounded-[24px] overflow-hidden" v-if="component?.featured_image" ref="rightColumn">
+        <div v-if="component?.source_type === 'video'" class="w-full h-full relative">
+          <video
+              @click="togglePlayPause"
+              preload="metadata"
+              ref="videoPlayer"
+              class="h-full w-full object-cover"
+          >
+            <source :src="`${component?.featured_image}#t=2`" />
+          </video>
+          <PlayButton
+              v-if="!isPlaying"
+              class="cursor-pointer absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 group-hover:opacity-100 transition-opacity"
+              @click="togglePlayPause">
+          </PlayButton>
+        </div>
+        <img v-else :src="component?.featured_image" alt="Feature Image" class="w-full h-full object-cover rounded-[24px]"/>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import {ref} from "vue";
+import {ref, onMounted, computed} from "vue";
+import PlayButton from "@/assets/svg/play.svg";
+import ArrowUpRight from "@/assets/img/icons/arrow-up-right.svg";
 
 const props = defineProps({
   section: {
@@ -26,6 +48,38 @@ const props = defineProps({
   },
 });
 
+const leftColumn = ref(null);
+const rightColumn = ref(null);
+
 const section = ref(props.section);
+const videoPlayer = ref(null);
+const isPlaying = ref(false);
+
+const component = computed(() => {
+  return section.value.components[0];
+})
+
+const button = computed(() => {
+  return component.value?.button || {};
+})
+
+onMounted(() => {
+  if (leftColumn.value && rightColumn.value) {
+    rightColumn.value.style.height = `${leftColumn.value.offsetHeight}px`;
+  }
+});
+
+const togglePlayPause = () => {
+  if (!videoPlayer.value) {
+    return;
+  }
 
+  if (videoPlayer.value?.paused) {
+    videoPlayer.value.play();
+    isPlaying.value = true;
+  } else {
+    videoPlayer.value.pause();
+    isPlaying.value = false;
+  }
+};
 </script>

package/vite.config.js

@@ -21,6 +21,7 @@ export default defineConfig({
     },
   },
   build: {
+    minify: false,
     outDir: 'dist',
     lib: {
       entry: 'src/components/index.js', // Entry file