{"version":3,"sources":["webpack:///./src/components/widgets/ImageCarousel/Index.vue?2e61","webpack:///./src/components/widgets/ImageCarousel/Index.vue","webpack:///./src/components/widgets/ImageCarousel/Index.vue?0f1d","webpack:///./src/components/widgets/ImageCarousel/Index.vue?71ab"],"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","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-44b22f6e.6f0bfcc8.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=1&id=72b02f7c&lang=scss\"","<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\n/**\n * In order to use the image carousel widget you have to specify one or more\n * resource directories in your backend.http configuration - that's needed to\n * specify the external directories that will be exported through the web server.\n * Example:\n *\n *   ```yaml\n *   backend.http:\n *     resources:\n *       carousel: /mnt/hd/photos/albums/carousel\n *   ```\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      default: 15,\n    },\n\n    // Show the current date on top of the images\n    showDate: {\n      default: false,\n    },\n\n    // Show the current time on top of the images\n    showTime: {\n      default: false,\n    },\n\n    // If false then don't display the seconds.\n    showSeconds: {\n      default: false,\n    },\n\n    // If false then don't display weather info.\n    showWeather: {\n      default: false,\n    },\n\n    // If false then temperature won't be displayed.\n    showTemperature: {\n      default: true,\n    },\n\n    // If false then don't display the weather state icon.\n    showWeatherIcon: {\n      default: true,\n    },\n\n    // If false then don't display the weather summary text.\n    showWeatherSummary: {\n      default: true,\n    },\n\n    // Weather icon color.\n    weatherIconColor: {\n      type: String,\n      default: 'white',\n    },\n\n    // Size of the weather icon in pixels.\n    weatherIconSize: {\n      type: Number,\n      default: 70,\n    },\n\n    // If false then the weather icon will be animated.\n    // Otherwise, it will be a static image.\n    animateWeatherIcon: {\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 (ratio >= 4/3 && ratio <= 16/9) {\n          this.$refs.img.style.width = '100%'\n        } else 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      .weather {\n        font-size: 1.5em;\n      }\n\n      h1 {\n        justify-content: left;\n        margin-bottom: -0.5em;\n        font-size: 0.8em;\n      }\n    }\n\n    .date-time {\n      margin-right: 1em;\n\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=72b02f7c&scoped=true\"\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=72b02f7c&lang=scss&scoped=true\"\nimport \"./Index.vue?vue&type=style&index=1&id=72b02f7c&lang=scss\"\nscript.render = render\nscript.__scopeId = \"data-v-72b02f7c\"\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=0&id=72b02f7c&lang=scss&scoped=true\""],"sourceRoot":""}