All files / src/components/CldVideo CldPoster.vue

88.24% Statements 15/17
100% Branches 10/10
33.33% Functions 1/3
88.24% Lines 15/17

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61  3x 3x 3x 3x                                                       7x 7x   7x   7x 7x   7x 2x           5x           5x 5x   5x        
<script>
import { setup } from '../../mixins/setup';
import { register } from '../../mixins/registerTransformation';
import { compute } from '../../mixins/compute';
import { COMPONENTS } from '../../constants'
 
/**
 * The image to be shown while a video is downloading or until the user hits the play button.
 * This component must be added as a direct child of the [CldVideo](#cldvideo) component.
 *
 * If this component is not given then the poster image defaults to the middle frame of the source video in jpg format.
 */
export default {
  name: COMPONENTS.CldPoster,
  mixins: [ register, setup, compute ],
  inject: {
    registerPoster: {
      default: null
    },
    getConfig: {
      default: () => ({})
    },
    getOptions: {
      default: () => ({})
    }
  },
  props: {
    publicId: {
      type: String
    }
  },
  render(h) {
    const baseOptions = this.getOptions()
    const publicId = this.publicId || baseOptions.publicId
 
    if (!publicId || !this.registerPoster) return null
 
    const children = this.$slots.default || []
    const hasExtraTransformations = children.length > 0
    /* Render the children first to get the extra transformations (if there is any) */
    if (hasExtraTransformations && !this.extraTransformations.length) {
      return h(
        "div", {},
        this.$slots.default
      );
    }
 
    this.setup({
      ...this.getConfig(),
      ...baseOptions,
      ...this.$attrs
    })
 
    const options = this.computeURLOptions(baseOptions)
    this.registerPoster(this.cloudinary.url(publicId, options))
    
    return null
  }
};
</script>