Commit c2544ad55f5672ec6dfbab7ec12d51bbea1dc92d

Authored by ww
1 parent 908c0f0d

fix: split mode can not fullscreen play video

... ... @@ -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" />
... ...