You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NudifyPhotoPreview.vue 1.2KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <div class="preview" :style="photoURL" data-private>
  3. <video v-if="isVideo"
  4. :src="file.url"
  5. :autoplay="autoplay"
  6. muted
  7. loop />
  8. <NudifyPhotoBadge v-if="badge && $settings.app.duplicates" :photo="photo" />
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. props: {
  14. photo: {
  15. type: Object,
  16. required: true,
  17. },
  18. badge: {
  19. type: Boolean,
  20. default: true,
  21. },
  22. live: {
  23. type: Boolean,
  24. default: false,
  25. },
  26. autoplay: {
  27. type: Boolean,
  28. default: true,
  29. },
  30. },
  31. computed: {
  32. isVideo() {
  33. return this.photo.file.isVideo
  34. },
  35. file() {
  36. return this.live ? this.photo.previewFile : this.photo.file
  37. },
  38. photoURL() {
  39. if (this.isVideo) {
  40. return {}
  41. }
  42. return {
  43. backgroundImage: `url("${this.file.url}")`,
  44. }
  45. },
  46. },
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .preview {
  51. @apply absolute top-0 bottom-0 left-0 right-0 z-10;
  52. @apply bg-contain bg-no-repeat bg-center;
  53. video {
  54. @apply h-full w-full overflow-hidden;
  55. }
  56. }
  57. .badge {
  58. @apply absolute z-20;
  59. top: 5px;
  60. right: 5px;
  61. width: 30px;
  62. height: 30px;
  63. }
  64. </style>