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.

QueuePhoto.vue 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <div class="photo" :class="photoClass">
  3. <div class="photo__preview" :style="previewStyle" />
  4. <div class="photo__content">
  5. <span v-show="photo.running || photo.finished">{{ photo.timer.duration }}s</span>
  6. <button v-tooltip="'Open'" @click="open">
  7. <font-awesome-icon icon="external-link-square-alt" />
  8. </button>
  9. <button v-show="photo.pending" v-tooltip="'Add to Queue'" @click="add">
  10. <font-awesome-icon icon="play" />
  11. </button>
  12. <button v-show="photo.waiting" v-tooltip="'Remove from Queue'" @click="cancel">
  13. <font-awesome-icon icon="sign-out-alt" />
  14. </button>
  15. <button v-show="photo.running" v-tooltip="'Stop'" @click="stop">
  16. <font-awesome-icon icon="stop" />
  17. </button>
  18. </div>
  19. </div>
  20. </template>
  21. <script>
  22. export default {
  23. props: {
  24. photo: {
  25. type: Object,
  26. required: true,
  27. },
  28. },
  29. computed: {
  30. previewStyle() {
  31. let photoPath = this.photo.file.path
  32. if (this.photo.finished && this.photo.runs.length > 0) {
  33. const [run] = this.photo.runs
  34. if (run.outputFile.exists) {
  35. photoPath = run.outputFile.path
  36. }
  37. }
  38. return {
  39. backgroundImage: `url("${photoPath}")`,
  40. }
  41. },
  42. photoClass() {
  43. return {
  44. 'photo--running': this.photo.running,
  45. 'photo--failed': this.photo.failed,
  46. }
  47. },
  48. },
  49. methods: {
  50. open() {
  51. this.$router.push(`/nudify/${this.photo.id}`)
  52. },
  53. add() {
  54. this.photo.add()
  55. },
  56. cancel() {
  57. this.photo.cancel()
  58. },
  59. stop() {
  60. this.photo.cancel()
  61. },
  62. },
  63. }
  64. </script>
  65. <style lang="scss" scoped>
  66. .photo {
  67. @apply w-1/2 relative border-2 border-dark-300;
  68. background-image: url("~@/assets/images/curls.png");
  69. height: 150px;
  70. will-change: transform;
  71. &.photo--running {
  72. @apply border-primary-500;
  73. }
  74. &.photo--failed {
  75. @apply border-danger-500;
  76. }
  77. &:hover {
  78. .photo__content {
  79. @apply opacity-100;
  80. }
  81. }
  82. .photo__preview {
  83. @apply absolute top-0 bottom-0 left-0 right-0 z-10;
  84. @apply bg-contain bg-no-repeat bg-center;
  85. }
  86. .photo__content {
  87. @apply absolute top-0 bottom-0 left-0 right-0 z-30;
  88. @apply flex bg-dark-500-60 opacity-0;
  89. backdrop-filter: blur(4px);
  90. transition: opacity .1s linear;
  91. span, button {
  92. @apply flex-1;
  93. }
  94. span {
  95. @apply flex items-center justify-center;
  96. @apply text-white font-semibold;
  97. }
  98. button {
  99. @apply outline-none;
  100. &:hover {
  101. @apply text-primary;
  102. }
  103. }
  104. }
  105. }
  106. </style>