backend/e2e/reports/screenshots.js (view raw)
1var pug = require('pug');
2var fs = require('fs');
3// compile
4var fn = pug.compile(
5 `
6doctype html
7html(lang="en")
8 head
9 title= pageTitle
10 style
11 | body { background: #313131; color: white; }
12 | .container { max-width: 90rem; margin: 0 auto; }
13 | .go_back {display: block; font-size: 16px; color: white; margin: 32px 8px 16px 16px; text-decoration: none;}
14 | .go_back:hover {opacity: 0.6;}
15 | ul {list-style: none; padding: 0; display: flex;flex-wrap: wrap;}
16 | .image__item {text-align: center; font-family: Courier; font-size: 12px; margin-bottom: 32px;color: white;}
17 | .image__item--sm {flex: 1;min-width: 25%}
18 | .image__item--md {flex: 1; min-width: 25%}
19 | .image__item--lg {flex: 3; min-width: 100%;}
20 | .image__item video {display: block; width: 100%; max-height:80vh;}
21 | .image__item a {text-decoration: none; color: white;}
22 | .image__item a:hover {text-decoration: none; color: white;background: black;}
23 | .image__item img {max-width: 95%;max-height:80vh; display: block; margin: 0 auto;}
24 | .image__item strong {font-size: 14px;line-height: 1.8;diplay: block; padding: 14px 8px;}
25 body
26 div(class='container')
27 a(href='/', class='go_back') Go Back
28 h1 Screenshots
29 em= pageTitle
30 each image in images
31 h2= image.title
32 ul
33 each file in image.files
34 li(class="image__item image__item--" + file.modifier)
35 if(file.type == 'png')
36 a(href=file.path, target="_blank")
37 img(src=file.path)
38 else
39 video(controls="controls")
40 source(src=file.path, type="video/mp4")
41 object(data=file.path)
42 a(href=file.path, target="_blank")
43 strong= file.title
44`,
45 {}
46);
47var now = new Date();
48var _f = function (num) {
49 num = parseInt(num, 10);
50 if (num < 10) {
51 return `0${num}`;
52 }
53 return `${num}`;
54};
55function getExtension(filename) {
56 var ext = filename.split('.');
57 return ext[ext.length - 1];
58}
59
60var walkVideo = function (dir) {
61 var results = [];
62 dir = dir.replace('screenshots', 'videos');
63 var list = fs.readdirSync(dir);
64 console.log('videos', {list});
65 list.forEach(function (file) {
66 var fileItem = {
67 path: (dir + '/' + file).replace('./reports', ''),
68 title: file,
69 type: 'mp4',
70 modifier: 'lg',
71 files: [],
72 };
73 results.push(fileItem);
74 });
75 return results;
76};
77
78var walk = function (dir) {
79 var results = [];
80 var list = fs.readdirSync(dir);
81 list.forEach(function (file) {
82 var fileItem = {
83 path: (dir + '/' + file).replace('./reports', ''),
84 title: file,
85 type: 'png',
86 modifier: file.indexOf('--') > -1 ? 'sm' : 'md',
87 files: [],
88 };
89 var filePath = dir + '/' + file;
90 var stat = fs.statSync(filePath);
91 if (stat && stat.isFile() && getExtension(file) !== 'png') {
92 return results;
93 }
94 if (stat && stat.isDirectory()) {
95 fileItem.type = 'dir';
96 /* Recurse into a subdirectory */
97 fileItem.files = fileItem.files.concat(
98 walk(filePath).concat(walkVideo(filePath))
99 );
100 }
101 /* Is a file */
102 results.push(fileItem);
103 });
104 return results;
105};
106const images = walk('./reports/screenshots');
107var html = fn({
108 pageTitle: `Captures of ${_f(now.getDay())}/${_f(
109 now.getMonth()
110 )}/${now.getFullYear()} @ ${_f(now.getHours())}:${_f(now.getMinutes())}`,
111 images,
112});
113
114fs.writeFileSync('./reports/screenshots/index.html', html);
115console.log(images);