forked from platypush/platypush
1 line
No EOL
13 KiB
Text
1 line
No EOL
13 KiB
Text
{"version":3,"sources":["webpack:///./src/components/widgets/ImageCarousel/Index.vue?70ab","webpack:///./src/components/widgets/ImageCarousel/Index.vue?a118","webpack:///./src/components/widgets/ImageCarousel/Index.vue","webpack:///./src/components/widgets/ImageCarousel/Index.vue?f333"],"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-5145872a.f0bd0577.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/cli-service/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/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Index.vue?vue&type=style&index=1&id=7358a82d&lang=scss\"","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/cli-service/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/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--0-1!./Index.vue?vue&type=style&index=0&id=7358a82d&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\"> </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 con 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 (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 .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=7358a82d&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=7358a82d&lang=scss&scoped=true\"\nimport \"./Index.vue?vue&type=style&index=1&id=7358a82d&lang=scss\"\nscript.render = render\nscript.__scopeId = \"data-v-7358a82d\"\n\nexport default script"],"sourceRoot":""} |