{"version":3,"sources":["webpack:///./src/components/widgets/ImageCarousel/Index.vue?7c0d","webpack:///./src/components/widgets/ImageCarousel/Index.vue","webpack:///./src/components/widgets/ImageCarousel/Index.vue?0f1d","webpack:///./src/components/widgets/ImageCarousel/Index.vue?cfe7"],"names":["class","ref","images","length","src","imgURL","alt","style","_showDate","_showTime","_showWeather","show-icon","_showWeatherIcon","show-summary","_showWeatherSummary","show-temperature","_showTemperature","icon-color","weatherIconColor","icon-size","weatherIconSize","animate","_animateWeatherIcon","show-date","show-time","show-seconds","_showSeconds","name","components","Weather","DateTime","Loading","mixins","Utils","props","imgDir","type","String","required","refreshSeconds","Number","default","showDate","Boolean","showTime","showSeconds","showWeather","showTemperature","showWeatherIcon","showWeatherSummary","animateWeatherIcon","data","currentImage","undefined","loading","computed","port","this","$root","config","window","location","hostname","parseBoolean","methods","refresh","request","directory","extensions","shuffleImages","pop","onNewImage","$refs","img","background","width","height","ratio","i","j","Math","floor","random","x","mounted","addEventListener","setInterval","round","render","__scopeId"],"mappings":"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","file":"static/js/chunk-f0cefcde.8bf9c8a1.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Index.vue?vue&type=style&index=0&id=8830e3f6&lang=scss&scoped=true\"","<template>\n  <div class=\"image-carousel\">\n    <Loading v-if=\"!images.length\" />\n    <div ref=\"background\" class=\"background\" />\n    <img ref=\"img\" :src=\"imgURL\" alt=\"Your carousel images\"\n         :style=\"{display: !images.length ? 'none' : 'block'}\">\n\n    <div class=\"row info-container\" v-if=\"_showDate || _showTime\">\n      <div class=\"col-6 weather-container\">\n        <span v-if=\"!_showWeather\">&nbsp;</span>\n        <Weather :show-icon=\"_showWeatherIcon\" :show-summary=\"_showWeatherSummary\" :show-temperature=\"_showTemperature\"\n                 :icon-color=\"weatherIconColor\" :icon-size=\"weatherIconSize\" :animate=\"_animateWeatherIcon\" v-else />\n      </div>\n\n      <div class=\"col-6 date-time-container\">\n        <DateTime :show-date=\"_showDate\" :show-time=\"_showTime\" :show-seconds=\"_showSeconds\"\n                  v-if=\"_showTime || _showDate\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport Utils from \"@/Utils\";\nimport Loading from \"@/components/Loading\";\nimport DateTime from \"@/components/widgets/DateTime/Index\";\nimport Weather from \"@/components/widgets/Weather/Index\";\n\nexport default {\n  name: \"ImageCarousel\",\n  components: {Weather, DateTime, Loading},\n  mixins: [Utils],\n  props: {\n    // Images directory\n    imgDir: {\n      type: String,\n      required: true,\n    },\n\n    // Refresh interval in seconds.\n    refreshSeconds: {\n      type: Number,\n      required: false,\n      default: 15,\n    },\n\n    // Show the current date on top of the images\n    showDate: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n\n    // Show the current time on top of the images\n    showTime: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n\n    // If false then don't display the seconds.\n    showSeconds: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n\n    // If false then don't display weather info.\n    showWeather: {\n      type: Boolean,\n      required: false,\n      default: false,\n    },\n\n    // If false then temperature won't be displayed.\n    showTemperature: {\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n\n    // If false then don't display the weather state icon.\n    showWeatherIcon: {\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n\n    // If false then don't display the weather summary text.\n    showWeatherSummary: {\n      type: Boolean,\n      required: false,\n      default: true,\n    },\n\n    // Weather con color.\n    weatherIconColor: {\n      type: String,\n      required: false,\n      default: 'white',\n    },\n\n    // Size of the weather icon in pixels.\n    weatherIconSize: {\n      type: Number,\n      required: false,\n      default: 40,\n    },\n\n    // If false then the weather icon will be animated.\n    // Otherwise, it will be a static image.\n    animateWeatherIcon: {\n      required: false,\n      default: true,\n    },\n  },\n\n  data() {\n    return {\n      images: [],\n      currentImage: undefined,\n      loading: false,\n    }\n  },\n\n  computed: {\n    imgURL() {\n      let port = 8008\n      if ('backend.http' in this.$root.config && 'port' in this.$root.config['backend.http']) {\n        port = this.$root.config['backend.http'].port\n      }\n\n      return '//' + window.location.hostname + ':' + port + this.currentImage\n    },\n\n    _showDate() {\n      return this.parseBoolean(this.showDate)\n    },\n\n    _showTime() {\n      return this.parseBoolean(this.showTime)\n    },\n\n    _showSeconds() {\n      return this.parseBoolean(this.showSeconds)\n    },\n\n    _showTemperature() {\n      return this.parseBoolean(this.showTemperature)\n    },\n\n    _showWeather() {\n      return this.parseBoolean(this.showWeather)\n    },\n\n    _showWeatherIcon() {\n      return this.parseBoolean(this.showWeatherIcon)\n    },\n\n    _showWeatherSummary() {\n      return this.parseBoolean(this.showWeatherSummary)\n    },\n\n    _animateWeatherIcon() {\n      return this.parseBoolean(this.animateWeatherIcon)\n    }\n  },\n\n  methods: {\n    async refresh() {\n      if (!this.images.length) {\n        this.loading = true\n\n        try {\n          this.images = await this.request('utils.search_web_directory', {\n            directory: this.imgDir,\n            extensions: ['.jpg', '.jpeg', '.png'],\n          })\n\n          this.shuffleImages()\n        } finally {\n          this.loading = false\n        }\n      }\n\n      if (this.images.length) {\n        this.currentImage = this.images.pop()\n      }\n    },\n\n    onNewImage() {\n      if (!this.$refs.img)\n        return\n\n      this.$refs.background.style['background-image'] = 'url(' + this.imgURL + ')'\n      this.$refs.img.style.width = 'auto'\n\n      if (this.$refs.img.width > this.$refs.img.height) {\n        const ratio = this.$refs.img.width / this.$refs.img.height\n        if (4/3 <= ratio <= 16/9) {\n          this.$refs.img.style.width = '100%'\n        }\n\n        if (ratio <= 4/3) {\n          this.$refs.img.style.height = '100%'\n        }\n      }\n    },\n\n    shuffleImages() {\n      for (let i=this.images.length-1; i > 0; i--) {\n        let j = Math.floor(Math.random() * (i+1))\n        let x = this.images[i]\n        this.images[i] = this.images[j]\n        this.images[j] = x\n      }\n    },\n  },\n\n  mounted() {\n    this.$refs.img.addEventListener('load', this.onNewImage)\n    this.$refs.img.addEventListener('error', this.refresh)\n\n    this.refresh()\n    setInterval(this.refresh, Math.round(this.refreshSeconds * 1000))\n  },\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.image-carousel {\n  width: calc(100% + 1.5em);\n  height: calc(100% + 1.5em);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: black;\n  margin: -0.75em 0.75em 0.75em -0.75em !important;\n\n  .background {\n    position: absolute;\n    top: 0;\n    width: 100%;\n    height: 100vh;\n    background-color: black;\n    background-position: center;\n    background-size: cover;\n    background-repeat: no-repeat;\n    filter: blur(13px);\n    -webkit-filter: blur(13px);\n  }\n\n  img {\n    position: absolute;\n    max-height: 100%;\n    z-index: 2;\n  }\n}\n\n.info-container {\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  display: flex;\n  align-items: flex-end;\n  z-index: 10;\n  color: white;\n  text-shadow: 3px 3px 4px black;\n  font-size: 1.25em;\n  margin: 0.5em;\n  padding: 0 1em;\n\n  .date-time {\n    text-align: right;\n  }\n}\n</style>\n\n<style lang=\"scss\">\n.image-carousel {\n  .info-container {\n    .weather-container {\n      margin-bottom: 0.5em;\n\n      h1 {\n        justify-content: left;\n        margin-bottom: -0.5em;\n        font-size: 0.8em;\n      }\n    }\n\n    .date-time {\n      .date {\n        font-size: 2em;\n      }\n\n      .time {\n        font-size: 4em;\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./Index.vue?vue&type=template&id=8830e3f6&scoped=true&bindings={\\\"imgDir\\\":\\\"props\\\",\\\"refreshSeconds\\\":\\\"props\\\",\\\"showDate\\\":\\\"props\\\",\\\"showTime\\\":\\\"props\\\",\\\"showSeconds\\\":\\\"props\\\",\\\"showWeather\\\":\\\"props\\\",\\\"showTemperature\\\":\\\"props\\\",\\\"showWeatherIcon\\\":\\\"props\\\",\\\"showWeatherSummary\\\":\\\"props\\\",\\\"weatherIconColor\\\":\\\"props\\\",\\\"weatherIconSize\\\":\\\"props\\\",\\\"animateWeatherIcon\\\":\\\"props\\\",\\\"images\\\":\\\"data\\\",\\\"currentImage\\\":\\\"data\\\",\\\"loading\\\":\\\"data\\\",\\\"imgURL\\\":\\\"options\\\",\\\"_showDate\\\":\\\"options\\\",\\\"_showTime\\\":\\\"options\\\",\\\"_showSeconds\\\":\\\"options\\\",\\\"_showTemperature\\\":\\\"options\\\",\\\"_showWeather\\\":\\\"options\\\",\\\"_showWeatherIcon\\\":\\\"options\\\",\\\"_showWeatherSummary\\\":\\\"options\\\",\\\"_animateWeatherIcon\\\":\\\"options\\\",\\\"refresh\\\":\\\"options\\\",\\\"onNewImage\\\":\\\"options\\\",\\\"shuffleImages\\\":\\\"options\\\"}\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\n\nimport \"./Index.vue?vue&type=style&index=0&id=8830e3f6&lang=scss&scoped=true\"\nimport \"./Index.vue?vue&type=style&index=1&lang=scss\"\nscript.render = render\nscript.__scopeId = \"data-v-8830e3f6\"\n\nexport default script","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Index.vue?vue&type=style&index=1&lang=scss\""],"sourceRoot":""}