Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. <template>
  2. <div class="photo" :class="photoClass">
  3. <NudifyPhotoPreview :photo="photo" :live="false" :autoplay="false" />
  4. <div class="photo__content">
  5. <div class="photo__content__actions">
  6. <span v-show="photo.running || photo.finished">{{ photo.timer.duration }}s</span>
  7. <button v-tooltip="'Photo Panel'" @click="open">
  8. <font-awesome-icon icon="external-link-square-alt" />
  9. </button>
  10. <button v-show="!photo.running && !photo.waiting && !photo.withCustomMasks" v-tooltip="'Add to Queue'" @click="add">
  11. <font-awesome-icon icon="play" />
  12. </button>
  13. <button v-show="photo.waiting" v-tooltip="'Cancel'" @click="cancel">
  14. <font-awesome-icon icon="sign-out-alt" />
  15. </button>
  16. <button v-show="photo.running" v-tooltip="'Stop'" @click="stop">
  17. <font-awesome-icon icon="stop" />
  18. </button>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. export default {
  25. props: {
  26. photo: {
  27. type: Object,
  28. required: true,
  29. },
  30. },
  31. computed: {
  32. photoClass() {
  33. return {
  34. 'photo--running': this.photo.running,
  35. 'photo--failed': this.photo.failed,
  36. }
  37. },
  38. },
  39. methods: {
  40. open() {
  41. this.$router.push(`/nudify/${this.photo.id}`)
  42. },
  43. add() {
  44. this.photo.add()
  45. },
  46. cancel() {
  47. this.photo.cancel()
  48. },
  49. stop() {
  50. this.photo.cancel()
  51. },
  52. },
  53. }
  54. </script>
  55. <style lang="scss" scoped>
  56. .photo {
  57. @apply relative border-2 border-transparent;
  58. background-image: url('~@/assets/images/repeated-square-dark.png');
  59. will-change: transform;
  60. &.photo--running {
  61. @apply border-primary;
  62. }
  63. &.photo--failed {
  64. @apply border-danger;
  65. }
  66. &:hover {
  67. .photo__content {
  68. @apply opacity-100;
  69. }
  70. }
  71. }
  72. .photo__content {
  73. @apply absolute top-0 bottom-0 left-0 right-0 z-30;
  74. @apply flex justify-center items-center bg-menus-dark-80 opacity-0;
  75. backdrop-filter: blur(4px);
  76. transition: opacity 0.1s linear;
  77. }
  78. .photo__content__actions {
  79. @include centered();
  80. @apply flex-1;
  81. span,
  82. button {
  83. @apply flex-1;
  84. }
  85. span {
  86. @include centered();
  87. @apply text-white font-semibold;
  88. }
  89. button {
  90. @apply outline-none;
  91. &:hover {
  92. @apply text-primary;
  93. }
  94. }
  95. }
  96. </style>