<template>
  <div class="y-video" style="width: 100vw;height: 100vh;" bg-gray-5 overflow-hidden ref="root">
    <div class="y-video__content" w-full h-full z--1>
      <video class="y-video__video" ref="ref" :src="src" w-full h-full ></video>
    </div>
    <div m2 f-c hover="op80">
      <div class="i-ph-anchor-simple-thin" />
      <button text-white text-3xl class="carbon:continue-filled" />
    </div>
    <div class="y-video__menu">
      <div class="y-video__progress"></div>
      <div class="y-video__controls"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, toRefs } from "vue";
const state = reactive({root:null,ref:null,src:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'});

onMounted(()=>{
  // window.self === window.top ? location.href ='/' : 
  SendMessage('ready',{msg:'youloge.sso is ready'});
  let {root} = state;
  root.addEventListener('contextmenu',onContextmenu);
  window.addEventListener('message',(msg)=>{
    console.log(msg);
  })
})
// 右键监听
const onContextmenu = (e)=>{
  e.preventDefault();e.stopPropagation();
  console.log(e);
}
// SendMessage
const SendMessage = (method,params={})=>{
  let {hash,referrer} = state;
  referrer && window.parent.postMessage({ [hash]:{method:method,params:params} }, referrer);
}
const {ref,src,root} = toRefs(state);
</script>

<style>
*{margin: 0;padding: 0;}html{width: 100%;height: 100%;}
</style>