UuuNyaa/iwara_thumbnail_estimation.html

## iwara_thumbnail_estimation.html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iwara thumbnail pickup frames estimation</title>
    <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <link rel="icon" href="//rawcdn.githack.com/neoascetic/rawgithack/4558441/sushi.png">
</head>

<body>
    <section class="section">
        <div class="container">
            <h1 class="title">Estimate thumbnail frames @iwara.tv</h1>
            <p class="subtitle">A thumbnail pickup frames estimation tool</p>

            <div class="field is-horizontal">
                <div class="field-label is-large">
                    <label class="label">Start frame</label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <input id="start_frame_input" class="input is-large is-success" type="number"
                                placeholder="start frame number" value="1" required pattern="[0-9]*">
                        </div>
                        <p id="start_frame_help" class="help is-success">inclusive, usually it's 1.</p>
                    </div>
                </div>
            </div>

            <div class="field is-horizontal">
                <div class="field-label is-large">
                    <label class="label">End frame</label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <input id="end_frame_input" class="input is-large is-success" type="number"
                                placeholder="end frame number" value="600">
                        </div>
                        <p id="end_frame_help" class="help is-success">inclusive, must be larger than the start frame.
                        </p>
                    </div>
                </div>
            </div>

            <div class="field is-horizontal">
                <div class="field-label is-large">
                    <label class="label">Thumbnail frames</label>
                </div>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <textarea id="results" class="textarea" rows="16" readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            const toDanger = (querySuffix) => {
                document.querySelector(querySuffix + '_input').classList.replace('is-success', 'is-danger')
                document.querySelector(querySuffix + '_help').classList.replace('is-success', 'is-danger')
            }

            const toSuccess = (querySuffix) => {
                document.querySelector(querySuffix + '_input').classList.replace('is-danger', 'is-success')
                document.querySelector(querySuffix + '_help').classList.replace('is-danger', 'is-success')
            }

            const start_frame_input = document.querySelector('#start_frame_input')
            const end_frame_input = document.querySelector('#end_frame_input')

            const estimate = () => {
                console.log("estimate")

                let onError = false
                if (!start_frame_input.checkValidity()) {
                    console.log("start_frame")
                    toDanger('#start_frame')
                    start_frame_input.reportValidity()
                    onError = true
                }

                if (!end_frame_input.checkValidity()) {
                    console.log("end_frame")
                    toDanger('#end_frame')
                    end_frame_input.reportValidity()
                    onError = true
                }

                if (onError) {
                    return
                }

                const start_frame = parseInt(start_frame_input.value)
                const end_frame = parseInt(end_frame_input.value)

                if (start_frame <= end_frame) {
                    toSuccess('#start_frame')
                    toSuccess('#end_frame')
                } else {
                    console.log("start_frame > end_frame")
                    toDanger('#start_frame')
                    toDanger('#end_frame')
                    return
                }

                const frame_count = end_frame - start_frame + 1
                const pickup_interval = Math.floor(Math.ceil(frame_count / 16 / 10.0)) * 10

                function* range(start, end) {
                    yield start;
                    if (start === end) return;
                    yield* range(start + 1, end);
                }

                const frames = Array.from([...range(1, 16)], i => start_frame + pickup_interval * i)

                const results = document.querySelector('#results')
                results.textContent = frames.map(e => String(e)).join("\n")
            }


            start_frame_input.addEventListener('change', estimate)
            end_frame_input.addEventListener('change', estimate)

            estimate()
        </script>
    </section>
    <section class="section">
        <div class="container">
            <h2 class="title">reference:</h2>
            <div class="content">
                <ul>
                    <li>
                        <a href="https://gist.github.com/UuuNyaa/e0045b43c7d98f4f3907b7c7ad8097b9">source code</a>
                    </li>
                    <li>
                        <a href="https://www.iwara.tv/images/thumbnail-pickup-frames-estimation">
                            https://www.iwara.tv/images/thumbnail-pickup-frames-estimation</a>
                    </li>
                </ul>
            </div>
        </div>
    </section>

</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>iwara thumbnail pickup frames estimation</title>
	<script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
	<link rel="icon" href="//rawcdn.githack.com/neoascetic/rawgithack/4558441/sushi.png">
	</head>

	<body>
	<section class="section">
	<div class="container">
	<h1 class="title">Estimate thumbnail frames @iwara.tv</h1>
	<p class="subtitle">A thumbnail pickup frames estimation tool</p>

	<div class="field is-horizontal">
	<div class="field-label is-large">
	<label class="label">Start frame</label>
	</div>
	<div class="field-body">
	<div class="field">
	<div class="control">
	<input id="start_frame_input" class="input is-large is-success" type="number"
	placeholder="start frame number" value="1" required pattern="[0-9]*">
	</div>
	<p id="start_frame_help" class="help is-success">inclusive, usually it's 1.</p>
	</div>
	</div>
	</div>

	<div class="field is-horizontal">
	<div class="field-label is-large">
	<label class="label">End frame</label>
	</div>
	<div class="field-body">
	<div class="field">
	<div class="control">
	<input id="end_frame_input" class="input is-large is-success" type="number"
	placeholder="end frame number" value="600">
	</div>
	<p id="end_frame_help" class="help is-success">inclusive, must be larger than the start frame.
	</p>
	</div>
	</div>
	</div>

	<div class="field is-horizontal">
	<div class="field-label is-large">
	<label class="label">Thumbnail frames</label>
	</div>
	<div class="field-body">
	<div class="field">
	<div class="control">
	<textarea id="results" class="textarea" rows="16" readonly></textarea>
	</div>
	</div>
	</div>
	</div>
	</div>
	<script>
	const toDanger = (querySuffix) => {
	document.querySelector(querySuffix + '_input').classList.replace('is-success', 'is-danger')
	document.querySelector(querySuffix + '_help').classList.replace('is-success', 'is-danger')
	}

	const toSuccess = (querySuffix) => {
	document.querySelector(querySuffix + '_input').classList.replace('is-danger', 'is-success')
	document.querySelector(querySuffix + '_help').classList.replace('is-danger', 'is-success')
	}

	const start_frame_input = document.querySelector('#start_frame_input')
	const end_frame_input = document.querySelector('#end_frame_input')

	const estimate = () => {
	console.log("estimate")

	let onError = false
	if (!start_frame_input.checkValidity()) {
	console.log("start_frame")
	toDanger('#start_frame')
	start_frame_input.reportValidity()
	onError = true
	}

	if (!end_frame_input.checkValidity()) {
	console.log("end_frame")
	toDanger('#end_frame')
	end_frame_input.reportValidity()
	onError = true
	}

	if (onError) {
	return
	}

	const start_frame = parseInt(start_frame_input.value)
	const end_frame = parseInt(end_frame_input.value)

	if (start_frame <= end_frame) {
	toSuccess('#start_frame')
	toSuccess('#end_frame')
	} else {
	console.log("start_frame > end_frame")
	toDanger('#start_frame')
	toDanger('#end_frame')
	return
	}

	const frame_count = end_frame - start_frame + 1
	const pickup_interval = Math.floor(Math.ceil(frame_count / 16 / 10.0)) * 10

	function* range(start, end) {
	yield start;
	if (start === end) return;
	yield* range(start + 1, end);
	}

	const frames = Array.from([...range(1, 16)], i => start_frame + pickup_interval * i)

	const results = document.querySelector('#results')
	results.textContent = frames.map(e => String(e)).join("\n")
	}


	start_frame_input.addEventListener('change', estimate)
	end_frame_input.addEventListener('change', estimate)

	estimate()
	</script>
	</section>
	<section class="section">
	<div class="container">
	<h2 class="title">reference:</h2>
	<div class="content">
	<ul>
	<li>
	<a href="https://gist.github.com/UuuNyaa/e0045b43c7d98f4f3907b7c7ad8097b9">source code</a>
	</li>
	<li>
	<a href="https://www.iwara.tv/images/thumbnail-pickup-frames-estimation">
	https://www.iwara.tv/images/thumbnail-pickup-frames-estimation</a>
	</li>
	</ul>
	</div>
	</div>
	</section>

	</body>

	</html>