refactor(StreamPlayer): streamline component structure and improve readability

- Consolidated button and component attributes into single lines for better clarity.
- Enhanced the layout of the timeline and context menu elements for improved user experience.

src/views/live-stream/components/StreamPlayer.vue

@@ -162,47 +162,47 @@
               <span class="collapse-title">{{ t('PTZ') }}</span>
             </template>
             <div class="ptz-grid">
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'up_left')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'up_left')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-top-left" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'up')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'up')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-top" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'up_right')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'up_right')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-top-right" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'left')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'left')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-left" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn ptz-center" @click="$emit('ptz', 'stop')">
+              <div class="ptz-btn ptz-center" @mousedown="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:stop" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'right')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'right')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-right" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'down_left')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'down_left')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-bottom-left" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'down')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'down')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-down" width="24" height="24" />
                 </el-icon>
               </div>
-              <div class="ptz-btn" @mousedown="$emit('ptz', 'down_right')">
+              <div class="ptz-btn" @mousedown="$emit('ptz', 'down_right')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="24">
                   <Icon icon="mdi:arrow-bottom-right" width="24" height="24" />
                 </el-icon>
@@ -210,12 +210,12 @@
             </div>
 
             <div class="zoom-buttons">
-              <el-button size="small" @mousedown="$emit('zoomIn')">
+              <el-button size="small" @mousedown="$emit('zoomIn')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="20">
                   <Icon icon="mdi:zoom-in-outline" width="20" height="20" />
                 </el-icon>
               </el-button>
-              <el-button size="small" @mousedown="$emit('zoomOut')">
+              <el-button size="small" @mousedown="$emit('zoomOut')" @mouseup="$emit('ptz', 'stop')">
                 <el-icon size="20">
                   <Icon icon="mdi:zoom-out-outline" width="20" height="20" />
                 </el-icon>