basic iframe for notifications

2025-01-07 08:23:11 +01:00 · 2025-01-07 08:23:11 +01:00 · a98a80001c
commit a98a80001c
parent ad1e73d0cc
3 changed files with 114 additions and 0 deletions
--- a/src/csui/iframes/notification/Notification.vue
+++ b/src/csui/iframes/notification/Notification.vue
@ -0,0 +1,91 @@
+<template>
+  <div class="flex flex-col">
+    <div>Ultrawidify</div>
+    <div class="flex flex-row">
+      <div v-if="notification.icon">
+        <mdicon :name="notification.icon"></mdicon>
+      </div>
+      <div class="flex flex-grow flex-col">
+        <div v-if="notification.title">{{notification.title}}</div>
+        <div v-if="notification.description">{{notification.description}}</div>
+      </div>
+    </div>
+    <div v-if="notification.actions" class="flex flex-row flex-end">
+      <button
+        v-for="(action, index) of notification.actions"
+        :key="index"
+      >
+        {{ action.label }}
+      </button>
+    </div>
+    <div>Notification countdown</div>
+  </div>
+</template>
+
+<script>
+import Logger from '../../../ext/lib/Logger';
+
+export default {
+  components: {
+  },
+  mixins: [
+  ],
+  data() {
+    return {
+      notification: {}
+    };
+  },
+  computed: {
+
+  },
+  watch: {
+  },
+  async created() {
+    this.logger = new Logger();
+
+    window.addEventListener('message', this.handleMessage);
+    this.sendToParentLowLevel('init-complete', {});
+  },
+  destroyed() {
+    window.removeEventListener('message', this.handleMessage);
+  },
+  methods: {
+    /**
+     * Mostly intended to process messages received via window.addEventListener('message').
+     * This method should include minimal logic — instead, it should only route messages
+     * to the correct function down the line.
+     */
+    handleMessage(event) {
+      switch (event.data.action) {
+        case 'notification-data':
+          this.notification = event.data.payload;
+      }
+    },
+
+    /**
+     * Sends message to parent _without_ using event bus.
+     */
+    sendToParentLowLevel(action, payload, lowLevelExtras = {}) {
+      window.parent.postMessage(
+        {
+          action, payload, ...lowLevelExtras
+        },
+        '*'
+      );
+    },
+  }
+}
+</script>
+<style lang="scss">
+.ard-blocked {
+  color: rgb(219, 125, 48) !important;
+  background-color: rgba(0,0,0,0.85) !important;
+}
+</style>
+
+<style lang="scss" src="../../src/res-common/panels.scss" scoped module></style>
+<style lang="scss" src="../../src/res-common/common.scss" scoped module></style>
+
+<style lang="scss" scoped>
+
+</style>
--- a/src/csui/iframes/notification/csui-notification.html
+++ b/src/csui/iframes/notification/csui-notification.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en" style="position: relative">
+<head>
+  <meta charset="UTF-8">
+  <title>Ultrawidify - Content Script User Interface (in-player overlay)</title>
+  <!-- <link rel="stylesheet" href="csui.css"> -->
+</head>
+<body class="uw-ultrawidify-container-root" style="background-color: transparent;">
+  <div id="app"></div>
+  <script src="csui-notification.js"></script>
+</body>
+</html>
--- a/src/csui/iframes/notification/csui-notification.js
+++ b/src/csui/iframes/notification/csui-notification.js
@ -0,0 +1,11 @@
+import { createApp } from 'vue';
+import Notification from './Notification';
+import mdiVue from 'mdi-vue/v3';
+import * as mdijs from '@mdi/js';
+
+// NOTE — this is in-player interface for ultrawidify
+// it is injected into the page in UI.init()
+
+createApp(Notification)
+  .use(mdiVue, {icons: mdijs})
+  .mount('#app');