Обновлен tailwind, продолжаю работы над Telegram Mini App

package.json

@@ -24,13 +24,14 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
     "husky": "^9.1.7",
     "lint-staged": "^15.4.1",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "vite": "^6.0.11",
     "vite-plugin-mkcert": "^1.17.6",
     "vite-plugin-pwa": "^0.21.1"

src/components/Tma.vue

@@ -0,0 +1,52 @@
+<template>
+  <ul
+    class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 mx-auto"
+    v-on="{ click: capture }"
+  >
+    <li class="relative" v-for="video in videos" v-bind:key="video.title">
+      <VideoWallItem ref="videoWallItem" :video="video" />
+    </li>
+  </ul>
+</template>
+<script>
+import VideoWallItem from "./VideoWallItem.vue";
+import videos from "../videos";
+
+export default {
+  components: {
+    VideoWallItem,
+  },
+  data() {
+    return {
+      videos,
+    };
+  },
+  mounted() {
+    window.Telegram.WebApp.ready();
+    window.Telegram.WebApp.MainButton.setParams({ text: "Поделиться" });
+    window.Telegram.WebApp.MainButton.show(); //show telegram btn
+    window.Telegram.WebApp.MainButton.onClick(this.capture);
+  },
+  methods: {
+    async capture() {
+      // window.Telegram.WebApp.MainButton.onClick(buttonOn) //set func on main button click
+      // window.Telegram.WebApp.MainButton.setParams({ 'text': 'АААА' });
+      // window.Telegram.WebApp.MainButton.show() //show telegram btn
+
+      // console.log(window.Telegram.WebApp.WebAppInitData);
+      window.Telegram.WebApp.HapticFeedback.notificationOccurred("success");
+
+      window.Telegram.WebApp.shareToStory(
+        "https://snowcam.vantonkz.keenetic.pro/android-chrome-512x512.png",
+        {
+          text: "aaaa",
+          widget_link: "https://snowcam.vantonkz.keenetic.pro",
+        },
+      );
+      // if (await this.navShare(dataURI) === false) {
+
+      // }
+    },
+  },
+};
+</script>

src/components/VideoWall.vue

@@ -10,43 +10,19 @@
 </template>
 <script>
 import VideoWallItem from "./VideoWallItem.vue";
+import videos from "../videos";
 
 export default {
   components: {
     VideoWallItem,
   },
   data() {
     return {
-      videos: [
-        {
-          title: "Ледник Богдановича",
-          description: "Верхняя станция",
-          src: "https://ipcam.kz/cam6/index.m3u8",
-          poster: "/previews/3212b47c65ccc0cb9759f5c08632c563.jpg",
-        },
-        {
-          title: "Средняя станция",
-          description: "Средняя станция",
-          src: "https://ipcam.kz/cam5/index.m3u8",
-          poster: "/previews/ffa10e45b1d87ab0aa8796bc7969046c.jpg",
-        },
-        {
-          title: "Бугель",
-          description: "Базовая станция",
-          src: "https://ipcam.kz/cam2/index.m3u8",
-          poster: "/previews/d5361ff25a96271df9ac614d9138806a.jpg",
-        },
-        {
-          title: "Подъемник",
-          description: "Базовая станция",
-          src: "https://ipcam.kz/cam1/index.m3u8",
-          poster: "/previews/197f1dde9a2c929cca5496f225cc2d62.jpg",
-        },
-      ],
+      videos,
     };
   },
   methods: {
-    capture() {
+    async capture() {
       const canvas = document.createElement("canvas");
       const context = canvas.getContext("2d");
       canvas.width = 2560;
@@ -81,19 +57,43 @@ export default {
         720,
       );
 
-      const dataURI = canvas.toDataURL("image/png");
+      const dataURI = canvas.toDataURL("image/jpeg");
 
-      let yourDate = new Date();
+      if ((await this.navShare(dataURI)) === false) {
+        this.saveFile(dataURI);
+      }
+    },
+    async navShare(dataURI) {
+      if (!navigator.canShare) {
+        console.error("navigator.share is not available");
+        return false;
+      }
+
+      const blob = await (await fetch(dataURI)).blob();
+      const file = new File(
+        [blob],
+        "snowcam.vaninanton.ru-" + new Date().toISOString() + ".jpg",
+        { type: blob.type },
+      );
+      if (!navigator.canShare({ files: [file] })) {
+        console.error("navigator.share couldnt share files");
+        return false;
+      }
+      navigator.share({ files: [file] });
 
+      return true;
+    },
+    saveFile(dataURI) {
+      console.log("saveFile");
       const link = document.createElement("a");
       link.style.display = "none";
       link.setAttribute(
         "download",
-        "snowcam.vaninanton.ru-" + yourDate.toISOString() + ".png",
+        "snowcam.vaninanton.ru-" + new Date().toISOString() + ".jpg",
       );
       link.setAttribute(
         "href",
-        dataURI.replace("image/png", "image/octet-stream"),
+        dataURI.replace("image/jpeg", "image/octet-stream"),
       );
       document.body.appendChild(link);
       link.click();

src/components/VideosList.vue

@@ -1,34 +1,8 @@
 <script setup>
 import { defineAsyncComponent } from "vue";
+import videos from "../videos";
 
 const VideoItem = defineAsyncComponent(() => import("./VideoItem.vue"));
-
-const videos = [
-  {
-    title: "3200",
-    description: "Верхняя станция Комби-2",
-    src: "https://ipcam.kz/cam6/index.m3u8",
-    poster: "/previews/3212b47c65ccc0cb9759f5c08632c563.jpg",
-  },
-  {
-    title: "2800",
-    description: "2800 Комби-2",
-    src: "https://ipcam.kz/cam5/index.m3u8",
-    poster: "/previews/ffa10e45b1d87ab0aa8796bc7969046c.jpg",
-  },
-  {
-    title: "Подъемник",
-    description: "Базовая станция",
-    src: "https://ipcam.kz/cam1/index.m3u8",
-    poster: "/previews/197f1dde9a2c929cca5496f225cc2d62.jpg",
-  },
-  {
-    title: "Бугель",
-    description: "Базовая станция",
-    src: "https://ipcam.kz/cam2/index.m3u8",
-    poster: "/previews/d5361ff25a96271df9ac614d9138806a.jpg",
-  },
-];
 </script>
 <template>
   <ul

src/style.css

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

src/tma.js

@@ -0,0 +1,8 @@
+import { createApp } from "vue";
+import "./style.css";
+import Tma from "./components/Tma.vue";
+import httpPlugin from "./http";
+
+const app = createApp(Tma);
+app.use(httpPlugin);
+app.mount("#app");

src/videos.js

@@ -0,0 +1,26 @@
+export default [
+  {
+    title: "Ледник Богдановича",
+    description: "Верхняя станция",
+    src: "https://ipcam.kz/cam6/index.m3u8",
+    poster: "/previews/3212b47c65ccc0cb9759f5c08632c563.jpg",
+  },
+  {
+    title: "Средняя станция",
+    description: "Средняя станция",
+    src: "https://ipcam.kz/cam5/index.m3u8",
+    poster: "/previews/ffa10e45b1d87ab0aa8796bc7969046c.jpg",
+  },
+  {
+    title: "Подъемник",
+    description: "Базовая станция",
+    src: "https://ipcam.kz/cam1/index.m3u8",
+    poster: "/previews/197f1dde9a2c929cca5496f225cc2d62.jpg",
+  },
+  {
+    title: "Бугель",
+    description: "Базовая станция",
+    src: "https://ipcam.kz/cam2/index.m3u8",
+    poster: "/previews/d5361ff25a96271df9ac614d9138806a.jpg",
+  },
+];

src/videowall.js

@@ -6,7 +6,6 @@ import httpPlugin from "./http";
 import Icon from "./splashscreen.png";
 
 const app = createApp(App);
-app.config.globalProperties.$isLoading = false;
 app.use(httpPlugin);
 app.mount("#app");
 

tma.html

@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="theme-color" content="#0f172a" />
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a">
+    <meta name="apple-mobile-web-app-title" content="SnowCam">
+    <meta name="application-name" content="SnowCam">
+    <meta name="msapplication-TileColor" content="#0f172a">
+    <meta name="theme-color" content="#0f172a">
+
+    <title>SnowCam</title>
+    <link
+      href="/src/style.css"
+      rel="preload"
+      as="style"
+      onload="this.rel='stylesheet'"
+    />
+    <noscript><link rel="stylesheet" href="/src/style.css" /></noscript>
+    <script src="https://telegram.org/js/telegram-web-app.js?56"></script>
+  </head>
+
+  <body
+  class="antialiased text-slate-400 bg-slate-900"
+  >
+    <div id="app"></div>
+    <script type="module" src="src/tma.js"></script>
+    <!-- Yandex.Metrika counter -->
+    <script type="text/javascript" >
+      (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+      m[i].l=1*new Date();
+      for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+      k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+      (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+      ym(95899849, "init", {
+          clickmap:true,
+          trackLinks:true,
+          accurateTrackBounce:true,
+          webvisor:true
+      });
+    </script>
+    <noscript><div><img src="https://mc.yandex.ru/watch/95899849" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
+    <!-- /Yandex.Metrika counter -->
+  </body>
+</html>

vite.config.js

@@ -2,17 +2,18 @@ import { resolve } from "path";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import mkcert from "vite-plugin-mkcert";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: { https: true },
-  plugins: [vue(), mkcert()],
+  plugins: [tailwindcss(), vue(), mkcert()],
   build: {
-    chunkSizeWarningLimit: 1600,
     rollupOptions: {
       input: {
         app: resolve(__dirname, "index.html"),
         appVideoWall: resolve(__dirname, "videowall.html"),
+        appTma: resolve(__dirname, "tma.html"),
       },
       output: {
         manualChunks(id) {