From 46a1139d20756fc0fc7b320560a8ea73e96fa02f Mon Sep 17 00:00:00 2001
From: Furkan Sezis <sezisfurkan24@gmail.com>
Date: Tue, 28 Mar 2023 17:00:11 +0300
Subject: [PATCH 1/3] Autoplay prop added to watcher

---
 components/lib/galleria/GalleriaContent.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index a56d259b3..4313130b3 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -76,6 +76,9 @@ export default {
         },
         '$attrs.numVisible': function (newVal) {
             this.numVisible = newVal;
+        },
+        '$attrs.autoPlay': function (newVal) {
+            newVal ? this.startSlideShow() : this.stopSlideShow();
         }
     },
     updated() {

From c1fab8f3fb36bbb683a5de17fbbbb8e36520c318 Mon Sep 17 00:00:00 2001
From: Furkan Sezis <sezisfurkan24@gmail.com>
Date: Tue, 28 Mar 2023 17:00:36 +0300
Subject: [PATCH 2/3] Galleria AdvancedDoc updated

---
 doc/galleria/AdvancedDoc.vue | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index 33cf7228b..bb1a4fb67 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -14,7 +14,7 @@
             :showItemNavigators="true"
             :showItemNavigatorsOnHover="true"
             :circular="true"
-            :autoPlay="true"
+            :autoPlay="isPlayed"
             :transitionInterval="3000"
         >
             <template #item="slotProps">
@@ -28,6 +28,7 @@
             <template #footer>
                 <div class="custom-galleria-footer">
                     <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
                     <span v-if="images" class="title-container">
                         <span>{{ activeIndex + 1 }}/{{ images.length }}</span>
                         <span class="title">{{ images[activeIndex].title }}</span>
@@ -52,10 +53,11 @@ export default {
             showThumbnails: false,
             isAutoPlayActive: true,
             fullScreen: false,
+            isPlayed: true,
             code: {
                 basic: `
 <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
-    :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="true" :transitionInterval="3000">
+    :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isPlayed" :transitionInterval="3000">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
     </template>
@@ -67,6 +69,7 @@ export default {
     <template #footer>
         <div class="custom-galleria-footer">
             <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+            <Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
             <span v-if="images" class="title-container">
                 <span>{{ activeIndex + 1 }}/{{ images.length }}</span>
                 <span class="title">{{ images[activeIndex].title }}</span>
@@ -80,7 +83,7 @@ export default {
 <template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
-            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="true" :transitionInterval="3000">
+            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isPlayed" :transitionInterval="3000">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
@@ -92,6 +95,7 @@ export default {
             <template #footer>
                 <div class="custom-galleria-footer">
                     <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
                     <span v-if="images" class="title-container">
                         <span>{{ activeIndex + 1 }}/{{ images.length }}</span>
                         <span class="title">{{ images[activeIndex].title }}</span>
@@ -114,6 +118,7 @@ export default {
             activeIndex: 0,
             showThumbnails: false,
             fullScreen: false,
+            isPlayed: true,
         };
     },
     mounted() {
@@ -121,6 +126,9 @@ export default {
         this.bindDocumentListeners();
     },
     methods: {
+        toggleAutoSlide() {
+            this.isPlayed = !this.isPlayed;
+        },
         onThumbnailButtonClick() {
             this.showThumbnails = !this.showThumbnails;
         },
@@ -175,6 +183,9 @@ export default {
         }
     },
     computed: {
+        slideButtonIcon() {
+            return this.isPlayed ? 'pi pi-pause' : 'pi pi-play';
+        },
         galleriaClass() {
             return ['custom-galleria', { fullscreen: this.fullScreen }];
         },
@@ -251,7 +262,7 @@ export default {
 <template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
-            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="true" :transitionInterval="3000">
+            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isPlayed" :transitionInterval="3000">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
@@ -263,6 +274,7 @@ export default {
             <template #footer>
                 <div class="custom-galleria-footer">
                     <Button icon="pi pi-list" @click="onThumbnailButtonClick" />
+                    <Button :icon="slideButtonIcon" @click="toggleAutoSlide" />
                     <span v-if="images" class="title-container">
                         <span>{{ activeIndex + 1 }}/{{ images.length }}</span>
                         <span class="title">{{ images[activeIndex].title }}</span>
@@ -289,7 +301,11 @@ const images = ref();
 const activeIndex = ref(0);
 const showThumbnails = ref(false);
 const fullScreen = ref(false);
+const isPlayed = ref(true);
 
+const toggleAutoSlide = () => {
+    isPlayed.value  = !isPlayed.value ;
+};
 const onThumbnailButtonClick = () => {
     showThumbnails.value  = !showThumbnails.value ;
 };
@@ -351,6 +367,9 @@ const galleriaClass = computed(() => {
 const fullScreenIcon = computed(() => {
     return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
 });
+const slideButtonIcon = computed(() => {
+    return \`pi \${isPlayed.value ? 'pi-pause' : 'pi-play'}\`;
+});
 <\/script>
 
 <style lang="scss" scoped>
@@ -433,6 +452,9 @@ const fullScreenIcon = computed(() => {
         this.bindDocumentListeners();
     },
     methods: {
+        toggleAutoSlide() {
+            this.isPlayed = !this.isPlayed;
+        },
         onThumbnailButtonClick() {
             this.showThumbnails = !this.showThumbnails;
         },
@@ -487,6 +509,9 @@ const fullScreenIcon = computed(() => {
         }
     },
     computed: {
+        slideButtonIcon() {
+            return this.isPlayed ? 'pi pi-pause' : 'pi pi-play';
+        },
         galleriaClass() {
             return ['custom-galleria', { fullscreen: this.fullScreen }];
         },

From 85b6c807c34b58dbb872bbbfefad0cb67224ad63 Mon Sep 17 00:00:00 2001
From: Furkan Sezis <sezisfurkan24@gmail.com>
Date: Tue, 4 Apr 2023 02:25:13 +0300
Subject: [PATCH 3/3] prop name updated

---
 doc/galleria/AdvancedDoc.vue | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index bb1a4fb67..6e39e9342 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -14,7 +14,7 @@
             :showItemNavigators="true"
             :showItemNavigatorsOnHover="true"
             :circular="true"
-            :autoPlay="isPlayed"
+            :autoPlay="isAutoPlay"
             :transitionInterval="3000"
         >
             <template #item="slotProps">
@@ -53,11 +53,11 @@ export default {
             showThumbnails: false,
             isAutoPlayActive: true,
             fullScreen: false,
-            isPlayed: true,
+            isAutoPlay: true,
             code: {
                 basic: `
 <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
-    :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isPlayed" :transitionInterval="3000">
+    :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
     <template #item="slotProps">
         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
     </template>
@@ -83,7 +83,7 @@ export default {
 <template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
-            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isPlayed" :transitionInterval="3000">
+            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
@@ -118,7 +118,7 @@ export default {
             activeIndex: 0,
             showThumbnails: false,
             fullScreen: false,
-            isPlayed: true,
+            isAutoPlay: true,
         };
     },
     mounted() {
@@ -127,7 +127,7 @@ export default {
     },
     methods: {
         toggleAutoSlide() {
-            this.isPlayed = !this.isPlayed;
+            this.isAutoPlay = !this.isAutoPlay;
         },
         onThumbnailButtonClick() {
             this.showThumbnails = !this.showThumbnails;
@@ -184,7 +184,7 @@ export default {
     },
     computed: {
         slideButtonIcon() {
-            return this.isPlayed ? 'pi pi-pause' : 'pi pi-play';
+            return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
         },
         galleriaClass() {
             return ['custom-galleria', { fullscreen: this.fullScreen }];
@@ -262,7 +262,7 @@ export default {
 <template>
     <div class="card flex justify-content-center galleria demo">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
-            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isPlayed" :transitionInterval="3000">
+            :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{ width: !fullScreen ? '100%' : '', display: !fullScreen ? 'block' : '' }]" />
             </template>
@@ -301,10 +301,10 @@ const images = ref();
 const activeIndex = ref(0);
 const showThumbnails = ref(false);
 const fullScreen = ref(false);
-const isPlayed = ref(true);
+const isAutoPlay = ref(true);
 
 const toggleAutoSlide = () => {
-    isPlayed.value  = !isPlayed.value ;
+    isAutoPlay.value  = !isAutoPlay.value ;
 };
 const onThumbnailButtonClick = () => {
     showThumbnails.value  = !showThumbnails.value ;
@@ -368,7 +368,7 @@ const fullScreenIcon = computed(() => {
     return \`pi \${fullScreen.value ? 'pi-window-minimize' : 'pi-window-maximize'}\`;
 });
 const slideButtonIcon = computed(() => {
-    return \`pi \${isPlayed.value ? 'pi-pause' : 'pi-play'}\`;
+    return \`pi \${isAutoPlay.value ? 'pi-pause' : 'pi-play'}\`;
 });
 <\/script>
 
@@ -453,7 +453,7 @@ const slideButtonIcon = computed(() => {
     },
     methods: {
         toggleAutoSlide() {
-            this.isPlayed = !this.isPlayed;
+            this.isAutoPlay = !this.isAutoPlay;
         },
         onThumbnailButtonClick() {
             this.showThumbnails = !this.showThumbnails;
@@ -510,7 +510,7 @@ const slideButtonIcon = computed(() => {
     },
     computed: {
         slideButtonIcon() {
-            return this.isPlayed ? 'pi pi-pause' : 'pi pi-play';
+            return this.isAutoPlay ? 'pi pi-pause' : 'pi pi-play';
         },
         galleriaClass() {
             return ['custom-galleria', { fullscreen: this.fullScreen }];