{"version":3,"file":"ImageThumbnail-dec3986f.js","sources":["../../../app/javascript/bits/overflow_border_radius_transform_fix.ts","../../../app/javascript/images/blue_purple_lanterns.png","../../../app/javascript/library/v4/components/ImageThumbnail.vue"],"sourcesContent":["/**\n * @file helper for styles to make overflow + border radius + transform work\n * Reference: https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b\n * -webkit-mask-image: -webkit-radial-gradient(white, black); works on all browsers but the performance is not good on Google Chrome\n * => use it for Safari and the below for other browsers (these work on browsers that's not than Safari):\n * -webkit-backface-visibility: hidden;\n * -moz-backface-visibility: hidden;\n * -webkit-transform: translate3d(0, 0, 0);\n * -moz-transform: translate3d(0, 0, 0);\n */\n\nfunction overflowBorderRadiusTransformFixStyle(isSafari: boolean): Record<string, string> {\n  return isSafari\n    ? { '-webkit-mask-image': '-webkit-radial-gradient(white, black)' }\n    : {\n        '-webkit-backface-visibility': 'hidden',\n        '-moz-backface-visibility': 'hidden',\n        '-webkit-transform': 'translate3d(0, 0, 0)',\n        '-moz-transform': 'translate3d(0, 0, 0)',\n      }\n}\n\nexport default overflowBorderRadiusTransformFixStyle\n","export default \"__VITE_ASSET__e240b7ff__\"","<script lang=\"ts\" setup>\nimport { attachmentLoadingAnimationColorTailwindClass } from '@@/bits/attachments'\nimport device from '@@/bits/device'\nimport overflowBorderRadiusTransformFixStyle from '@@/bits/overflow_border_radius_transform_fix'\nimport { postColorValues } from '@@/bits/post_color'\nimport BluePurpleLanterns from '@@/images/blue_purple_lanterns.png'\nimport type { PostColor } from '@@/types'\nimport BaseImage from '@@/vuecomponents/base_image.vue'\nimport { processedUrl, proxiedUrl } from '@padlet/vivaldi-client'\nimport { sample } from 'lodash-es'\nimport { computed, ref, withDefaults } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     * URL for image.\n     */\n    src: string\n    /**\n     * Original image width.\n     */\n    originalImageWidth: number\n    /**\n     * Original image height.\n     */\n    originalImageHeight: number\n    /**\n     * Resulting component width.\n     */\n    width?: number\n    /**\n     * Resulting component height. Ignored for calculation.\n     * Only use to send to Vivaldi if processImage is true.\n     */\n    height?: number\n    /**\n     * Resize strategy. Ignored if no aspect ratio is provided.\n     * @values crop, stretch, fit.\n     */\n    resizeStrategy?: 'crop' | 'stretch' | 'fit'\n    /**\n     * If specified, thumbnail height will be computed based on this value.\n     * Value should be `width / height`, i.e. `2` will be wide and `0.5` will be tall.\n     */\n    aspectRatio?: number\n    /**\n     * Alt text for the image.\n     */\n    alt?: string\n    /**\n     * Title to display when the image fails to load.\n     * This is used as the image alt text if no alt prop is given.\n     */\n    title?: string\n    /**\n     * Determines if we should load the image lazily.\n     */\n    lazyLoading?: boolean\n    /**\n     * Determines whether image should be proxied to vivaldi for caching.\n     */\n    proxyImage?: boolean\n    /**\n     * Determines whether image should be processed before loading.\n     */\n    processImage?: boolean\n    /**\n     * Placeholder color for the thumbnail.\n     * @values red, blue, green, yellow, purple, pink, cyan, orange, transparent, random.\n     */\n    placeholderColor?: string\n    /**\n     * Placeholder 'background-color' value.\n     */\n    placeholderColorValue?: string\n    /**\n     * If true, display placeholder image when original image fails to load\n     * Otherwise, show image title on top of placeholder solid background.\n     */\n    fallbackToPlaceholder?: boolean\n    /**\n     * If passed, will enable animation for the placeholder.\n     */\n    placeholderAnimationVariant?: 'dark' | 'light'\n    /**\n     * data-testid.\n     */\n    dataTestid?: string\n    /**\n     * Flip the image.\n     */\n    flipDirection?: 'horizontal' | 'vertical'\n    /**\n     * Determines where the image position is when used in conjunction with object-fit\n     * Otherwise the image will always be cropped from the center.\n     */\n    objectPosition?: string\n    /**\n     * Fetch priority for image\n     */\n    fetchPriority?: 'auto' | 'high' | 'low'\n    /**\n     * Determines whether to add the `pointer-events-none` class to disable the image drag event.\n     */\n    disablePointerEvents?: boolean\n  }>(),\n  {\n    width: undefined,\n    height: undefined,\n    resizeStrategy: 'crop',\n    aspectRatio: undefined,\n    alt: undefined,\n    title: '',\n    lazyLoading: true,\n    proxyImage: false,\n    processImage: false,\n    placeholderColor: 'transparent',\n    placeholderColorValue: undefined,\n    fallbackToPlaceholder: false,\n    placeholderAnimationVariant: undefined,\n    dataTestid: undefined,\n    flipDirection: undefined,\n    objectPosition: undefined,\n    fetchPriority: 'auto',\n    disablePointerEvents: true,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'load'): void\n  (e: 'error', error: Error): void\n}>()\n\nconst loaded = ref(false)\nconst error = ref(false)\n\nconst errorPlaceholderImage = BluePurpleLanterns\n\nconst onLoad = (): void => {\n  loaded.value = true\n  emit('load')\n}\n\nconst onError = (e: Error): void => {\n  error.value = true\n  emit('error', e)\n}\n\nconst overflowBorderRadiusStyle = computed(() => overflowBorderRadiusTransformFixStyle(device.safari))\n\nconst bgColorClass = computed(() => {\n  if (props.placeholderColorValue) return ''\n\n  if (loaded.value) return ''\n\n  if (\n    props.placeholderAnimationVariant &&\n    postColorValues.includes(props.placeholderColor === 'default' ? null : (props.placeholderColor as PostColor))\n  ) {\n    return attachmentLoadingAnimationColorTailwindClass({\n      postColor: props.placeholderColor as PostColor,\n      isLightColorScheme: props.placeholderAnimationVariant === 'light',\n    })\n  }\n\n  const colorClassMap = {\n    red: 'bg-bgi-red',\n    blue: 'bg-bgi-blue',\n    green: 'bg-bgi-green',\n    yellow: 'bg-bgi-yellow',\n    purple: 'bg-bgi-purple',\n    pink: 'bg-bgi-pink',\n    cyan: 'bg-bgi-cyan',\n    orange: 'bg-bgi-orange',\n    grey: 'bg-highway-200',\n  }\n\n  if (props.placeholderColor === 'random') {\n    return sample(Object.values(colorClassMap)) ?? ''\n  } else {\n    return colorClassMap[props.placeholderColor] || ''\n  }\n})\n\nconst url = computed(() => {\n  if (props.processImage) {\n    const processingOptions: { width: number; height?: number; ar?: number } = { width: props.width }\n    if (props.height) processingOptions.height = props.height\n    if (props.resizeStrategy === 'stretch' && props.aspectRatio) processingOptions.ar = props.aspectRatio\n    return processedUrl(props.src, processingOptions)\n  }\n  return props.proxyImage ? proxiedUrl(props.src) : props.src\n})\n\nconst originalImageAspectRatio = computed(() => props.originalImageWidth / props.originalImageHeight)\n\nconst dimensions = computed(() => {\n  // Width is fixed except when resizeStrategy === 'fit' (CASE 3)\n  let cropFrameWidth = props.width\n  let unit: 'px' | '%' = 'px'\n\n  // These are decided based on the resizing strategy.\n  let cropFrameHeight: number\n  let cropFrameAspectRatio: number\n  let imageElementHeight: number\n  let imageElementWidth: number\n\n  // CASE 1: Crop to fit aspect ratio\n  if (props.resizeStrategy === 'crop' && props.aspectRatio) {\n    // Try to fit as much of the image in the crop frame as possible.\n    cropFrameAspectRatio = props.aspectRatio\n\n    // All cropFrameHeight calculation in this method should use Math.ceil.\n    // Reason:\n    // Browsers can display HTML elements with fractional height.\n    // In Vivaldi, when calculating height using width and aspect ratio, we use\n    // Math.ceil (see [1] and [2]). So the resulting image height will never be\n    // fractional. But the <div> in this component can have fractional height.\n    // -> By using Math.ceil, we ensure the <div> will have the same height as\n    // the image.\n    //\n    // [1]: https://github.com/padlet/mozart/blob/21a2867e9c2abf5e71db0bb6c3eaa6b86b6cd904/services/vivaldi/src/vips/fill.js#L30\n    // [2]: https://github.com/padlet/mozart/blob/21a2867e9c2abf5e71db0bb6c3eaa6b86b6cd904/services/vivaldi/src/vips/limit_fill.js#L39\n    cropFrameHeight = Math.ceil(cropFrameWidth / cropFrameAspectRatio)\n    const originalHasWiderAspectRatio = originalImageAspectRatio.value > props.aspectRatio\n    if (originalHasWiderAspectRatio) {\n      imageElementHeight = cropFrameHeight\n      imageElementWidth = originalImageAspectRatio.value * cropFrameHeight\n    } else {\n      imageElementWidth = cropFrameWidth\n      imageElementHeight = imageElementWidth / originalImageAspectRatio.value\n    }\n\n    // CASE 2: Stretch to fit aspect ratio\n  } else if (props.resizeStrategy === 'stretch' && props.aspectRatio) {\n    // Image element and crop frame both have the same dimensions.\n    cropFrameAspectRatio = props.aspectRatio\n    cropFrameHeight = Math.ceil(cropFrameWidth / cropFrameAspectRatio)\n    imageElementWidth = cropFrameWidth\n    imageElementHeight = cropFrameHeight\n\n    // CASE 3: Fit parent's dimensions\n  } else if (props.resizeStrategy === 'fit') {\n    // Fit the image to its parent element regardless of aspect ratio.\n    cropFrameAspectRatio = originalImageAspectRatio.value\n    cropFrameWidth = 100\n    cropFrameHeight = 100\n    imageElementWidth = 100\n    imageElementHeight = 100\n    unit = '%'\n\n    // CASE 4: Scale, keeping original aspect ratio\n  } else {\n    // Maintain the same ratio as the original, but scale down proportionately if need be.\n    cropFrameAspectRatio = originalImageAspectRatio.value\n    cropFrameHeight = Math.ceil(cropFrameWidth / cropFrameAspectRatio)\n    imageElementWidth = cropFrameWidth\n    imageElementHeight = cropFrameHeight\n  }\n\n  return {\n    cropFrameWidth,\n    cropFrameWidthString: `${cropFrameWidth}${unit}`,\n    cropFrameHeight,\n    cropFrameHeightString: `${cropFrameHeight}${unit}`,\n    cropFrameAspectRatio,\n    imageElementWidth,\n    imageElementWidthString: `${imageElementWidth}${unit}`,\n    imageElementHeight,\n    imageElementHeightString: `${imageElementHeight}${unit}`,\n  }\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      // ResizableMixin\n      'image-thumbnail-crop-frame',\n      // Crop\n      'overflow-hidden',\n      // Center\n      'flex',\n      'items-center',\n      'justify-center',\n      bgColorClass,\n      disablePointerEvents && 'pointer-events-none',\n    ]\"\n    :style=\"{\n      ...overflowBorderRadiusStyle,\n      width: dimensions.cropFrameWidthString,\n      height: dimensions.cropFrameHeightString,\n      'background-color': placeholderColorValue,\n    }\"\n    :data-aspect-ratio=\"dimensions.cropFrameAspectRatio\"\n  >\n    <base-image\n      v-if=\"!error\"\n      :src=\"url\"\n      :class=\"[\n        // ResizableMixin\n        'image-thumbnail-image',\n        flipDirection === 'horizontal' && 'scale-x-[-1]',\n        flipDirection === 'vertical' && 'scale-y-[-1]',\n      ]\"\n      :style=\"\n        resizeStrategy === 'fit'\n          ? {\n              width: dimensions.imageElementWidthString,\n              height: dimensions.imageElementHeightString,\n              objectFit: 'cover',\n              objectPosition: objectPosition,\n            }\n          : {}\n      \"\n      :alt=\"alt != undefined ? alt : title\"\n      :data-testid=\"dataTestid\"\n      :height=\"dimensions.imageElementHeight\"\n      :width=\"dimensions.imageElementWidth\"\n      :loading=\"lazyLoading ? 'lazy' : 'eager'\"\n      :fetch-priority=\"fetchPriority\"\n      @load=\"onLoad\"\n      @error=\"onError\"\n    ></base-image>\n    <base-image\n      v-else-if=\"fallbackToPlaceholder\"\n      :src=\"errorPlaceholderImage\"\n      :class=\"[\n        // ResizableMixin\n        'image-thumbnail-image',\n      ]\"\n      :style=\"\n        resizeStrategy === 'fit'\n          ? {\n              width: dimensions.imageElementWidthString,\n              height: dimensions.imageElementHeightString,\n              objectFit: 'cover',\n            }\n          : {}\n      \"\n      :alt=\"alt != undefined ? alt : title\"\n      :data-testid=\"dataTestid\"\n      :height=\"dimensions.imageElementHeight\"\n      :width=\"dimensions.imageElementWidth\"\n      :loading=\"lazyLoading ? 'lazy' : 'eager'\"\n      :fetch-priority=\"fetchPriority\"\n    />\n    <p v-else>{{ title }}</p>\n  </div>\n</template>\n"],"names":["overflowBorderRadiusTransformFixStyle","isSafari","BluePurpleLanterns","loaded","ref","error","errorPlaceholderImage","onLoad","value","emit","onError","e","overflowBorderRadiusStyle","computed","device","safari","bgColorClass","props","placeholderColorValue","placeholderAnimationVariant","postColorValues","includes","placeholderColor","attachmentLoadingAnimationColorTailwindClass","postColor","isLightColorScheme","colorClassMap","red","blue","green","yellow","purple","pink","cyan","orange","grey","sample","Object","values","url","processImage","processingOptions","width","height","resizeStrategy","aspectRatio","ar","processedUrl","src","proxyImage","proxiedUrl","originalImageAspectRatio","originalImageWidth","originalImageHeight","dimensions","cropFrameWidth","unit","cropFrameHeight","cropFrameAspectRatio","imageElementHeight","imageElementWidth","Math","ceil","cropFrameWidthString","cropFrameHeightString","imageElementWidthString","imageElementHeightString"],"mappings":"soBAWA,SAASA,EAAsCC,EAA2C,CACxF,OAAOA,EACH,CAAE,qBAAsB,uCAAwC,EAChE,CACE,8BAA+B,SAC/B,2BAA4B,SAC5B,oBAAqB,uBACrB,iBAAkB,uBAE1B,CCpBA,MAAeC,EAAA,+yBCqITC,EAASC,EAAI,EAAK,EAClBC,EAAQD,EAAI,EAAK,EAEjBE,EAAwBJ,EAExBK,EAASA,IAAY,CACzBJ,EAAOK,MAAQ,GACfC,EAAK,MAAM,GAGPC,EAAWC,GAAmB,CAClCN,EAAMG,MAAQ,GACdC,EAAK,QAASE,CAAC,GAGXC,EAA4BC,EAAS,IAAMb,EAAsCc,EAAOC,MAAM,CAAC,EAE/FC,EAAeH,EAAS,IAAM,CAGlC,GAFII,EAAMC,uBAENf,EAAOK,MAAc,MAAA,GAGvB,GAAAS,EAAME,6BACNC,EAAgBC,SAASJ,EAAMK,mBAAqB,UAAY,KAAQL,EAAMK,gBAA8B,EAE5G,OAAOC,EAA6C,CAClDC,UAAWP,EAAMK,iBACjBG,mBAAoBR,EAAME,8BAAgC,OAC5D,CAAC,EAGH,MAAMO,EAAgB,CACpBC,IAAK,aACLC,KAAM,cACNC,MAAO,eACPC,OAAQ,gBACRC,OAAQ,gBACRC,KAAM,cACNC,KAAM,cACNC,OAAQ,gBACRC,KAAM,kBAGJ,OAAAlB,EAAMK,mBAAqB,SACtBc,EAAOC,OAAOC,OAAOZ,CAAa,CAAC,GAAK,GAExCA,EAAcT,EAAMK,gBAAgB,GAAK,EAEpD,CAAC,EAEKiB,EAAM1B,EAAS,IAAM,CACzB,GAAII,EAAMuB,aAAc,CACtB,MAAMC,EAAqE,CAAEC,MAAOzB,EAAMyB,OAC1F,OAAIzB,EAAM0B,SAAQF,EAAkBE,OAAS1B,EAAM0B,QAC/C1B,EAAM2B,iBAAmB,WAAa3B,EAAM4B,cAAaJ,EAAkBK,GAAK7B,EAAM4B,aACnFE,EAAa9B,EAAM+B,IAAKP,CAAiB,CAClD,CACA,OAAOxB,EAAMgC,WAAaC,EAAWjC,EAAM+B,GAAG,EAAI/B,EAAM+B,GAC1D,CAAC,EAEKG,EAA2BtC,EAAS,IAAMI,EAAMmC,mBAAqBnC,EAAMoC,mBAAmB,EAE9FC,EAAazC,EAAS,IAAM,CAEhC,IAAI0C,EAAiBtC,EAAMyB,MACvBc,EAAmB,KAGnBC,EACAC,EACAC,EACAC,EAGJ,OAAI3C,EAAM2B,iBAAmB,QAAU3B,EAAM4B,aAE3Ca,EAAuBzC,EAAM4B,YAaXY,EAAAI,KAAKC,KAAKP,EAAiBG,CAAoB,EAC7BP,EAAyB3C,MAAQS,EAAM4B,aAEpDc,EAAAF,EACrBG,EAAoBT,EAAyB3C,MAAQiD,IAEjCG,EAAAL,EACpBI,EAAqBC,EAAoBT,EAAyB3C,QAI3DS,EAAM2B,iBAAmB,WAAa3B,EAAM4B,aAErDa,EAAuBzC,EAAM4B,YACXY,EAAAI,KAAKC,KAAKP,EAAiBG,CAAoB,EAC7CE,EAAAL,EACCI,EAAAF,GAGZxC,EAAM2B,iBAAmB,OAElCc,EAAuBP,EAAyB3C,MAC/B+C,EAAA,IACCE,EAAA,IACEG,EAAA,IACCD,EAAA,IACdH,EAAA,MAKPE,EAAuBP,EAAyB3C,MAC9BiD,EAAAI,KAAKC,KAAKP,EAAiBG,CAAoB,EAC7CE,EAAAL,EACCI,EAAAF,GAGhB,CACLF,eAAAA,EACAQ,qBAAsB,GAAGR,CAAc,GAAGC,CAAI,GAC9CC,gBAAAA,EACAO,sBAAuB,GAAGP,CAAe,GAAGD,CAAI,GAChDE,qBAAAA,EACAE,kBAAAA,EACAK,wBAAyB,GAAGL,CAAiB,GAAGJ,CAAI,GACpDG,mBAAAA,EACAO,yBAA0B,GAAGP,CAAkB,GAAGH,CAAI,GAE1D,CAAC"}