☰

twidouga_viewer

直接看 twidouga 的影片

// ==UserScript==
// @name         twidouga_viewer
// @namespace    https://mesak.tw
// @version      0.2
// @description  直接看 twidouga 的影片
// @description:en  quick to view video
// @author       Mesak
// @license      MIT
// @match        https://www.twidouga.net/realtime_t.php*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twidouga.net
// @require      https://unpkg.com/[email protected]/dist/vue.global.prod.js
// @require      data:application/javascript,%3Bwindow.Vue%3DVue%3BunsafeWindow.Vue%3DVue%3B
// @require      https://unpkg.com/[email protected]/dist/index.full.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.14/mediaelement-and-player.min.js
// @grant        GM_addElement
// @grant        unsafeWindow
// @run-at       document-start
// ==/UserScript==
(async function(vue) {
    'use strict';
    function proxyTap(t){let n=new Proxy(t,{get(t,e,r){let o=Reflect.get(t,e,r);return"function"!=typeof o?o:(...e)=>(o.call(t,...e),n)}});return n}
    function tap(t,n){return n?(n(t),t):proxyTap(t)}
    Response.prototype.html = async function () {
        return tap(new DOMParser().parseFromString(((text)=>{
            text = text.replaceAll('/a>','</a>').replaceAll('</a','</a>').replaceAll('<<','<').replaceAll('>>','>')
            return (text.substring(0,1) === text.substring(text.length-1) )?
                JSON.parse(text) : text;
        })(await this.text()), 'text/html'),(node) => {
            node.querySelectorAll('link').forEach(e => e.remove());
            node.querySelectorAll('style').forEach(e => e.remove());
            node.querySelectorAll('script').forEach(e => e.remove());
        });
    }
    GM_addElement('link', {
        href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css',
        rel: 'stylesheet'
    });
    GM_addElement('link', {
        href: 'https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.14/mediaelementplayer.min.css',
        rel: 'stylesheet'
    });
    GM_addElement('link', {
        href: 'https://unpkg.com/[email protected]/dist/index.css',
        rel: 'stylesheet'
    });
    GM_addElement('style', {
        textContent: `
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.infinite-list {
  height: 720px;
  padding: 0;
  margin: 0;
  margin-top: 120px;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}
`});
    const apiRealTime = (()=>{
        const getUrl = (path) =>{
            return `https://${window.location.host}/${path}`;
        }
        const request = (path, params, method = 'GET') => {
            let url = getUrl(path);
            if (method === 'GET' && params) {
                url += `?${new URLSearchParams(params)}`;
            }
            console.log('url = ',url)
            return fetch(url).then(res => res.html());
        };
        return {
            getList: (page) => {
                return new Promise((resolve, reject)=>{
                    request('list', { page }).then( (resDom)=>{
                        let result = [];
                        for (const itemNode of resDom.querySelectorAll('#container .item')) {
                            const hasIframe = itemNode.querySelector('iframe') === null;
                            const needShow = !itemNode.hasAttribute('id') && hasIframe;
                            if( needShow ){
                                const data = {
                                    id: Date.now(),
                                    link: itemNode.querySelector('.saisei a').getAttribute('href'),
                                    thumb: itemNode.querySelector('a > img').getAttribute('src'),
                                    video: itemNode.querySelector('a:nth-child(1)').getAttribute('href')
                                };
                                data.id = new URL(data.link).pathname.match(/\/(\d+)/i)[1];
                                //console.log(data.id)
                                result.push(data);
                            }
                        }
                        console.log('result',result)
                        resolve(result);
                    }).catch((error) => {
                        reject(error);
                    });
                })
            },
        };
    })();
    document.querySelector('body').innerHTML = `<div id="app">
<div class="common-layout">
     <el-container>
        <el-aside width="400px">
            <h3>{{nowPage}}</h3> <el-button type="primary" @click=onResetPage>重置</el-button>
            <ul v-infinite-scroll="onLoadPage" class="infinite-list" style="overflow: auto">
                <li v-for="item in resourceList" :key="item" class="infinite-list-item">
                   <el-image style="width: 360px;" :src="item.thumb" :fit="fit" @click=onPlayVideo(item.id) />
                </li>
            </ul>
        </el-aside>
        <el-main>
                <el-card class="box-card">
                    <template #header>
                        <div class="card-header">
                            <span>{{active.id}}</span>
                            <a :href=active.link>Twitter</a>
                        </div>
                    </template>
                    <video id="video-player" ref="videoRef" controls></video>
                </el-card>
        </el-main>
    </el-container>
</div>
<div id="wrap"></div>
</div>`;
    const { createApp,ref,computed ,onMounted } = vue;
    const app = createApp({
        setup() {

            const resource = ref(new Map());
            const resourceList = computed({
                get : () => Array.from( resource.value.values() ),
                set : (newData) =>{
                    console.log( newData )
                    let newResource = new Map();
                    Array.from(newData, (value, _key) => {
                        newResource.set(value.id ,value )
                    })
                    resource.value = newResource;
                }
            })
            const active = ref({
                id:'',
                video:'',
                thumb:''
            });
            const page = ref(0);
            const nowPage = computed(()=>page.value);
            const onResetPage = () => {
                page.value = 0;
            }
            const fetchIng = ref(false);
            const onLoadPage = () => {
                if( !fetchIng.value ){
                    page.value++;
                    fetchIng.value = true
                    apiRealTime.getList(nowPage.value).then( (result) => {
                        resourceList.value = result
                        fetchIng.value = false
                    });
                }
            }
            const videoRef = ref(null);
            const player = ref(null);
            const onPlayVideo = (id) => {
                active.value = resource.value.get(id);
                player.value.setSrc({
                    src: active.value.video,
                    type: 'video/mp4',
                });
                player.value.play();
            }
            onMounted(() => {
                resourceList.value = [
                    {
                        id : 0,
                        video : '',
                        link: '',
                        thumb : 'https://fakeimg.pl/600x200/?text=empty'
                    }
                ]
                onLoadPage();
                player.value = new MediaElementPlayer(videoRef.value);
            })
            return {
                nowPage,
                active,
                onLoadPage,
                onPlayVideo,
                onResetPage,
                resourceList,
                videoRef,
            };
        },
    });
    app.use(ElementPlus);
    app.mount('#app');
})(Vue);