Skip to content

Commit 0b993b1

Browse files
soloviovmax-kesoloviovmax-ke
committed
Feature/DOcument PiP
1 parent 7b67074 commit 0b993b1

File tree

18 files changed

+395
-303
lines changed

18 files changed

+395
-303
lines changed

‎index.html‎

Lines changed: 1 addition & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -4,117 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Cyborg Test UI</title>
7-
<style>
8-
body {
9-
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10-
background-color: #f9f9f9;
11-
margin: 0;
12-
padding: 0;
13-
color: #333;
14-
}
15-
#container {
16-
max-width: 280px;
17-
margin: 10px auto;
18-
background-color: white;
19-
border-radius: 8px;
20-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
21-
padding: 15px;
22-
}
23-
h3, h4 {
24-
margin: 0;
25-
padding: 0;
26-
}
27-
h3 {
28-
color: #2c3e50;
29-
margin-bottom: 15px;
30-
font-size: 16px;
31-
word-wrap: break-word;
32-
}
33-
h4 {
34-
color: #7f8c8d;
35-
margin-bottom: 5px;
36-
font-size: 14px;
37-
}
38-
ol {
39-
padding-left: 20px;
40-
margin-top: 5px;
41-
}
42-
li {
43-
margin-bottom: 8px;
44-
font-size: 14px;
45-
line-height: 1.4;
46-
}
47-
button {
48-
display: inline-block;
49-
width: 100%;
50-
padding: 10px;
51-
margin: 5px 0;
52-
border: none;
53-
border-radius: 4px;
54-
cursor: pointer;
55-
font-weight: 600;
56-
transition: background-color 0.2s;
57-
}
58-
.btn-success {
59-
background-color: #2ecc71;
60-
color: white;
61-
}
62-
.btn-success:hover {
63-
background-color: #27ae60;
64-
}
65-
.btn-danger {
66-
background-color: #e74c3c;
67-
color: white;
68-
}
69-
.btn-danger:hover {
70-
background-color: #c0392b;
71-
}
72-
input {
73-
width: 100%;
74-
padding: 10px;
75-
margin: 5px 0;
76-
border: 1px solid #ddd;
77-
border-radius: 4px;
78-
box-sizing: border-box;
79-
}
80-
input:focus {
81-
outline: none;
82-
border-color: #3498db;
83-
}
84-
.divider {
85-
height: 1px;
86-
background-color: #eee;
87-
margin: 15px 0;
88-
}
89-
.step-pass {
90-
color: #2ecc71;
91-
}
92-
.step-fail {
93-
color: #e74c3c;
94-
}
95-
.footer {
96-
margin-top: 15px;
97-
text-align: center;
98-
display: flex;
99-
justify-content: center;
100-
flex-wrap: wrap;
101-
}
102-
.footer a {
103-
color: #7f8c8d;
104-
margin: 0 10px;
105-
text-decoration: none;
106-
font-size: 12px;
107-
}
108-
.footer a:hover {
109-
color: #3498db;
110-
}
111-
.header {
112-
display: flex;
113-
justify-content: center;
114-
align-items: center;
115-
padding: 15px 10px;
116-
}
117-
</style>
7+
<link rel="stylesheet" href="/src/ui/styles/general.css">
1188
</head>
1199
<body>
12010
<div id="root"></div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@cyborgtests/test",
3-
"version": "0.0.4",
3+
"version": "0.0.5",
44
"description": "Powerfull extension for Playwright, that allows you to include manual verification steps in your automated test flow",
55
"main": "dist/index.umd.js",
66
"module": "dist/index.es.js",

‎src/types/custom.d.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
declare module '*.svg' {
2+
const content: string;
3+
export default content;
4+
}

‎src/ui/components/App.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { Fragment, useEffect } from 'react';
2+
import Footer from './Footer';
3+
import Header from './Header';
4+
import TestControlPanel from './TestControlPanel';
5+
import OpenDocumentPIP from './OpenDocumentPIP';
6+
import { TestStoreProvider } from '../store/TestStore';
7+
8+
// Add TypeScript interface for Document PiP
9+
declare global {
10+
interface Window {
11+
documentPictureInPicture: {
12+
requestWindow(options: { width: string; height: string }): Promise<Window>;
13+
};
14+
}
15+
}
16+
17+
export default function App() {
18+
return (
19+
<TestStoreProvider>
20+
<Header />
21+
<TestControlPanel />
22+
<Footer />
23+
<OpenDocumentPIP />
24+
</TestStoreProvider>
25+
);
26+
}

‎src/ui/components/Content.tsx‎

Lines changed: 0 additions & 95 deletions
This file was deleted.

‎src/ui/components/Footer.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { trackEvent } from '../../utils/analytics';
3+
4+
export default function Footer() {
5+
const trackButtonClick = (buttonName: string) => {
6+
trackEvent(`app_${buttonName}_click`);
7+
};
8+
9+
return (
10+
<footer className="footer">
11+
<a
12+
href="https://github.com/CyborgTests/cyborg-test"
13+
target="_blank"
14+
rel="noopener noreferrer nofollow"
15+
onClick={() => trackButtonClick('github')}
16+
>
17+
Github
18+
</a>
19+
<a
20+
href="https://cyborgtests.com"
21+
target="_blank"
22+
rel="noopener noreferrer nofollow"
23+
onClick={() => trackButtonClick('discord')}
24+
>
25+
Discord
26+
</a>
27+
</footer>
28+
);
29+
}

‎src/ui/components/Header.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export default function Header() {
4+
return (
5+
<header className='header'>
6+
<img src="./logo.svg" alt="Cyborg Logo" />
7+
</header>
8+
);
9+
}

‎src/ui/components/OpenDocumentPIP.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react';
2+
import ReactDOM from "react-dom/client";
3+
import TestControlPanel from './TestControlPanel';
4+
import pipIcon from '../icons/pip.svg';
5+
import { TestStoreProvider } from '../store/TestStore';
6+
import styles from '../styles/TestControlPanel.css?raw';
7+
8+
export default function OpenDocumentPIP() {
9+
const openWindow = async () => {
10+
try {
11+
const dpip = await window.documentPictureInPicture.requestWindow({
12+
width: "320",
13+
height: "400",
14+
});
15+
16+
// Add styles
17+
const style = dpip.document.createElement('style');
18+
style.textContent = styles;
19+
dpip.document.head.appendChild(style);
20+
21+
const pipDiv = dpip.document.createElement("div");
22+
pipDiv.setAttribute("id", "pip-root");
23+
dpip.document.body.append(pipDiv);
24+
const pipRootElement = dpip.document.getElementById("pip-root");
25+
if (!pipRootElement) {
26+
throw new Error("Failed to create PiP root element");
27+
}
28+
const pipRoot = ReactDOM.createRoot(pipRootElement);
29+
pipRoot.render(
30+
<TestStoreProvider>
31+
<TestControlPanel />
32+
</TestStoreProvider>
33+
);
34+
} catch (error) {
35+
if (error) {
36+
console.log(error);
37+
}
38+
}
39+
};
40+
41+
return (
42+
<button
43+
className="openDocumentPIP"
44+
onClick={openWindow}
45+
title="Open Document PiP"
46+
>
47+
<img src={pipIcon} alt="Document PiP" />
48+
</button>
49+
);
50+
}

0 commit comments

Comments
 (0)