{"version":3,"file":"ArticleVideo-vue.js?v=a9e5f9175433a866f793","mappings":"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","sources":["webpack://ratandboa/./src/components/AddFromVideo.vue","webpack://ratandboa/./src/components/AddFromVideo.vue?1a4d","webpack://ratandboa/./src/components/journal/top-level/ArticleVideo.vue","webpack://ratandboa/./src/components/journal/top-level/ArticleVideo.vue?b762"],"sourcesContent":["<template>\n  <ProductCard v-if=\"product\" :product=\"product\" :media=\"videoObject\" />\n</template>\n\n<script>\nimport ProductCard from \"@/components/ProductCard.vue\";\nimport productQuery from \"@/graphql/queries/Product.gql\";\n\nexport default {\n  name: \"AddFromVideo\",\n  components: {\n    ProductCard,\n  },\n  props: {\n    productHandle: {\n      type: String,\n      required: true,\n    },\n    videoUrl: {\n      type: String,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      product: null,\n    };\n  },\n  computed: {\n    videoObject() {\n      return {\n        sources: [\n          {\n            url: this.videoUrl,\n          },\n        ],\n      };\n    },\n  },\n  apollo: {\n    product: {\n      query: productQuery,\n      variables() {\n        return {\n          product: this.productHandle,\n          selectedOptions: [],\n        };\n      },\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.info__left) {\n  padding: 0 5px;\n}\n</style>\n","import { render } from \"./AddFromVideo.vue?vue&type=template&id=28e6f18f&scoped=true\"\nimport script from \"./AddFromVideo.vue?vue&type=script&lang=js\"\nexport * from \"./AddFromVideo.vue?vue&type=script&lang=js\"\n\nimport \"./AddFromVideo.vue?vue&type=style&index=0&id=28e6f18f&lang=scss&scoped=true\"\n\nimport exportComponent from \"/home/runner/work/rb-redev/rb-redev/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-28e6f18f\"]])\n\nexport default __exports__","<template>\n  <div class=\"article-video-container container\" :class=\"classes\">\n    <div class=\"article-video\">\n      <div class=\"video-container\">\n        <AddFromVideo\n          v-if=\"videoUrl2\"\n          :product-handle=\"productHandle\"\n          :video-url=\"videoUrl2\"\n        />\n        <video\n          v-if=\"videoUrl\"\n          ref=\"video\"\n          class=\"video\"\n          autoplay=\"\"\n          playsinline=\"\"\n          muted=\"\"\n          loop=\"\"\n          :poster=\"videoPoster\"\n        >\n          <source :src=\"videoUrl\" type=\"video/mp4\" />\n        </video>\n        <div v-if=\"credit\" class=\"credit\">{{ credit }}</div>\n      </div>\n      <p v-if=\"text\" class=\"text\">{{ text }}</p>\n    </div>\n  </div>\n</template>\n<script>\nimport AddFromVideo from \"@/components/AddFromVideo.vue\";\nexport default {\n  name: \"ArticleVideo\",\n  components: {\n    AddFromVideo,\n  },\n  props: {\n    videoUrl: {\n      type: String,\n      default: null,\n    },\n    videoUrl2: {\n      type: String,\n      default: null,\n    },\n    productHandle: {\n      type: String,\n      default: null,\n    },\n    videoPoster: {\n      type: String,\n      default: null,\n    },\n    block: {\n      type: Boolean,\n      default: false,\n    },\n    text: {\n      type: String,\n      default: null,\n    },\n    maxWidthIntroVideo: {\n      type: Boolean,\n      default: false,\n    },\n    maxWidthLandscape: {\n      type: Boolean,\n      default: false,\n    },\n    maxWidthPortrait: {\n      type: Boolean,\n      default: false,\n    },\n    block10px: {\n      type: Boolean,\n      default: false,\n    },\n    block20px: {\n      type: Boolean,\n      default: false,\n    },\n    credit: {\n      type: String,\n      default: null,\n    },\n    fullWidthBehindImage: {\n      type: Boolean,\n      default: false,\n    },\n    containerMobile: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data: function () {\n    return {\n      playing: false,\n    };\n  },\n  computed: {\n    classes() {\n      return {\n        \"article-video-container--containerMobile\": this.containerMobile,\n        \"article-video-container--block\": this.block,\n        \"article-video-container--block10px\": this.block10px,\n        \"article-video-container--block20px\": this.block20px,\n        \"article-video-container--maxWidthIntroVideo\": this.maxWidthPortrait,\n        \"article-video-container--maxWidthPortrait\": this.maxWidthPortrait,\n        \"article-video-container--maxWidthLandscape\": this.maxWidthLandscape,\n        \"article-video-container--full-width-behind-image\":\n          this.fullWidthBehindImage,\n      };\n    },\n  },\n  methods: {\n    playVideo() {\n      this.$refs[\"video\"].play();\n      this.playing = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.article-video-container {\n  margin: 0 auto;\n  padding: 0 0 60px 0;\n\n  @include respond-above(md) {\n    padding: 0 20px 80px;\n  }\n\n  &--containerMobile {\n    padding: 0 20px 60px;\n    @include respond-above(md) {\n      :deep(.media-wrapper) {\n        aspect-ratio: auto;\n      }\n    }\n  }\n\n  &--block {\n    padding: 0 0 2px 0;\n\n    @include respond-above(md) {\n      padding: 0 0;\n    }\n  }\n\n  &--block10px {\n    padding: 0 0 10px 0;\n  }\n\n  &--block20px {\n    padding: 0 0 20px 0;\n  }\n\n  &--maxWidthIntroVideo {\n    max-width: 1300px;\n  }\n\n  &--maxWidthPortrait {\n    margin: 0 auto 60px;\n    max-width: 627px;\n    @include respond-above(md) {\n      margin-bottom: 80px;\n    }\n  }\n\n  &--maxWidthLandscape {\n    margin: 0 auto 60px;\n    max-width: 1116px;\n    @include respond-above(md) {\n      margin-bottom: 80px;\n    }\n  }\n  &--full-width-behind-image {\n    .article-video {\n      margin-top: 150px;\n    }\n  }\n}\n.article-video {\n  margin: 0 auto;\n  max-width: 1600px;\n}\n\n.video-container {\n  position: relative;\n}\n\n.video {\n  display: block;\n  width: 100%;\n}\n\n.play {\n  bottom: 10px;\n  color: $color-white;\n  cursor: pointer;\n  font-size: 9px;\n  font-weight: 600;\n  left: 10px;\n  letter-spacing: 0.49px;\n  position: absolute;\n  text-transform: uppercase;\n  @include respond-above(md) {\n    bottom: 20px;\n    font-size: 10px;\n    left: 20px;\n  }\n}\n\n.text {\n  font-family: $heading-font-family;\n  font-size: 14px;\n  font-weight: 300;\n  max-width: auto;\n  padding: 10px 10px 0 10px;\n\n  @include respond-above(md) {\n    font-size: 18px;\n    padding: 10px 0 0;\n  }\n}\n\n.credit {\n  bottom: 20px;\n  color: $color-white;\n  font-size: 10px;\n  font-weight: 600;\n  letter-spacing: 0.49px;\n  left: 20px;\n  position: absolute;\n}\n</style>\n","import { render } from \"./ArticleVideo.vue?vue&type=template&id=bc28f9e8&scoped=true\"\nimport script from \"./ArticleVideo.vue?vue&type=script&lang=js\"\nexport * from \"./ArticleVideo.vue?vue&type=script&lang=js\"\n\nimport \"./ArticleVideo.vue?vue&type=style&index=0&id=bc28f9e8&lang=scss&scoped=true\"\n\nimport exportComponent from \"/home/runner/work/rb-redev/rb-redev/node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-bc28f9e8\"]])\n\nexport default __exports__"],"names":["name","components","ProductCard","props","productHandle","type","String","required","videoUrl","data","product","computed","videoObject","sources","url","this","apollo","query","productQuery","variables","selectedOptions","$data","_createBlock","_component_ProductCard","media","$options","class","AddFromVideo","default","videoUrl2","videoPoster","block","Boolean","text","maxWidthIntroVideo","maxWidthLandscape","maxWidthPortrait","block10px","block20px","credit","fullWidthBehindImage","containerMobile","playing","classes","methods","playVideo","$refs","play","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_1","_hoisted_2","$props","_component_AddFromVideo","ref","autoplay","playsinline","muted","loop","poster","src","_hoisted_5","_toDisplayString","_hoisted_6"],"sourceRoot":""}