Commit c2544ad55f5672ec6dfbab7ec12d51bbea1dc92d
1 parent
908c0f0d
fix: split mode can not fullscreen play video
Showing
1 changed file
with
20 additions
and
64 deletions
... | ... | @@ -245,69 +245,25 @@ |
245 | 245 | </Space> |
246 | 246 | </div> |
247 | 247 | </div> |
248 | - <List | |
249 | - :loading="loading" | |
250 | - :data-source="cameraList" | |
251 | - class="bg-light-50 flex-auto dark:bg-dark-900 split-mode-list" | |
252 | - :grid="gridLayout" | |
253 | - :style="{ '--height': `${100 / pagination.colNumber}%` }" | |
254 | - > | |
255 | - <template #renderItem="{ item }"> | |
256 | - <List.Item> | |
257 | - <div class="box-border w-full h-full p-1px"> | |
258 | - <div | |
259 | - v-if="item.placeholder" | |
260 | - class="bg-black w-full h-full overflow-hidden relative" | |
261 | - ></div> | |
262 | - <div | |
263 | - v-if="!item.placeholder" | |
264 | - class="bg-black w-full h-full overflow-hidden relative video-container" | |
265 | - > | |
266 | - <Spin v-show="!item.isTransform" :spinning="!item.isTransform"> | |
267 | - <div class="bg-black text-light-50"> </div> | |
268 | - </Spin> | |
269 | - <VideoPlay | |
270 | - v-show="item.isTransform" | |
271 | - @loadstart="handleLoadStart(item)" | |
272 | - @loadeddata="handleLoadData(item)" | |
273 | - v-bind="options" | |
274 | - :src="item.videoUrl" | |
275 | - :title="item.name" | |
276 | - :type="item.type" | |
277 | - /> | |
248 | + <section ref="videoContainer" class="flex-auto"> | |
249 | + <List | |
250 | + :loading="loading" | |
251 | + :data-source="cameraList" | |
252 | + class="bg-light-50 w-full h-full dark:bg-dark-900 split-mode-list" | |
253 | + :grid="gridLayout" | |
254 | + :style="{ '--height': `${100 / pagination.colNumber}%` }" | |
255 | + > | |
256 | + <template #renderItem="{ item }"> | |
257 | + <List.Item> | |
258 | + <div class="box-border w-full h-full p-1px"> | |
278 | 259 | <div |
279 | - v-if="item.isTransform && isDef(item.canPlay) && !item.canPlay" | |
280 | - class="video-container-error-msk absolute top-0 left-0 text-lg w-full h-full text-light-50 flex justify-center items-center z-50 bg-black" | |
281 | - > | |
282 | - 视频加载出错了! | |
283 | - </div> | |
260 | + v-if="item.placeholder" | |
261 | + class="bg-black w-full h-full overflow-hidden relative" | |
262 | + ></div> | |
284 | 263 | <div |
285 | - class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center" | |
286 | - style="height: 100%; background-color: rgba(0, 0, 0, 0.5)" | |
264 | + v-if="!item.placeholder" | |
265 | + class="bg-black w-full h-full overflow-hidden relative video-container" | |
287 | 266 | > |
288 | - <span>{{ item.name }}</span> | |
289 | - </div> | |
290 | - </div> | |
291 | - </div> | |
292 | - </List.Item> | |
293 | - </template> | |
294 | - </List> | |
295 | - <!-- <section ref="videoContainer" class="bg-light-50 flex-auto dark:bg-dark-900"> | |
296 | - <Spin :spinning="loading" class="h-full"> | |
297 | - <Empty | |
298 | - class="h-full flex flex-col justify-center items-center" | |
299 | - v-if="!cameraList.length" | |
300 | - /> | |
301 | - <Row :gutter="8" class="h-full mx-0 content-start"> | |
302 | - <Col | |
303 | - v-for="item in cameraList" | |
304 | - :key="item.id" | |
305 | - :style="{ height: `${100 / pagination.colNumber}%` }" | |
306 | - class="h-1/2 !px-0 !flex justify-center items-center" | |
307 | - :span="getColLayout" | |
308 | - > | |
309 | - <div class="box-border w-full h-full p-1px"> | |
310 | - <div class="bg-black w-full h-full overflow-hidden relative video-container"> | |
311 | 267 | <Spin v-show="!item.isTransform" :spinning="!item.isTransform"> |
312 | 268 | <div class="bg-black text-light-50"> </div> |
313 | 269 | </Spin> |
... | ... | @@ -334,10 +290,10 @@ |
334 | 290 | </div> |
335 | 291 | </div> |
336 | 292 | </div> |
337 | - </Col> | |
338 | - </Row> | |
339 | - </Spin> | |
340 | - </section> --> | |
293 | + </List.Item> | |
294 | + </template> | |
295 | + </List> | |
296 | + </section> | |
341 | 297 | </section> |
342 | 298 | </PageWrapper> |
343 | 299 | <CameraDrawer @register="registerDrawer" @success="getCameraList" /> | ... | ... |