AutoPlayNextEpisode

自動撥放下一集&紀錄觀看的動畫集數
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         AutoPlayNextEpisode
// @version      1.0.2
// @description  自動撥放下一集&紀錄觀看的動畫集數
// @author       Jay.Huang
// @match        https://v.myself-bbs.com/player/*
// @match        https://myself-bbs.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=myself-bbs.com
// @grant        none
// @license      MIT
// @namespace https://github.com/2jo4u4/MySelfRecorder.git
// ==/UserScript==
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
const storeKeyWord = "recorder";
const storeFavorite = "favorite";
const favoriteIconHref = "https://cdn-icons-png.flaticon.com/512/2107/2107845.png";
const favoriteAddIconHref = "https://cdn-icons-png.flaticon.com/512/2001/2001314.png";
const favoriteRemoveIconHref = "https://cdn-icons-png.flaticon.com/512/2001/2001316.png";
const notFoundCoverImg = "https://cdn-icons-png.flaticon.com/512/7214/7214281.png";
const clearLogImg = "https://cdn-icons-png.flaticon.com/512/3602/3602056.png";
const PIPmode = true
 
var FavoriteBtnStatus;
(function (FavoriteBtnStatus) {
    FavoriteBtnStatus[FavoriteBtnStatus["\u672A\u52A0\u5165\u6700\u611B"] = 0] = "\u672A\u52A0\u5165\u6700\u611B";
    FavoriteBtnStatus[FavoriteBtnStatus["\u5DF2\u52A0\u5165\u6700\u611B"] = 1] = "\u5DF2\u52A0\u5165\u6700\u611B";
})(FavoriteBtnStatus || (FavoriteBtnStatus = {}));
function dalay() {
    return __awaiter(this, arguments, void 0, function* (timeout = 500) {
        return new Promise(resolve => {
            setTimeout(resolve, timeout);
        });
    });
}
class VideoPlayManager {
    constructor() {
        // https://v.myself-bbs.com/player/AgADjw0AAmr7uVQ?totalEpisode=11&0=AgADjw0AAmr7uVQ&1=AgADuQ8AAhENCFU
        this.url = new URL(window.location.href);
        this.totalEpisode = Number(this.url.searchParams.get("totalEpisode") ?? "NaN");
        this.currEpisode = Number(this.url.searchParams.get("currEpisode") ?? "NaN");
        if(!isNaN(this.totalEpisode)) {
            this.from = this.url.searchParams.get('from') ?? null
            this.addCrtlBtn();
            document.body.onload = () => {
                this.getVideoPlay().then(videoEl => {
                    if (videoEl) {
                        console.log(videoEl, { PIPmode, requestPictureInPicture: Boolean(videoEl.requestPictureInPicture) })
                        if(PIPmode && videoEl.requestPictureInPicture) {
                            videoEl.addEventListener("play", ()=>{
                                videoEl.requestPictureInPicture().then(()=>{
                                    console.log("auto open pip mode");
                                })
                            })
                        }
                        videoEl.addEventListener("ended", () => {
                            this.changeEpisode(true);
                        });
                    }
                });
            }
        }
    }
    changeEpisode(next = true){
        const targetNumber = next ? this.currEpisode + 1 : this.currEpisode - 1
        const videoUrl = this.url.searchParams.get(targetNumber.toString()) ?? null
        if(videoUrl !== null) {
            window.location.href = this.getNextURL(videoUrl, targetNumber);
        } else {
            if(next) {
                alert("沒有下一集了，將返回列表。");
                 if(this.from) {
                     window.location.href = this.from
                 }
            }
            else {
                alert("找不到上一集。");
            }
        }
    }
    addCrtlBtn(){
        const prevBtn = document.createElement("div");
        prevBtn.onclick = () => {
            this.changeEpisode(false);
        }
 
        const nextBtn = document.createElement("div");
        nextBtn.onclick = () => {
            this.changeEpisode(true);
        }
 
        function addStyle(btn, type = "left"){
            btn.style.position = "fixed";
            btn.style.zIndex = "998";
            btn.style.top = "50%";
            btn.style[type] = "0px";
            btn.style.width = "24px";
            btn.style.height = "64px";
            btn.style.borderRadius = "12px";
            btn.style.border = "1px black solid";
            btn.style.backgroundColor = "white";
            btn.style.opacity = "0.3";
            btn.style.transition = "opacity 0.3s"
            btn.onmouseenter = () => {
                btn.style.opacity = "1";
            }
            btn.onmouseleave = () => {
                btn.style.opacity = "0.3";
            }
        }
 
        addStyle(prevBtn, "left");
        addStyle(nextBtn, "right");
        document.body.append(prevBtn, nextBtn)
    }
    getVideoPlay() {
        return __awaiter(this, arguments, void 0, function* (times = 5) {
            let video;
            let retry = 0;
            while (!Boolean(video) && retry <= times) {
                video = document.querySelector("video");
                yield dalay(1000);
                retry += 1;
            }
            return video;
        });
    }
    getNextURL(videoUrl, episodeNumber) {
        const nextUrl = new URL(videoUrl)
        nextUrl.search = this.url.search
        nextUrl.searchParams.set("currEpisode", episodeNumber)
        return nextUrl.toString();
    }
}
class AnimeManager {
    constructor() {
        this.favoriteList = Tools.getFavorite();
        this.createPositionEl();
        this.renderFavoriteListUI();
        // thread-47934-1-1.html
        if (/^\/thread/.test(window.location.pathname)) {
            this.page = "episode";
            this.animeCode = window.location.pathname.split("-")[1];
            this.recordList = Tools.getRecorder();
            this.episodeUrls = [];
            this.getElement().then(main => {
                if (main) {
                    this.mainEl = main;
                    this.animeName = this.getAnimeName();
                    this.anchorEls = Array.from(main.getElementsByClassName("various"));
                    this.anchorEls.forEach((tagA, index) => {
                        const url = this.getEpisodeUrlByElement(tagA);
                        this.enhanceAnchorEl(tagA, index);
                        if (url) {
                            this.episodeUrls.push(url);
                            this.addAutoBtnEachEpisode(tagA, url);
                        }
                    });
                    this.rerenderAnchorElHighight("render");
                    this.renderEpisodeUI();
                    this.renderCtrlFavoriteUI();
                }
                else {
                   console.warn("找不到動畫集數資訊");
                }
            });
        }
        else {
            this.page = "overview";
        }
        document.body.append(this.positionEl);
    }
    get currAnimeRecord() {
        return this.recordList[this.animeCode];
    }
    renderEpisodeUI() {
        const animeCode = this.animeCode;
        const container = document.querySelector(".fr.vodlist_index").children[0];
        container.style.position = "relative";
        // 添加清除按鈕
        container.appendChild(UIComponent.cleanWatchLogBtn(() => {
            const recorder = Tools.getRecorder();
            Tools.setRecorder(Object.assign(Object.assign({}, recorder), { [animeCode]: [] }));
            this.rerenderAnchorElHighight("clearAll");
        }));
    }
    // 添加觀看紀錄的高亮提示
    rerenderAnchorElHighight(type) {
        if (type === "clearAll") {
            this.anchorEls.forEach(el => {
                el.parentElement.parentElement.parentElement.style.backgroundColor = "unset";
            });
        }
        else if (type === "render" && this.currAnimeRecord && this.currAnimeRecord.length > 1) {
            const [recently, ...log] = this.currAnimeRecord;
            this.anchorEls[recently].parentElement.parentElement.parentElement.style.backgroundColor = "#ff000080";
            log.forEach(episodeIndex => {
                this.anchorEls[episodeIndex].parentElement.parentElement.parentElement.style.backgroundColor = "#ff000030";
            });
        }
    }
    getEpisodeUrlByElement(el) {
        return el.dataset.href || null;
    }
    addAutoBtnEachEpisode(el, url) {
        const span = document.createElement("span");
        span.innerText = "自動接續下集";
        span.style.cursor = "pointer";
        span.style.marginLeft = "4px";
        span.onclick = () => {
            this.gotoPlayPage(url);
        };
        el.parentElement.appendChild(span);
    }
    gotoPlayPage(targetUrl) {
        const totalEpisode = `totalEpisode=${this.episodeUrls.length}`;
        let keyValue = ""
        let currEpisode = 0
        this.episodeUrls.forEach((url, index) => {
            const episode = index + 1;
            if(targetUrl === url) {
                currEpisode = episode
            }
            keyValue += `&${episode}=${url}`;
        });
        const from = window.location.href;
        const url = `${targetUrl}?currEpisode=${currEpisode}&${totalEpisode}${keyValue}&from=${from}`;
        window.location.href = url;
    }
    getElement() {
        return __awaiter(this, arguments, void 0, function* (times = 5) {
            let main;
            let retry = 0;
            while (main === undefined && retry <= times) {
                main = document.getElementsByClassName("main_list")[0];
                yield dalay();
                retry += 1;
            }
            return main;
        });
    }
    enhanceAnchorEl(el, index) {
        const animeCode = this.animeCode;
        el.onclick = () => {
            const recorder = Tools.getRecorder();
            const newNumberList = Array.from(new Set(recorder[animeCode] ? [index, ...recorder[animeCode]] : [index]));
            Tools.setRecorder(Object.assign(Object.assign({}, recorder), { [animeCode]: newNumberList }));
            this.recordList = Tools.getRecorder();
            this.rerenderAnchorElHighight("render");
        };
    }
    getAnimeName() {
        var _a;
        const block = (((_a = document.querySelector("#pt .z")) === null || _a === void 0 ? void 0 : _a.lastElementChild) || null);
        if (block) {
            return block.innerText.replace(/【(\S|\s|0-9)*/, "");
        }
        else {
            return "";
        }
    }
    /** 建立主畫面定位按鈕元素 */
    createPositionEl() {
        // 定位主畫面的按鈕
        this.positionEl = document.createElement("div");
        this.positionEl.id = "positionEl";
        this.positionEl.style.position = "fixed";
        this.positionEl.style.display = "flex";
        this.positionEl.style.flexDirection = "row";
        this.positionEl.style.top = "20px";
        this.positionEl.style.left = "20px";
    }
    /** 我的最愛列表 */
    renderFavoriteListUI() {
        let favoritListFlag = false;
        // 父元素
        const container = document.createElement("div");
        container.id = "container";
        container.style.display = "flex";
        container.style.flexDirection = "row";
        container.style.marginRight = "4px";
        // 用於打開最愛列表的按鈕
        const favorite_btn = document.createElement("img");
        this.ctrlBtnStyle(favorite_btn);
        favorite_btn.src = favoriteIconHref;
        favorite_btn.title = "打開/關閉最愛列表";
        // 被打開的列表
        const favorite_list = document.createElement("div");
        favorite_list.style.maxHeight = "50vh";
        favorite_list.style.display = favoritListFlag ? "flex" : "none";
        favorite_list.style.flexDirection = "column";
        favorite_list.style.marginTop = "12px";
        favorite_list.style.padding = "12px";
        favorite_list.style.backdropFilter = "blur(20px)";
        favorite_list.style.borderRadius = "12px";
        favorite_list.style.overflow = "auto";
        favorite_list.style.position = "absolute";
        favorite_list.style.width = "max-content";
        favorite_list.style.top = "48px";
        // 用於顯示開動畫的 Cover 圖定位
        const coverImage = document.createElement("div");
        coverImage.style.marginTop = "12px";
        coverImage.style.position = "relative";
        const span = document.createElement("span");
        span.innerText = "暫無最愛";
        span.style.color = "darkorange";
        favorite_btn.onclick = () => {
            favoritListFlag = !favoritListFlag;
            favorite_list.style.display = favoritListFlag ? "flex" : "none";
            span.style.display = this.favoriteList.length === 0 ? "block" : "none";
        };
        this.favoriteList.forEach((item, index) => {
            const card = this.favoriteAnimeItem(coverImage, item, index !== 0 ? 12 : 0);
            favorite_list.append(card);
        });
        favorite_list.append(span);
        container.append(favorite_btn, coverImage, favorite_list);
        this.positionEl.append(container);
    }
    favoriteAnimeItem(coverImagePosition, v, marginTop = 0) {
        const { animecode, image, name, href } = v;
        const card = document.createElement("div");
        card.id = animecode;
        card.style.marginTop = `${marginTop}px`;
        card.style.maxWidth = "300px";
        const coverImage = document.createElement("img");
        coverImage.src = image;
        coverImage.style.position = "absolute";
        coverImage.style.top = "0";
        coverImage.style.left = "310px";
        coverImage.style.border = "6px solid white";
        coverImage.style.borderRadius = "12px";
        coverImage.style.boxShadow = "4px 6px 8px 6px #60606073";
        const link = document.createElement("a");
        link.href = href;
        link.style.color = "#fff";
        link.style.textShadow = "#000 0.1em 0.1em 0.2em";
        link.innerText = name;
        link.style.display = "flex";
        link.style.flexDirection = "column";
        link.onmouseenter = () => {
            coverImagePosition.append(coverImage);
        };
        link.onmouseleave = () => {
            coverImage.remove();
        };
        card.append(link);
        return card;
    }
    /** 加入最愛 / 移除最愛 */
    renderCtrlFavoriteUI() {
        let index = this.favoriteList.findIndex(({ animecode }) => animecode === this.animeCode);
        let isFavorite = index !== -1;
        const coverPicture = document.querySelector(".info_con .info_img_box img");
        const info = {
            name: this.animeName,
            image: (coverPicture === null || coverPicture === void 0 ? void 0 : coverPicture.src) || notFoundCoverImg,
            href: window.location.pathname,
            animecode: this.animeCode,
        };
        const ctrl_btn = document.createElement("img");
        this.ctrlBtnStyle(ctrl_btn);
        if (isFavorite) {
            ctrl_btn.src = favoriteRemoveIconHref;
            ctrl_btn.title = "移除最愛";
        }
        else {
            ctrl_btn.src = favoriteAddIconHref;
            ctrl_btn.title = "加入最愛";
        }
        ctrl_btn.addEventListener("click", () => {
            if (isFavorite) {
                // remove
                this.favoriteList.splice(index, 1);
                Tools.setFavorite(this.favoriteList);
                ctrl_btn.title = "加入最愛";
                ctrl_btn.src = favoriteAddIconHref;
            }
            else {
                // add
                this.favoriteList = [...this.favoriteList, info];
                Tools.setFavorite(this.favoriteList);
                ctrl_btn.title = "移除最愛";
                ctrl_btn.src = favoriteRemoveIconHref;
            }
            this.rerenderFavoriteListUI();
            isFavorite = !isFavorite;
        });
        this.positionEl.append(ctrl_btn);
    }
    rerenderFavoriteListUI() {
        const listContainer = this.positionEl.children[0];
        const ctrlBtn = this.positionEl.children[1];
        listContainer.remove();
        ctrlBtn.remove();
        this.renderFavoriteListUI();
        this.positionEl.append(ctrlBtn);
    }
    /** 主畫面顯示的按鈕樣式 */
    ctrlBtnStyle(el) {
        el.style.width = "24px";
        el.style.height = "24px";
        el.style.padding = "12px";
        el.style.borderRadius = "12px";
        el.style.backdropFilter = "blur(20px)";
        el.style.cursor = "pointer";
        el.style.border = "3px solid rgb(130, 130, 130)";
    }
}
class Tools {
    static setFavorite(data) {
        window.localStorage.setItem(storeFavorite, JSON.stringify(data));
    }
    static getFavorite() {
        const str = window.localStorage.getItem(storeFavorite) || "[]";
        return JSON.parse(str);
    }
    static setRecorder(data) {
        window.localStorage.setItem(storeKeyWord, JSON.stringify(data));
    }
    static getRecorder() {
        const str = window.localStorage.getItem(storeKeyWord) || "{}";
        return JSON.parse(str);
    }
}
class NoticeUIChange {
}
class UIComponent {
    static cleanWatchLogBtn(clickCB) {
        const clearBtn = document.createElement("img");
        clearBtn.src = clearLogImg;
        clearBtn.style.position = "absolute";
        clearBtn.style.top = "6px";
        clearBtn.style.right = "6px";
        clearBtn.style.cursor = "pointer";
        clearBtn.style.width = "24px";
        clearBtn.style.height = "24px";
        clearBtn.alt = "清除觀看紀錄";
        clearBtn.title = "清除觀看紀錄";
        clearBtn.onclick = clickCB;
        // clearBtn.onclick = function () {
        //   const recorder = Tools.getRecorder();
        //   Tools.setRecorder({ ...recorder, [animeCode]: [] });
        //   mark([]);
        // };
        return clearBtn;
    }
    static ctrlFavoriteBtn(initType) {
        const btn = document.createElement("img");
        let isAlreadyAdd = initType === FavoriteBtnStatus.已加入最愛;
        const changeIcon_Remove = () => {
            btn.src = favoriteRemoveIconHref;
            btn.title = "移除最愛";
        };
        const changeIcon_Add = () => {
            btn.src = favoriteAddIconHref;
            btn.title = "加入最愛";
        };
        btn.style.marginRight = "4px";
        btn.style.width = "24px";
        btn.style.height = "24px";
        btn.style.padding = "12px";
        btn.style.borderRadius = "12px";
        btn.style.backdropFilter = "blur(20px)";
        btn.style.cursor = "pointer";
        btn.style.border = "3px solid rgb(130, 130, 130)";
        if (isAlreadyAdd) {
            changeIcon_Remove();
        }
        else {
            changeIcon_Add();
        }
        btn.addEventListener("click", () => {
            isAlreadyAdd = !isAlreadyAdd;
            if (isAlreadyAdd) {
                changeIcon_Remove();
            }
            else {
                changeIcon_Add();
            }
        });
    }
}
(function () {
    "use strict";
    const isVideoPlay = window.location.origin === "https://v.myself-bbs.com";
    if (isVideoPlay) {
        new VideoPlayManager();
    }
    else {
        new AnimeManager();
    }
})();
欢迎访问Greasy Fork镜像
