media_player_client/src/App.vue

327 lines
9.5 KiB
Vue

<template>
<div class="fit">
<q-ajax-bar position="top" color="accent" size="5px" skip-hijack />
<q-menu context-menu />
<router-view />
</div>
</template>
<script lang="ts">
import { SessionStorage, Cookies, useQuasar, setCssVar } from "quasar";
import { defineComponent } from "vue";
import { useI18n } from "vue-i18n";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import { IWuJieInterface, useStore } from "src/store";
import GlobalData from "./common/GlobalData";
import { EProductNames } from "./entities/ProductNames";
import { api } from "./boot/axios";
import { WuJieInitializer } from "./common/WuJieInitializer";
import ClientConnection from "./common/ClientConnection";
import { Common } from "./common/Common";
export default defineComponent({
name: "App",
setup() {
const $t = useI18n();
const $store = useStore();
const $q = useQuasar();
if ((window as any).$wujie) {
const $wujie = (window as any).$wujie as IWuJieInterface;
$store.commit("setWuJie", $wujie);
WuJieInitializer.initialize($wujie, $store, $q, $t);
}
document.title = $t.t("title");
if (!navigator.cookieEnabled) {
$q.dialog({
title: $t.t("error"),
html: true,
message: `
<p>${$t.t(
"The client depends on the Cookie function. If cookies are not enabled in the current browser, the client cannot be used!"
)}</p>
<p> ${$t.t("Please refresh this page after cookies are enabled")} </p>
`,
persistent: true,
ok: false,
cancel: false,
});
}
// 设置产品
if (
!(
(<any>window).media_control_client_product ==
EProductNames.LED_PLAYER ||
(<any>window).media_control_client_product ==
EProductNames.SPECIAL_VIDEO ||
(<any>window).media_control_client_product ==
EProductNames.OLD_LED_PLAYER
)
) {
console.error("can't get product, use default led_player");
(<any>window).media_control_client_product = EProductNames.LED_PLAYER;
}
console.log((<any>window).media_control_client_product);
$store.commit("setProductName", (<any>window).media_control_client_product);
// 设置标题
if (
(<any>window).media_control_client_product == EProductNames.LED_PLAYER ||
(<any>window).media_control_client_product == EProductNames.OLD_LED_PLAYER
) {
const custom_title = (<any>window).media_control_client_custom_title;
if (custom_title && typeof custom_title == "string") {
document.title = custom_title;
} else {
document.title = $t.t("LedPlayer") + "WebApp";
}
} else if (
(<any>window).media_control_client_product == EProductNames.SPECIAL_VIDEO
) {
document.title = $t.t("SuperVPlayer") + "WebApp";
}
// 设置 AXIOS 默认请求头
{
api.defaults.headers.common["X-Product-Name"] = (<any>(
window
)).media_control_client_product;
}
// 导入对应的quasar 语言包
try {
{
import("quasar/lang/" + $t.locale.value).then((lang) => {
$q.lang.set(lang.default);
});
}
} catch (e) {
console.log(e);
}
try {
const user_search = (<any>window).user_search || {};
if (typeof user_search == "object") {
$store.commit(
"setAvancedDebug",
typeof user_search["debug"] != "undefined"
);
$store.commit(
"setFactoryMode",
typeof user_search["factory"] != "undefined"
);
}
} catch (e) {
console.log(e);
}
EventBus.getInstance().on(EventNamesDefine.CheckDebug, () => {
const to_normal_url = () => {
const p1 = window.location.href.indexOf("?debug");
const p2 = window.location.href.indexOf("#");
const p3 = window.location.href.substring(0, p1);
const p4 = window.location.href.substring(p2);
window.location.href = p3 + p4;
};
if ($store.state.advanced_debug) {
const pwd = Math.floor(Math.random() * (999999 - 100000 + 1) + 100000);
$q.dialog({
title: "PWD?",
message: pwd + "?",
prompt: {
model: "",
type: "text", // optional
},
persistent: true,
cancel: true,
})
.onOk((data: string) => {
try {
const v = parseInt(data.replace(/-/g, "").trim());
if (pwd * pwd * pwd * new Date().getUTCHours() == v) {
return;
}
} catch (e) {
console.log(e);
}
to_normal_url();
})
.onCancel(() => {
to_normal_url();
});
}
});
window.onresize = (evt: any) =>
EventBus.getInstance().emit(EventNamesDefine.WindowResize, evt);
window.onmousedown = (evt: MouseEvent) => {
EventBus.getInstance().emit(EventNamesDefine.WindowMouseDown, evt);
};
window.onmousemove = (evt: any) => {
EventBus.getInstance().emit(EventNamesDefine.WindowMouseMove, evt);
};
window.onmouseup = (evt: any) => {
EventBus.getInstance().emit(EventNamesDefine.WindowMouseUp, evt);
};
window.onmouseout = (evt: any) => {
EventBus.getInstance().emit(EventNamesDefine.WindowMouseOut, evt);
};
window.document.body.onclick = (evt: any) => {
if ((<any>window).touchPriority) {
return;
}
EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
};
if ("ontouchstart" in document.documentElement === true) {
window.document.body.ontouchstart = (evt: any) => {
if ((<any>window).touchPriority) {
EventBus.getInstance().emit(EventNamesDefine.DocumentBodyClick, evt);
}
};
}
document.body.classList.add("overflow-hidden");
(window as any).controlLogout = () => {
Cookies.remove("auto_login");
GlobalData.getInstance().getCurrentClient()?.destory();
GlobalData.getInstance().clearClients();
SessionStorage.clear();
try {
$q.fullscreen.exit();
} catch {}
window.location.reload();
};
(window as any).setPcTheme = () => {
setCssVar("primary", "#4aa1ce");
setCssVar("secondary", "#26a69a");
setCssVar("accent", "#9c27b0");
setCssVar("dark", "#1d1d1d");
setCssVar("positive", "#21ba45");
setCssVar("negative", "#c10015");
setCssVar("info", "#31ccec");
setCssVar("warning", "#f2c037");
setCssVar("dark-page", "#121212");
};
(window as any).setPadTheme = () => {
setCssVar("primary", "#0b3536");
setCssVar("secondary", "#ffffff");
setCssVar("accent", "#2fa39b");
setCssVar("dark", "#000000");
setCssVar("positive", "#21ba45");
setCssVar("negative", "#c10015");
setCssVar("info", "#31ccec");
setCssVar("warning", "#f2c037");
setCssVar("dark-page", "#121212");
};
const landspace = () => {
let landspace = false;
landspace = window.innerWidth > innerHeight;
if ($q.platform.is.ipad) {
landspace = window.screen.width > window.screen.height;
if (Math.abs(window.orientation) == 90) {
landspace = !landspace;
}
{
const user_search = (<any>window).user_search || {};
if (typeof user_search == "object") {
landspace = typeof user_search["___debug_ipad___"] != "undefined";
}
}
}
if (window.innerHeight < 600) {
// TODO fix android
}
return landspace;
};
(<any>window).landspace = landspace;
window.onorientationchange = () => {
$store.commit("updateLandspace", landspace());
};
$store.commit("updateLandspace", landspace());
if (
$q.platform.is.ios ||
$q.platform.is.ipad ||
$q.platform.is.safari ||
$q.platform.is.iphone
) {
// 阻止双击放大
var lastTouchEnd = 0;
document.addEventListener("touchstart", function (event: any) {
if (event.touches.length > 1) {
event.preventDefault();
}
});
document.addEventListener(
"touchend",
function (event) {
var now = new Date().getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
},
false
);
// 阻止双指放大
document.addEventListener("gesturestart", function (event) {
event.preventDefault();
});
}
EventBus.getInstance().on(
EventNamesDefine.CurrentConnectConnected,
async (connection: ClientConnection) => {
const show_version_tip = () =>
$q.dialog({
persistent: true,
title: $t.t("Version Mismatch !"),
message: $t.t(
"Version Mismatch ! Please Upgrade The Software Again ! Otherwise, The File Function Cannot Be Used !"
),
});
if (connection) {
let count = 0;
while (
connection &&
!connection.is_login &&
count < (1000 * 10) / 100 /* 10 S */
) {
await Common.waitFor(100);
}
if (count < (1000 * 10) / 100) {
try {
const response = await connection.getHttpInterfaceVersion();
if (!response || response.version != 2) {
show_version_tip();
}
} catch (e) {
show_version_tip();
}
}
}
}
);
return {};
},
});
</script>