<commit_before>import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import View from '!view!./video.html?style=./video.styl';

import { AppLoading } from '../../vue/components/loading/loading';

// We have to not use Vue for video embed stuff!
// https://forum.ionicframework.com/t/ionic-2-video-video-memory-leak-garbage-collection-solved/52333
// Massive memory leaks if we don't keep this out of Vue and finely tuned.

@View
@Component({
	components: {
		AppLoading,
	},
})
export class AppVideo extends Vue {
	@Prop(String) poster: string;
	@Prop(String) webm: string;
	@Prop(String) mp4: string;
	@Prop({ type: Boolean, default: false })
	showLoading: boolean;

	isLoaded = false;

	private video: HTMLVideoElement;

	mounted() {
		const webm = document.createElement('source');
		webm.type = 'video/webm';
		webm.src = this.webm;

		const mp4 = document.createElement('source');
		mp4.type = 'video/mp4';
		mp4.src = this.mp4;

		this.video = document.createElement('video');
		this.video.style.display = 'block';
		this.video.style.width = '100%';
		this.video.poster = this.poster;
		this.video.loop = true;

		this.video.appendChild(webm);
		this.video.appendChild(mp4);

		// This event continues to spawn.
		// Gotta remove once it fires the first time.
		let canplaythrough = () => {
			this.isLoaded = true;
			this.video.play();
			this.video.removeEventListener('canplaythrough', canplaythrough);
		};

		this.video.addEventListener('canplaythrough', canplaythrough);

		this.$el.appendChild(this.video);<commit_msg>Ability to tell videos to pause.<commit_after>import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import View from '!view!./video.html?style=./video.styl';

import { AppLoading } from '../../vue/components/loading/loading';

// We have to not use Vue for video embed stuff!
// https://forum.ionicframework.com/t/ionic-2-video-video-memory-leak-garbage-collection-solved/52333
// Massive memory leaks if we don't keep this out of Vue and finely tuned.

@View
@Component({
	components: {
		AppLoading,
	},
})
export class AppVideo extends Vue {
	@Prop(String) poster: string;
	@Prop(String) webm: string;
	@Prop(String) mp4: string;
	@Prop({ type: Boolean, default: false })
	showLoading: boolean;
	@Prop({ type: Boolean, default: true })
	shouldPlay: boolean;

	isLoaded = false;

	private video: HTMLVideoElement;

	@Watch('shouldPlay')
	onShouldPlayChange() {
		if (this.isLoaded) {
			if (this.shouldPlay) {
				this.video.play();
			} else {
				this.video.pause();
			}
		}
	}

	mounted() {
		const webm = document.createElement('source');
		webm.type = 'video/webm';
		webm.src = this.webm;

		const mp4 = document.createElement('source');
		mp4.type = 'video/mp4';
		mp4.src = this.mp4;

		this.video = document.createElement('video');
		this.video.style.display = 'block';
		this.video.style.width = '100%';
		this.video.poster = this.poster;
		this.video.loop = true;

		this.video.appendChild(webm);
		this.video.appendChild(mp4);

		// This event continues to spawn.
		// Gotta remove once it fires the first time.
		let canplaythrough = () => {
			this.isLoaded = true;
			this.video.removeEventListener('canplaythrough', canplaythrough);
			if (this.shouldPlay) {
				this.video.play();
			}
		};

		this.video.addEventListener('canplaythrough', canplaythrough);

		this.$el.appendChild(this.video);
{'fraction_non_alphanumeric': 0.14973576042278333, 'fraction_numerical': 0.009395184967704051, 'mean_word_length': 3.9234104046242773, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2851164', 'n_tokens_mistral': 1232, 'n_tokens_neox': 1117, 'n_words': 269}