Media rotation refresh (#25)

* Refresh media rotation images

* Add mediaList watcher

* format and increase rotation interval

src/App.vue

@@ -30,10 +30,11 @@ export default {
  url: process.env.VUE_APP_HOST_ADDRESS,
  modifiedDateUnix: 0,
  timeDiffUnix: 0,
- refreshInterval: 300, // 5 minutes refresh interval. Time in seconds (lower for debug)
+ refreshInterval: 600, // 10 minutes refresh interval. Time in seconds (lower for debug)
  inactivityTimeout: 30000, // 30 seconds of inactivity. Time in milliseconds
+ inactivityTimeoutDefault: 30000, // 30 seconds of inactivity. Time in milliseconds
  inactivityTimer: null,
- mediaList: [],
+ mediaList: []
  }
  },
  methods: {
@@ -54,26 +55,31 @@ export default {
  // Log the modifiedDateUnix and timeDiffUnix here if needed for debug
  })
  },
- // fetch media from Google Drive folder
+ // fetch media from AWS bucket
  async fetchMedia () {
- const bucketURL = "https://osu-kiosk-media.s3.us-west-2.amazonaws.com"
+ const bucketURL = 'https://osu-kiosk-media.s3.us-west-2.amazonaws.com'
 
  // fetch media list from S3 bucket
  try {
  const response = await axios.get(bucketURL)
- const parser = new DOMParser();
- const xmlDoc = parser.parseFromString(response.data, "text/xml");
- const keys = xmlDoc.getElementsByTagName("Key");
+ const parser = new DOMParser()
+ const xmlDoc = parser.parseFromString(response.data, 'text/xml')
+ const keys = xmlDoc.getElementsByTagName('Key')
 
- this.mediaList = Array.from(keys).map(key => `${bucketURL}/${key.textContent}`);
+ this.mediaList = Array.from(keys).map(
+ (key) => `${bucketURL}/${key.textContent}`
+ )
  } catch (error) {
  console.error('Error fetching media:', error)
  }
 
- console.log("Media list:", this.mediaList);
+ console.log('Media list:', this.mediaList)
  },
  // creates a timer that routes to the Carousel page after time is up
  createInactivityTimer () {
+ // refresh media
+ this.fetchMedia()
+
  this.inactivityTimer = setTimeout(() => {
  this.$router.push({
  name: 'Carousel',
@@ -86,7 +92,6 @@ export default {
  }, this.inactivityTimeout)
  },
  navigateToHomepage () {
-
  // clear timer
  if (this.inactivityTimer) {
  clearTimeout(this.inactivityTimer)
@@ -114,11 +119,9 @@ export default {
  // get media for rotation
  await this.fetchMedia()
 
- // if there is media, create a timer and click listener for media rotation
- if (this.mediaList.length > 0) {
- this.$el.addEventListener('click', this.navigateToHomepage)
- this.createInactivityTimer()
- }
+ // create a timer and click listener for media rotation
+ this.$el.addEventListener('click', this.navigateToHomepage)
+ this.createInactivityTimer()
  },
  beforeDestroy () {
  clearInterval(this.timer)
@@ -144,6 +147,14 @@ export default {
  }, 10000)
  }
  },
+ mediaList: function (newList, oldList) {
+ console.log('Media length: ', newList.length)
+ if (newList.length === 0) {
+ this.inactivityTimeout = this.refreshInterval * 1000
+ } else {
+ this.inactivityTimeout = this.inactivityTimeoutDefault
+ }
+ },
  $route (to, from) {
  if (from.path === '/carousel' && to.path !== '/carousel') {
  this.createInactivityTimer()

src/components/carousel.vue

@@ -28,7 +28,7 @@ export default {
  data () {
  return {
  imgIndex: 0,
- rotationInterval: 10000, // time in ms (10 seconds)
+ rotationInterval: 15000 // time in ms (15 seconds)
  }
  },
  computed: {