plxdcma_rendericon_videocards 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css.css +140 -0
- package/init.js +34 -0
- package/js.js +122 -0
- package/package.json +7 -0
package/css.css
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
|
|
2
|
+
.video-card {
|
|
3
|
+
background: var(--white);
|
|
4
|
+
border-radius: 12px;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
|
7
|
+
transition: transform 0.3s ease;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.video-card:hover {
|
|
11
|
+
transform: translateY(-5px);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.video-thumbnail {
|
|
15
|
+
position: relative;
|
|
16
|
+
height: 200px;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
cursor: pointer;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.video-thumbnail img {
|
|
22
|
+
width: 100%;
|
|
23
|
+
height: 100%;
|
|
24
|
+
object-fit: cover;
|
|
25
|
+
transition: transform 0.3s ease;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.video-thumbnail:hover img {
|
|
29
|
+
transform: scale(1.1);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.play-button {
|
|
33
|
+
position: absolute;
|
|
34
|
+
top: 50%;
|
|
35
|
+
left: 50%;
|
|
36
|
+
transform: translate(-50%, -50%);
|
|
37
|
+
background: rgba(220, 38, 38, 0.9);
|
|
38
|
+
color: var(--white);
|
|
39
|
+
width: 60px;
|
|
40
|
+
height: 60px;
|
|
41
|
+
border-radius: 50%;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
font-size: 1.5rem;
|
|
46
|
+
transition: all 0.3s ease;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.play-button:hover {
|
|
50
|
+
background: var(--primary-color);
|
|
51
|
+
transform: translate(-50%, -50%) scale(1.1);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.video-duration {
|
|
55
|
+
position: absolute;
|
|
56
|
+
bottom: 1rem;
|
|
57
|
+
right: 1rem;
|
|
58
|
+
background: rgba(0, 0, 0, 0.8);
|
|
59
|
+
color: var(--white);
|
|
60
|
+
padding: 0.25rem 0.5rem;
|
|
61
|
+
border-radius: 4px;
|
|
62
|
+
font-size: 0.875rem;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.video-info {
|
|
66
|
+
padding: 1.5rem;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.video-info h3 {
|
|
70
|
+
font-size: 1.25rem;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
color: var(--text-dark);
|
|
73
|
+
margin-bottom: 0.5rem;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.video-info p {
|
|
77
|
+
color: var(--text-light);
|
|
78
|
+
margin-bottom: 1rem;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.video-stats {
|
|
82
|
+
display: flex;
|
|
83
|
+
gap: 1rem;
|
|
84
|
+
color: var(--text-light);
|
|
85
|
+
font-size: 0.875rem;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.video-category {
|
|
89
|
+
position: absolute;
|
|
90
|
+
top: 1rem;
|
|
91
|
+
left: 1rem;
|
|
92
|
+
background: var(--primary-color);
|
|
93
|
+
color: var(--white);
|
|
94
|
+
padding: 0.25rem 0.75rem;
|
|
95
|
+
border-radius: 15px;
|
|
96
|
+
font-size: 0.75rem;
|
|
97
|
+
font-weight: 600;
|
|
98
|
+
text-transform: uppercase;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.video-category.live {
|
|
102
|
+
background: #ef4444;
|
|
103
|
+
animation: pulse 2s infinite;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
@keyframes pulse {
|
|
107
|
+
0%,
|
|
108
|
+
100% {
|
|
109
|
+
opacity: 1;
|
|
110
|
+
}
|
|
111
|
+
50% {
|
|
112
|
+
opacity: 0.7;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.video-filters {
|
|
117
|
+
display: flex;
|
|
118
|
+
gap: 1rem;
|
|
119
|
+
margin-bottom: 3rem;
|
|
120
|
+
flex-wrap: wrap;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.video-filter-btn {
|
|
125
|
+
padding: 0.75rem 1.5rem;
|
|
126
|
+
border: 2px solid var(--gray-200);
|
|
127
|
+
background: var(--white);
|
|
128
|
+
color: var(--text-dark);
|
|
129
|
+
border-radius: 25px;
|
|
130
|
+
cursor: pointer;
|
|
131
|
+
transition: all 0.3s ease;
|
|
132
|
+
font-weight: 500;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.video-filter-btn:hover,
|
|
136
|
+
.video-filter-btn.active {
|
|
137
|
+
background: var(--primary-color);
|
|
138
|
+
color: var(--white);
|
|
139
|
+
border-color: var(--primary-color);
|
|
140
|
+
}
|
package/init.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
var plxdcma_standarinit=require(`plxdcma_standarinit`)
|
|
2
|
+
var fs=require(`fs`)
|
|
3
|
+
var path=require(`path`)
|
|
4
|
+
var myux=require(`plxdcma_myux`)
|
|
5
|
+
var plxdcma_iconrendererprotocol=require(`plxdcma_iconrendererprotocol`)
|
|
6
|
+
module.exports.use=function(req){
|
|
7
|
+
if(req.__myAppInternals.videocard == null){
|
|
8
|
+
myux.use(req)
|
|
9
|
+
plxdcma_iconrendererprotocol.use(req)
|
|
10
|
+
req.__myAppInternals.videocard=true
|
|
11
|
+
if(req.__myAppInternals.paths == null){
|
|
12
|
+
req.__myAppInternals.paths=[]
|
|
13
|
+
}
|
|
14
|
+
req.__myAppInternals.paths.push(`<script src="/myux/icons/vc_Icon.js"></script>`)
|
|
15
|
+
req.__myAppInternals.paths.push(`<link rel="stylesheet" href="/myux/icons/vc_Icon.css">`)
|
|
16
|
+
if(req.__myAppInternals.modals == null){
|
|
17
|
+
req.__myAppInternals.modals=[]
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
plxdcma_standarinit.use(function(app){
|
|
22
|
+
app.get(`/myux/icons/vc_Icon.js`,function(req,res){
|
|
23
|
+
fs.readFile(path.join(__dirname,"js.js"),"utf8",function(err,html){
|
|
24
|
+
res.write(html)
|
|
25
|
+
res.end()
|
|
26
|
+
})
|
|
27
|
+
})
|
|
28
|
+
app.get(`/myux/icons/vc_Icon.css`,function(req,res){
|
|
29
|
+
fs.readFile(path.join(__dirname,"css.css"),"utf8",function(err,html){
|
|
30
|
+
res.write(html)
|
|
31
|
+
res.end()
|
|
32
|
+
})
|
|
33
|
+
})
|
|
34
|
+
})
|
package/js.js
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
function videoCardAssignData(strct,target){
|
|
4
|
+
var resourceselected=strct.data
|
|
5
|
+
var tags=strct.tags
|
|
6
|
+
|
|
7
|
+
var original=target.originalIcon
|
|
8
|
+
if(original == null){
|
|
9
|
+
original={}
|
|
10
|
+
target.originalIcon=original
|
|
11
|
+
}
|
|
12
|
+
var t = strct.tags ?? strct.icon;
|
|
13
|
+
for(var each in t){
|
|
14
|
+
original[each]=t[each]
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
target.style.padding=0
|
|
18
|
+
var ifrm=target.getElementsByClassName(`daiframe`)
|
|
19
|
+
if(ifrm != null && ifrm.length > 0 ){
|
|
20
|
+
console.log(`da url selected ${resourceselected.url}`)
|
|
21
|
+
ifrm[0].src=resourceselected.httplink ?? resourceselected.url
|
|
22
|
+
}
|
|
23
|
+
var daed2=target.getElementsByClassName(`daed2`)
|
|
24
|
+
console.log(`daed2`)
|
|
25
|
+
console.log(daed2)
|
|
26
|
+
if(daed2.length > 0){
|
|
27
|
+
daed2[0].style.opacity=1
|
|
28
|
+
//target.tags=tags
|
|
29
|
+
console.log(`videoCardAssignData`)
|
|
30
|
+
console.log(resourceselected)
|
|
31
|
+
var datitle=target.getElementsByClassName(`datitle`)[0]
|
|
32
|
+
var daviews=target.getElementsByClassName(`daviews`)[0]
|
|
33
|
+
var dalikes=target.getElementsByClassName(`dalikes`)[0]
|
|
34
|
+
var dafecha=target.getElementsByClassName(`dafecha`)[0]
|
|
35
|
+
datitle.innerHTML=resourceselected.titulo
|
|
36
|
+
daviews.innerHTML=`<i class='fa fa-eye'></i> ${resourceselected.views ?? 0} vistas`
|
|
37
|
+
dalikes.innerHTML=`<i class='fa fa-thumbs-up'></i> ${resourceselected.likes ?? 0} me gusta`
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
function videocardicon(data,isediting,section){
|
|
43
|
+
console.log(`videocardicon-videocardicon-videocardicon`)
|
|
44
|
+
console.log(data)
|
|
45
|
+
if(isediting){
|
|
46
|
+
if(data == null){
|
|
47
|
+
return `<div class="video-card" onclick='didRequestToAddAnIcon(${section})' data-category="highlights">
|
|
48
|
+
<div class="video-thumbnail">
|
|
49
|
+
<br/><br/><br/>
|
|
50
|
+
<h1 style="text-align:center"><i class='fa fa-plus'></i></h1>
|
|
51
|
+
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
`
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
var url=""
|
|
58
|
+
var ed0=""
|
|
59
|
+
var ed1=""
|
|
60
|
+
var ed2=""
|
|
61
|
+
if(isediting){
|
|
62
|
+
ed0=`padding:15px`
|
|
63
|
+
ed1=`padding:0px;border:solid 1px black;pointer-events:none`
|
|
64
|
+
ed2=`opacity:0.4`
|
|
65
|
+
}
|
|
66
|
+
console.log(`da data iseditingisediting ${isediting}`)
|
|
67
|
+
console.log(data)
|
|
68
|
+
var dmd=data.media ?? data.iconmedia;
|
|
69
|
+
if(dmd != null){
|
|
70
|
+
for(var each in MediaResources){
|
|
71
|
+
var m=MediaResources[each]
|
|
72
|
+
|
|
73
|
+
if(m.id != dmd){
|
|
74
|
+
continue
|
|
75
|
+
}
|
|
76
|
+
console.log(`M URL`)
|
|
77
|
+
console.log(m)
|
|
78
|
+
if(m.httplink != null){
|
|
79
|
+
url=m.httplink
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
console.log(`Mediare`)
|
|
83
|
+
console.log(MediaResources)
|
|
84
|
+
}
|
|
85
|
+
var t=data.titulo
|
|
86
|
+
if(isediting && t == null){
|
|
87
|
+
t=`[ Titulo ]`
|
|
88
|
+
}
|
|
89
|
+
var s=data.subtitulo
|
|
90
|
+
if(isediting && t == null){
|
|
91
|
+
s =`[ Subtitulo ]`
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
return `<div onclick='didTapedVideoCardIcon(${section})' class="video-card" style="${ed0}" data-category="highlights">
|
|
96
|
+
<div style='${ed1}'>
|
|
97
|
+
<div class="daed2" style='${ed2}'>
|
|
98
|
+
<div class="video-thumbnail">
|
|
99
|
+
<!-- iframe container -->
|
|
100
|
+
<div>
|
|
101
|
+
<iframe class='daiframe' width="100%" height="205" src="${url}" frameborder="0" allowfullscreen=""></iframe>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="play-button">
|
|
104
|
+
<i cxtza='icon' class="fas fa-play"></i>
|
|
105
|
+
</div>
|
|
106
|
+
<div cxtza='diuration' class="video-duration">8:32</div>
|
|
107
|
+
<div class="video-category">HIGHLIGHTS</div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="video-info">
|
|
110
|
+
|
|
111
|
+
<h3 cxtza='titulo' class="datitle" >${t}</h3>
|
|
112
|
+
<div class="video-stats">
|
|
113
|
+
<span cxtza='views' class="daviews" ><i class="fas fa-eye"></i> 1.8M</span>
|
|
114
|
+
<span cxtza='like' class="dalikes"><i class="fas fa-thumbs-up"></i> 89K</span>
|
|
115
|
+
<span cxtza='fecha' class="dafecha">5 Enero 2025</span>
|
|
116
|
+
</div>
|
|
117
|
+
<p cxtza='descripcion'>${s}</p>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
</div>`
|
|
122
|
+
}
|