聊天界面

dist/bower.json

@@ -28,6 +28,7 @@
     "lodash": "^4.17.4",
     "peerjs": "^0.3.14",
     "ngInfiniteScroll": "^1.3.4",
-    "jquery": "^3.2.1"
+    "jquery": "^3.2.1",
+    "ngDraggable": "^0.1.11"
   }
 }

talkview/src/html/index.html

@@ -15,6 +15,7 @@
     <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="../bower_components/jquery-qrcode/jquery.qrcode.min.js"></script>
     <script src="../bower_components/angular/angular.js"></script>
+    <script src="../bower_components/ngDraggable/ngDraggable.js"></script>
     <script src="../bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js"></script>
     <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
     <script src="../bower_components/angular-animate/angular-animate.min.js"></script>

talkview/src/js/app.js

@@ -3,5 +3,6 @@ var appMessage = angular.module('appMessage', [
     'ui.router',
     'templatescache',
     'infinite-scroll',
+    'ngDraggable',
     'ngAnimate'
 ]);

talkview/src/js/controller/messageController.js

@@ -21,19 +21,25 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
         $scope.voicePlay = function($event) {
             var audio = $($event.target.parentElement.nextElementSibling)[0];
             var unread = $($event.target.nextElementSibling);
-            var audioAll = document.getElementById('voice');
+            var audioAll = $('audio');
             console.log($($event.target));
+            console.log(audioAll);
             if (audio !== null) {
                 if (audio.paused) {
-                    //audio.load();
-                    audioAll.load();
+                    for (var i = 0, len = audioAll.length; i < len; i++) {
+                        if (!audioAll[i].paused) {
+                            $(audioAll[i].previousElementSibling.firstElementChild).removeClass("app-voice-play");
+                            $(audioAll[i].previousElementSibling.firstElementChild).addClass("app-voice-pause");
+                            audioAll[i].load();
+                        }
+                    }
                     unread.removeClass("app-voice-unread");
                     $($event.target).removeClass("app-voice-pause");
                     $($event.target).addClass("app-voice-play");
                     $timeout(function() {
                         $($event.target).removeClass("app-voice-play");
                         $($event.target).addClass("app-voice-pause");
-                    }, 10000 * audio.duration);
+                    }, 1000 * audio.duration);
                     audio.play();
                 } else {
                     $($event.target).removeClass("app-voice-play");

talkview/src/js/controller/userController.js

@@ -39,5 +39,5 @@ angular.module('appMessage').controller('UserController', ['$scope', '$state', f
         var reg = /-([\W\w]*)/;
         var group = reg.exec($scope.user.l);
         $scope.user.shortL = group == null ? $scope.user.l : group[1];
-    }
+    };
 }]);

talkview/src/less/app.main.less

@@ -446,6 +446,10 @@ body {
             margin: 20px 8px;
         }
     }
+    #inputBox {
+        margin: 10px auto;
+        height: 200px;
+    }
 }
 
 @keyframes arrow
@@ -476,7 +480,7 @@ body {
   opacity: 1;
 }
 .app-voice-you {
-    height: 50px;
+    height: 20px;
     width: 75px;
     .app-voice-time {
         float: left;

talkview/src/templates/details-right.html

@@ -21,10 +21,12 @@
         </div>
     </div>
     <div style="border-top:solid 1px #ddd;margin:0px 6px"></div>
+
     <div id="userCode" ng-show="false">
         <div id="code" qrcode ng-user="user"> </div>
     </div>
-    <div id="remote" ng-show="true">
+
+    <div id="remote" ng-show="false">
         <div id="backgroundImg">
             <span class="glyphicon glyphicon-arrow-left unConnect"></span>
         </div>
@@ -37,4 +39,27 @@
         <p class="inConnect hide" ng-show="false">您正在控制对方的计算机</p>
         <button type="button" class="btn btn-danger inConnect hide" ng-show="false">断开</button>
     </div>
-</div>
+
+    <div id="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)">
+        文件拖拽到这里
+    </div>
+</div>
+<script>
+    function allowDrop(ev) {
+        ev.preventDefault();
+    }
+
+    function drag(ev) {
+        ev.dataTransfer.setData("Text", ev.target.id);
+    }
+
+    function drop(ev) {
+        ev.preventDefault();
+        //取得拖进来的文件
+        var data = ev.dataTransfer;
+        var files = data.files;
+        console.log(data.types);
+        console.log(files);
+        //ev.target.appendChild(document.getElementById(data));
+    }
+</script>

talkview/src/templates/messages.html

@@ -233,9 +233,9 @@
                                 <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin.png);"></div>
                                 <div class="app-voice-unread"></div>
                             </div>
-                            <audio id="voice" controls>
-                                <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
-                                <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                            <audio>
+                                <!--<source src="local://E:/LxtalkUIView/dist/img/222.mp3" >-->
+                                <source src="local://E:/LxtalkUIView/dist/img/FreeFlight.ogg" >
                                 您的浏览器不支持 audio 元素。
                             </audio>
                         </div>
@@ -259,9 +259,9 @@
                                 <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin-self.png);"></div>
                                 <div class="app-voice-unread"></div>
                             </div>
-                            <audio id="voice" controls>
-                                <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
-                                <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                            <audio>
+                                <!--<source src="local://E:/LxtalkUIView/dist/img/111.mp3" >-->
+                                <source src="local://E:/LxtalkUIView/dist/img/Radiation.ogg" >
                                 您的浏览器不支持 audio 元素。
                             </audio>
                         </div>