<commit_before><template>
    <div class="container">
        <div class="row">

            <div :class="{'col-md-8': activeChapter, 'col-md-12': !activeChapter}">
                <chapter 
                    v-for="chapter in sortedChapters"
                    @activate="activateChapter(chapter)" 
                    :active="isActive(chapter)"
                    :start="chapter.start" 
                    :title="chapter.title">
                </chapter>
            </div>

            <div class="col-md-4 chapter-edit" v-if="activeChapter">
                <div class="form-group">
                    <label for="chapter_title">Title</label>
                    <input type="text" v-model="activeChapter.title" class="form-control" id="chapter_title">
                </div>
                <div class="form-group">
                    <label for="chapter_start">Start Time</label>
                    
                        <label class="form-check-inline">
                            <input class="form-check-input" type="radio" name="timeformat" value="ms" autocomplete="off" v-model="timeformat"> milliseconds
                        </label>
                        <label class="form-check-inline">
                            <input class="form-check-input" type="radio" name="timeformat" value="hr" autocomplete="off" v-model="timeformat"> human readable
                        </label>

                    <input type="text" :value="formatTime(activeChapter.start.totalMs)" v-on:input="activeChapter.start.totalMs = unformatTime($event.target.value)" class="form-control" id="chapter_start">
                </div>

                <div class="form-group">
                    <button class="button button-secondary delete-chapter" @click.prevent="deleteActiveChapter">Delete Chapter</button>
                </div>
            </div>

        </div>

        <hr>

        <div class="row">
                <button class="button button-secondary" @click.prevent="addChapter">Add Chapter</button>

                &nbsp;

                <button class="button button-secondary" @click.prevent="importChapters">Import Chapter File</button>

                &nbsp;

                <input type="file" name="chapterimport" id="chapterimport"> 

                <div style="float: right">
                    <small>
                        Export: <a :href="mp4chapsDownloadHref" download="chapters.txt">mp4chaps</a> 
                        <a :href="pscDownloadHref" download="chapters.psc">psc</a>
                    </small>
                </div>
        </div>

        <!-- invisible textarea used for persisting -->
        <textarea name="_podlove_meta[chapters]" v-model="chaptersAsMp4chaps" style="display: none"></textarea>

        <!-- 
        <hr>

        <div class="row export-row">
            <div class="col-md-12">
                <h2>MP4Chaps <small><a :href="mp4chapsDownloadHref" download="chapters.txt">download</a></small></h2>
                <textarea class="form-control" v-bind:rows="chapters.length" v-model="chaptersAsMp4chaps" readonly></textarea>
            </div>
        </div>

        <hr>

        <div class="row export-row">
            <div class="col-md-12">
                <h2>Podlove Simple Chapters <small><a :href="pscDownloadHref" download="chapters.psc">download</a></small></h2> 
                <textarea class="form-control" v-bind:rows="chapters.length + 2" v-model="chaptersAsPSC" readonly></textarea>
            </div>
        </div>
         -->

    </div>
</template>

<script>
// import MP4Chaps from 'podcast-chapter-parser-mp4chaps';
const MP4Chaps = require('podcast-chapter-parser-mp4chaps');
const psc = require('podcast-chapter-parser-psc').parser(window.DOMParser);
const npt = require('normalplaytime');
import Timestamp from "../timestamp"
import guid from "../guid"

class Chapter {
  constructor(title, start) {
    this.id = guid();
    this.title = title;
    this.start = start;
  }
}

export default {

    data() {
        // let c1 = new Chapter("Intro", new Timestamp(0));
        return {
            chapters: [],
            activeChapter: null,
            timeformat: 'hr'
        }
    },

    methods: {
        activateChapter (chapter) {
            this.activeChapter = chapter;

            // there is probably a better way then random timeout
            window.setTimeout(() => {
                let titleInput = document.getElementById('chapter_title');

                if (!!titleInput) {
                    titleInput.focus();
                }
            }, 100);

        },
        isActive (chapter) {
            return this.activeChapter && chapter.id == this.activeChapter.id;
        },
        addChapter () {
            let newChapter = new Chapter("", new Timestamp(0));
            this.chapters.push(newChapter);
            this.activateChapter(newChapter);
        },
        deleteActiveChapter() {

            let index = this.chapters.indexOf(this.activeChapter);

            if (index < 0) {
                return;
            }

            this.chapters.splice(index, 1);

            if (this.chapters.length > 0) {
                this.activateChapter(this.chapters[0]);
            } else {
                this.activateChapter(null);
            }
            
        },
        importChapters() {
            const fileInput = document.getElementById("chapterimport");<commit_msg>deleting chapter activates near chapter<commit_after><template>
    <div class="container">
        <div class="row">

            <div :class="{'col-md-8': activeChapter, 'col-md-12': !activeChapter}">
                <chapter 
                    v-for="chapter in sortedChapters"
                    @activate="activateChapter(chapter)" 
                    :active="isActive(chapter)"
                    :start="chapter.start" 
                    :title="chapter.title">
                </chapter>
            </div>

            <div class="col-md-4 chapter-edit" v-if="activeChapter">
                <div class="form-group">
                    <label for="chapter_title">Title</label>
                    <input type="text" v-model="activeChapter.title" class="form-control" id="chapter_title">
                </div>
                <div class="form-group">
                    <label for="chapter_start">Start Time</label>
                    
                        <label class="form-check-inline">
                            <input class="form-check-input" type="radio" name="timeformat" value="ms" autocomplete="off" v-model="timeformat"> milliseconds
                        </label>
                        <label class="form-check-inline">
                            <input class="form-check-input" type="radio" name="timeformat" value="hr" autocomplete="off" v-model="timeformat"> human readable
                        </label>

                    <input type="text" :value="formatTime(activeChapter.start.totalMs)" v-on:input="activeChapter.start.totalMs = unformatTime($event.target.value)" class="form-control" id="chapter_start">
                </div>

                <div class="form-group">
                    <button class="button button-secondary delete-chapter" @click.prevent="deleteActiveChapter">Delete Chapter</button>
                </div>
            </div>

        </div>

        <hr>

        <div class="row">
                <button class="button button-secondary" @click.prevent="addChapter">Add Chapter</button>

                &nbsp;

                <button class="button button-secondary" @click.prevent="importChapters">Import Chapter File</button>

                &nbsp;

                <input type="file" name="chapterimport" id="chapterimport"> 

                <div style="float: right">
                    <small>
                        Export: <a :href="mp4chapsDownloadHref" download="chapters.txt">mp4chaps</a> 
                        <a :href="pscDownloadHref" download="chapters.psc">psc</a>
                    </small>
                </div>
        </div>

        <!-- invisible textarea used for persisting -->
        <textarea name="_podlove_meta[chapters]" v-model="chaptersAsMp4chaps" style="display: none"></textarea>

        <!-- 
        <hr>

        <div class="row export-row">
            <div class="col-md-12">
                <h2>MP4Chaps <small><a :href="mp4chapsDownloadHref" download="chapters.txt">download</a></small></h2>
                <textarea class="form-control" v-bind:rows="chapters.length" v-model="chaptersAsMp4chaps" readonly></textarea>
            </div>
        </div>

        <hr>

        <div class="row export-row">
            <div class="col-md-12">
                <h2>Podlove Simple Chapters <small><a :href="pscDownloadHref" download="chapters.psc">download</a></small></h2> 
                <textarea class="form-control" v-bind:rows="chapters.length + 2" v-model="chaptersAsPSC" readonly></textarea>
            </div>
        </div>
         -->

    </div>
</template>

<script>
// import MP4Chaps from 'podcast-chapter-parser-mp4chaps';
const MP4Chaps = require('podcast-chapter-parser-mp4chaps');
const psc = require('podcast-chapter-parser-psc').parser(window.DOMParser);
const npt = require('normalplaytime');
import Timestamp from "../timestamp"
import guid from "../guid"

class Chapter {
  constructor(title, start) {
    this.id = guid();
    this.title = title;
    this.start = start;
  }
}

export default {

    data() {
        // let c1 = new Chapter("Intro", new Timestamp(0));
        return {
            chapters: [],
            activeChapter: null,
            timeformat: 'hr'
        }
    },

    methods: {
        activateChapter (chapter) {
            this.activeChapter = chapter;

            // there is probably a better way then random timeout
            window.setTimeout(() => {
                let titleInput = document.getElementById('chapter_title');

                if (!!titleInput) {
                    titleInput.focus();
                }
            }, 100);

        },
        isActive (chapter) {
            return this.activeChapter && chapter.id == this.activeChapter.id;
        },
        addChapter () {
            let newChapter = new Chapter("", new Timestamp(0));
            this.chapters.push(newChapter);
            this.activateChapter(newChapter);
        },
        deleteActiveChapter() {

            let index = this.chapters.indexOf(this.activeChapter);

            if (index < 0) {
                return;
            }

            this.chapters.splice(index, 1);

            // activate the nearest item (next, or previous if there is no next)
            if (this.chapters[index]) {
                this.activateChapter(this.chapters[index]);
            } else if (this.chapters[index - 1]) {
                this.activateChapter(this.chapters[index - 1]);
            } else {
                this.activateChapter(null);
            }
            
        },
        importChapters() {
            const fileInput = document.getElementById("chapterimport");
{'fraction_non_alphanumeric': 0.13610160331471807, 'fraction_numerical': 0.005944874797333814, 'mean_word_length': 1.74962852897474, 'pattern_counts': {'":': 0, '<': 163, '<?xml version=': 0, '>': 164, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 20, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7295395', 'n_tokens_mistral': 3181, 'n_tokens_neox': 2876, 'n_words': 556}