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