WXtrialInterface.html 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="x5-orientation" content="portrait" />
  8. <meta name="screen-orientation" content="portrait" />
  9. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  10. <meta name="apple-mobile-web-app-capable" content="yes">
  11. <!-- 删除苹果默认的工具栏和菜单栏 -->
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <!-- 设置苹果工具栏颜? -->
  14. <meta name="format-detection" content="telphone=no, email=no">
  15. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  16. <!-- 启用360浏览器的极速模?(webkit) -->
  17. <meta name="renderer" content="webkit">
  18. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑? -->
  19. <meta name="HandheldFriendly" content="true">
  20. <!-- 微软的老式浏览? -->
  21. <meta name="MobileOptimized" content="320">
  22. <!-- 不能旋转,问题出在这 -->
  23. <!-- UC强制全屏 -->
  24. <meta name="full-screen" content="yes">
  25. <!-- QQ强制全屏 -->
  26. <meta name="x5-fullscreen" content="true">
  27. <!-- UC应用模式 -->
  28. <meta name="browsermode" content="application">
  29. <!-- QQ应用模式 -->
  30. <meta name="x5-page-mode" content="app">
  31. <!-- windows phone 点击无高? -->
  32. <meta name="msapplication-tap-highlight" content="no">
  33. <link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
  34. <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" />
  35. <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css" />
  36. </head>
  37. <body class="scroll h-player" style="overscroll-behavior: contain;">
  38. <div class="container" id="player">
  39. <div class="muted" id="btnMuted">
  40. <div class="control-right-img" data-id="1">
  41. <img src="../static/img/xuanfu_icon.png">
  42. </div>
  43. </div>
  44. <div id="wine">
  45. <video id="playerVideo" muted="muted" x5-video-orientation="landscape" playsinline="true" autoplay="true"
  46. webkit-playsinline="true" x5-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="false"
  47. style="pointer-events: none;object-fit: fill;width: 100%;height:100%"></video>
  48. <div id="box"></div>
  49. <audio preload="auto" autoplay controls poster="images/loader-thumb.jpg" id="audioPlayer"
  50. style="position: absolute;top: 0;width: 0;height: 0;"></audio>
  51. </div>
  52. <div class="leftmains">
  53. <div class="PictureQualityMain">
  54. <div class="PictureQuality" data-id="4">高清</div>
  55. <div class="PictureQuality avit" data-id="3">标清</div>
  56. <div class="PictureQuality" data-id="2">极速</div>
  57. </div>
  58. <div class="operation">
  59. <div class="upload" id="showsuss" data-text="uploads">
  60. <img src="../static/img/wx/shangchuan_icon.png">
  61. <div>上传</div>
  62. </div>
  63. <div class="upload" onclick="showShearPlate()" data-text="Shearplate">
  64. <img src="../static/img/wx/jianqieban_icon.png">
  65. <div>剪贴板</div>
  66. </div>
  67. <div class="upload" id="upload" data-text="Signout">
  68. <img src="../static/img/wx/tuichu_icon.png">
  69. <div>退出</div>
  70. </div>
  71. </div>
  72. </div>
  73. <div class="bottommains">
  74. <div class="botmat1">
  75. <div class="botmat1img" data-text="gengduo">
  76. <img src="../static/img/wx/gengduo_icon.png">
  77. </div>
  78. </div>
  79. <div class="botmat1">
  80. <div class="botmat1img" data-text="home">
  81. <img src="../static/img/wx/home_icon.png">
  82. </div>
  83. </div>
  84. <div class="botmat1">
  85. <div class="botmat1img" data-text="return">
  86. <img src="../static/img/wx/fanhui_icon.png">
  87. </div>
  88. </div>
  89. </div>
  90. <img class="loading loading_sceen_pic" />
  91. </div>
  92. <div class="mask">
  93. <div class="box-shear-plate"></div>
  94. <img class="close" onclick="handleClose()" src="img/guanbi_icon@2x.png" alt="">
  95. </div>
  96. <div class="weui-mask_transparent"></div>
  97. <div class="weui-toast weui_loading_toast weui-toast--visible">
  98. <div class="weui_loading"><i class="weui-loading weui-icon_toast"></i></div>
  99. <p class="weui-toast_content">数据加载中</p>
  100. </div>
  101. <body oncontextmenu="Back()">
  102. </body>
  103. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  104. <script src="https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.0.3.js"></script>
  105. <script type="text/javascript" src="../static/js/jquery-1.11.0.min.js"></script>
  106. <script type="text/javascript" src="helper.js"></script>
  107. <script type="text/javascript" src="pcm-player.js"></script>
  108. <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  109. <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
  110. <script type="text/javascript" src="WXdraw.js"></script>
  111. <script type="text/javascript" src="jmuxer.js"></script>
  112. <script type="text/javascript" src="spsParser.js"></script>
  113. <script>
  114. var parameters = GetRequest();
  115. if (parameters['mealType'] === 'VIP') {
  116. $(".loading_sceen_pic").attr('src', '../static/img/home_bg_VIP.png');
  117. } else if (parameters['mealType'] === 'SVIP') {
  118. $(".loading_sceen_pic").attr('src', '../static/img/home_bg_SVIP.png');
  119. } else if (parameters['mealType'] === 'STAR') {
  120. $(".loading_sceen_pic").attr('src', '../static/img/home_bg_STAR.png');
  121. } else if (parameters['mealType'] === 'STARPRO') {
  122. $(".loading_sceen_pic").attr('src', '../static/img/home_bg_PRO.png');
  123. }
  124. var isAudioPlay = false;
  125. if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) {
  126. var video = document.getElementById("playerVideo");
  127. video.play();
  128. setTimeout(() => { // 抖音环境需要设置延时,不然会有video默认图显示
  129. $.alert({
  130. title: '提示',
  131. text: '开始使用云手机',
  132. onOK: function () {
  133. setTimeout(() => {
  134. isAudioPlay = true;
  135. }, 1000);
  136. }
  137. });
  138. }, 1000)
  139. } else {
  140. $.alert({
  141. title: '提示',
  142. text: '开始使用云手机',
  143. onOK: function () {
  144. var video = document.getElementById("playerVideo");
  145. video.play();
  146. isAudioPlay = true;
  147. }
  148. });
  149. }
  150. var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
  151. $('#wine').css({
  152. "width": window.screen.width,
  153. "height": window.screen.height - topwinHeight - 20,
  154. "position": "absolute"
  155. });
  156. $('.loading').css({
  157. "width": window.screen.width,
  158. "height": window.screen.height - topwinHeight - 20
  159. });
  160. var winese = document.createElement("wine");
  161. wine.style.top = "-" + winese + 'px';
  162. var isVisuable = true;
  163. var isFeed = true;
  164. var isFinish = false;
  165. var isWaitSps = false;
  166. var myVideo = document.getElementById("playerVideo");
  167. Module = {};
  168. Module.onRuntimeInitialized = function () {
  169. isFinish = true;
  170. }
  171. var isWSS = true;
  172. var ip = parameters["ip"];
  173. var cardToken = parameters["cardToken"];
  174. cardToken = cardToken && cardToken.replace(/@/g, "=");
  175. var appletPushAddress = parameters["appletPushAddress"];
  176. var socketURL = isWSS ? "wss://" + appletPushAddress + "?cardIp=" + ip + "&token=" + cardToken : "ws://" + appletPushAddress + "?cardIp=" + ip + "&token=" + cardToken;
  177. var jmuxer = new JMuxer({
  178. node: 'playerVideo',
  179. flushingTime: 33,
  180. fps: 30,
  181. mode: 'video',
  182. debug: false
  183. });
  184. window.onload = function () {
  185. var myPlay = document.getElementById("wine");
  186. myPlay.onkeydown = function (event) {
  187. ExexuteKeyDown(e.keyCode);
  188. }
  189. }
  190. var ws, errorTime = 0;
  191. doConnect();
  192. // 节流
  193. // 设置一个标志
  194. function throttle(fn, delay) {
  195. let flag = true;
  196. errorTime += delay;
  197. return () => {
  198. if (!flag) return;
  199. flag = false;
  200. timer = setTimeout(() => {
  201. fn();
  202. flag = true;
  203. }, delay);
  204. };
  205. }
  206. var intervaler;
  207. function doConnect() {
  208. ws = new WebSocket(socketURL);
  209. ws.binaryType = 'arraybuffer';
  210. intervaler = setInterval(() => {
  211. if (ws.readyState === 1) {
  212. ws.send("ping");
  213. } else {
  214. clearInterval(intervaler);
  215. $.toast("画面异常,请重新进入1", "text");
  216. if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) {
  217. tt.miniProgram.switchTab({
  218. url: '/pages/home/home'
  219. })
  220. } else {
  221. wx.miniProgram.switchTab({
  222. url: '/pages/home/home'
  223. })
  224. }
  225. }
  226. }, 3000);
  227. ws.addEventListener('open', function (event) {
  228. // sn只要长度满足17位随机数,不需要从后台获取
  229. var verifyBuffer = VerifyCode('RK3923C1201900139', cardToken);
  230. console.log("鉴权报文:" + PrintArry(verifyBuffer));
  231. ws.send(verifyBuffer);
  232. });
  233. ws.addEventListener('error', function (event) {
  234. ws.close();
  235. clearInterval(intervaler);
  236. throttle(doConnect, 100);
  237. if (errorTime > 1000) {
  238. $.toast("画面异常,请重新进入2", "text");
  239. wsss.close();
  240. if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) {
  241. tt.miniProgram.switchTab({
  242. url: '/pages/home/home'
  243. })
  244. } else {
  245. wx.miniProgram.switchTab({
  246. url: '/pages/home/home'
  247. })
  248. }
  249. }
  250. });
  251. ws.addEventListener('message', function (event) {
  252. var data = ParseProto(event.data); //JAVA服务器转发
  253. if (isAudioPlay) {
  254. $('.weui-mask_transparent').hide();
  255. $('.weui-toast').hide();
  256. $('.loading').hide();
  257. }
  258. var input = new Uint8Array(event.data);
  259. if (data.audio != null && isAudioPlay) { //喂音频
  260. if (input[0] == 0xff) {
  261. if (isFinish) {
  262. decodeAAC(input);
  263. }
  264. }
  265. }
  266. if (data.frameType != undefined && data.frameType != 1 && data.frameType != 6) {
  267. if (data.frameType == 7) {
  268. let info = spsParser(data.video);
  269. if (info.width != myVideo.videoWidth && info.height != myVideo.videoHeight) {
  270. if (myVideo.videoWidth == 0) {
  271. console.log("SPS计算得到宽 %d, 高 %d, 控件宽 %d, %d", info.width, info.height, myVideo.videoWidth, myVideo.videoHeight);
  272. }
  273. }
  274. }
  275. }
  276. if (data.video != null) { //喂视频
  277. if (data.frameType == 0x05 && isVisuable) {
  278. isFeed = true;
  279. }
  280. if (data.frameType == 7 || data.frameType == 8) {
  281. isFeed = true;
  282. isAudioPlay = true;
  283. isWaitSps = false;
  284. }
  285. if (isFeed) {
  286. if (!isWaitSps) {
  287. jmuxer.feed(data);
  288. }
  289. }
  290. }
  291. });
  292. }
  293. document.addEventListener("visibilitychange", function () {
  294. if (document.visibilityState == "visible") {
  295. var buffer = RequestIFrame();
  296. ws.send(buffer);
  297. isVisuable = true;
  298. } else {
  299. isVisuable = false;
  300. isFeed = false;
  301. myVideo.pause();
  302. }
  303. });
  304. myVideo.addEventListener('pause', function () {
  305. isFeed = false;
  306. });
  307. var decodeCount = 1;
  308. var player = new PCMPlayer({
  309. encoding: '16bitInt',
  310. channels: 2,
  311. sampleRate: 44100,
  312. flushingTime: 22,
  313. debug: false
  314. });
  315. function handleClose() {
  316. $('.mask').hide();
  317. }
  318. function decodeAAC(data) {
  319. var retPtr = Module._malloc(4 * 5 * 1024); // 接收的数据
  320. var inputPtr = Module._malloc(4 * data.length); // 输入数据
  321. for (var i = 0; i < data.length; i++) {
  322. Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
  323. }
  324. var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  325. if (pcmLen >= 0) {
  326. var pcmData = new Uint8Array(pcmLen);
  327. for (var i = 0; i < pcmLen; i++) {
  328. pcmData[i] = Module.HEAPU8[(retPtr) + i]
  329. }
  330. player.feed(pcmData);
  331. }
  332. decodeCount++;
  333. Module._free(inputPtr);
  334. Module._free(retPtr);
  335. }
  336. //解协议
  337. function ParseProto(data) {
  338. var input = new Uint8Array(data),
  339. duration,
  340. video,
  341. frameType,
  342. audio;
  343. if (input[0] == 0 && input[1] == 0 && input[2] == 0 && input[3] == 1) {
  344. video = input;
  345. duration = 24;
  346. var nalType = input[4] & 0x1f;
  347. frameType = nalType;
  348. if (!isFeed) {
  349. if (nalType == 0x05 && isVisuable) {
  350. isFeed = true;
  351. }
  352. }
  353. } else if (input[0] == 0xff) {
  354. audio = input;
  355. duration = 24;
  356. } else if (input[0] == 0x68) {
  357. if (input[23] == 0x5c) {
  358. console.log("收到消息:" + PrintArry(input));
  359. if (CheckVerifyCode(input)) {
  360. ws.send(ConfigChannel('RK3923C1201900139'));
  361. var checkBuffer = GetScreenState();
  362. ws.send(checkBuffer);
  363. }
  364. else {
  365. $.toast("画面异常,请重新进入3", "text");
  366. clearInterval(intervaler);
  367. ws.close();
  368. wsss.close();
  369. if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) {
  370. tt.miniProgram.switchTab({
  371. url: '/pages/home/home'
  372. })
  373. } else {
  374. wx.miniProgram.switchTab({
  375. url: '/pages/home/home'
  376. })
  377. }
  378. }
  379. }
  380. if (input[23] == 0x05) { //横竖屏标识
  381. var state = CheckScreenDirection(input.slice(24, 24 + 8));
  382. if (state == 1) {
  383. console.log("安卓卡此时竖屏");
  384. //竖屏处理
  385. resolving = 1;
  386. } else {
  387. console.log("安卓卡此时横屏");
  388. //横屏处理
  389. resolving = 0;
  390. }
  391. }
  392. if (input[23] == 0x0B)//多端登录处理, 数据从索引24开始取, input 是接收到的原始数据
  393. {
  394. var jsonobj = checkMultiLoginInfo(input);
  395. }
  396. }
  397. return {
  398. audio: audio,
  399. video: video,
  400. duration: duration,
  401. frameType: frameType
  402. };
  403. }
  404. function GetRequest() {
  405. var url = location.search; // 获取url中"?"符后的字串
  406. var obj = new Object();
  407. if (url.indexOf("?") != -1) {
  408. var str = url.substr(1);
  409. strs = str.split("&");
  410. for (var i = 0; i < strs.length; i++) {
  411. obj[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
  412. }
  413. }
  414. return obj;
  415. }
  416. function Back() {
  417. ExexuteKeyDown(4);
  418. window.event.returnValue = false;
  419. return false;
  420. }
  421. var url = window.location.href;
  422. url = url.split('/');
  423. var baseUrl = url[0] + '//' + url[2];
  424. var form = {};
  425. form.token = parameters['token'];
  426. form.userCardId = parameters['userCardId'];
  427. function array_unique(arr) {
  428. return arr.filter(function (e, i) {
  429. return arr.indexOf(e) === i;
  430. })
  431. }
  432. var cutList = [];
  433. let timer, isFlag = true;
  434. function showShearPlate() {
  435. stopManyClick(() => {
  436. $('.box-shear-plate').empty();
  437. $.ajax({
  438. url: baseUrl + "/api/public/v5/shear/content",
  439. headers: {
  440. 'Authorization': form.token
  441. },
  442. type: 'get',
  443. dataType: 'json',
  444. success: function (res) {
  445. if (res.status === 0) {
  446. if (res.data.length) {
  447. cutList = array_unique(res.data)
  448. var str = '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">'
  449. cutList.forEach(function (item) {
  450. str += "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" + item.content + "\")'>" + item.content + "</div></div><div class='slide-content-button'><button onclick='handleDelete(" + item.id + ")'>删除</button></div></div></div>"
  451. })
  452. str += '</div>'
  453. $('.box-shear-plate').append(str);
  454. } else {
  455. $('.box-shear-plate').append('<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>')
  456. }
  457. $('.mask').show();
  458. initSlider();
  459. } else {
  460. $('.box-shear-plate').append('<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>')
  461. $('.mask').show();
  462. }
  463. }
  464. })
  465. })
  466. }
  467. //防止提示一秒内重复显示
  468. function stopManyClick(fn) {
  469. if (isFlag) {
  470. fn();
  471. }
  472. isFlag = false;
  473. if (timer) { clearTimeout(timer); }
  474. timer = setTimeout(() => { isFlag = true }, 1500);
  475. }
  476. // 清空剪贴板
  477. function handleClear() {
  478. var ids = '';
  479. cutList.forEach(function (item) {
  480. ids += 'ids=' + item.id + '&'
  481. });
  482. ids = ids.substring(0, ids.lastIndexOf('&'));
  483. $.confirm("确定清空剪贴板?", function () {
  484. $.ajax({
  485. url: baseUrl + "/api/public/v5/shear/content?" + ids,
  486. headers: {
  487. 'Authorization': form.token
  488. },
  489. type: 'DELETE',
  490. dataType: 'json',
  491. success: function (res) {
  492. if (res.status === 0) {
  493. showShearPlate();
  494. } else {
  495. $.toast(res.msg, "text");
  496. }
  497. }
  498. })
  499. });
  500. }
  501. function handleCopy(content) {
  502. var cutting = {
  503. "type": "cutting",
  504. "data": {
  505. "str": content
  506. }
  507. };
  508. wsss.send(JSON.stringify(cutting));
  509. }
  510. // 删除剪贴板
  511. function handleDelete(id) {
  512. $.ajax({
  513. url: baseUrl + "/api/public/v5/shear/content?ids=" + id,
  514. headers: {
  515. 'Authorization': form.token
  516. },
  517. type: 'DELETE',
  518. dataType: 'json',
  519. success: function (res) {
  520. if (res.status === 0) {
  521. showShearPlate();
  522. } else {
  523. $.toast(res.msg, "text");
  524. }
  525. }
  526. })
  527. }
  528. function initSlider() {
  529. //手指滑动多少距离就认为是滑成功
  530. //这个值不能太大,否则影响斜着滑动时,垂直滑动的流畅性,也不能太小,太灵敏也不好
  531. var diffXDistance = 50;
  532. //当前滑动的对象
  533. var currentObject;
  534. //上一次滑动的对象
  535. var lastObject;
  536. //是否可以左右滑动,在上下滑的时候禁止左右滑
  537. var canSlide = true;
  538. //用于记录按下的点
  539. var startPoint;
  540. $(".slide-content").css({
  541. width: $(".slide-wrapper").width()
  542. });
  543. document.body.removeEventListener('touchmove', function (e) {
  544. e.preventDefault()
  545. }, {
  546. passive: false
  547. })
  548. $(".slide-scroll").css({
  549. width: $(".slide-wrapper").width() + $(".slide-content-button").width()
  550. }).on('touchstart', function (e) {
  551. currentObject = this;
  552. startPoint = {
  553. x: e.originalEvent.changedTouches[0].pageX,
  554. y: e.originalEvent.changedTouches[0].pageY
  555. };
  556. }).on('touchmove', function (e) {
  557. //如果是左右滑动,就禁止上下的滑动
  558. //如果是上下的滑动,就禁止左右滑动
  559. if (Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) > Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)) {
  560. event.preventDefault();
  561. } else {
  562. canSlide = false;
  563. }
  564. }).on('touchend', function (e) {
  565. //如果是上下滑动,这里就直接返回了
  566. if (!canSlide) {
  567. canSlide = true;
  568. return true;
  569. }
  570. //点击除当前左滑对象之外的任意其他位置
  571. if (lastObject && currentObject != lastObject) {
  572. //右滑→
  573. $(lastObject).removeClass("animate-slide");
  574. //清空上一个左滑的对象
  575. lastObject = undefined;
  576. }
  577. var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x;
  578. if (diffX < -diffXDistance) {
  579. //左滑←
  580. $(currentObject).addClass("animate-slide");
  581. if (lastObject && lastObject != currentObject) {
  582. //右滑→
  583. $(lastObject).removeClass("animate-slide");
  584. }
  585. //记录上一个左滑的对象
  586. lastObject = currentObject;
  587. } else if (diffX >= diffXDistance) {
  588. if (currentObject == lastObject) {
  589. //右滑→
  590. $(currentObject).removeClass("animate-slide");
  591. //清空上一个左滑的对象
  592. lastObject = undefined;
  593. }
  594. }
  595. });
  596. }
  597. var btnMuted = document.querySelector("#btnMuted");
  598. btnMuted && (function () {
  599. var setHistory = function (left, top) {
  600. try {
  601. localStorage.setItem("muted-btn-loc", JSON.stringify({
  602. left: left,
  603. top: top
  604. }));
  605. } catch (ex) { }
  606. };
  607. var getHistory = function () {
  608. try {
  609. var value = localStorage.getItem("muted-btn-loc");
  610. if (!value) return null;
  611. value = JSON.parse(value);
  612. if (!value) return null;
  613. return value;
  614. } catch (ex) {
  615. return null
  616. }
  617. };
  618. var fixLoc = function (loc) {
  619. var rect = btnMuted.getBoundingClientRect();
  620. rect = {
  621. top: rect.top,
  622. left: rect.left,
  623. width: rect.width,
  624. height: rect.height
  625. }; //部分低版本浏览器,该属性为只读
  626. if (loc) {
  627. rect.left = loc.left;
  628. rect.top = loc.top;
  629. }
  630. var minX = 0;
  631. var minY = 0;
  632. var docRect = document.documentElement.getBoundingClientRect();
  633. var maxY = docRect.height - rect.height;
  634. var maxX = docRect.width - rect.width;
  635. var left = rect.left;
  636. var top = rect.top;
  637. left = Math.min(left, maxX);
  638. left = Math.max(left, minX);
  639. top = Math.min(top, maxY);
  640. top = Math.max(top, minY);
  641. if (loc || top !== rect.top || left !== rect.left) {
  642. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  643. }
  644. }
  645. window.addEventListener("resize", function () {
  646. fixLoc();
  647. });
  648. var touchPoint = {
  649. pageY: 0,
  650. pageX: 0
  651. };
  652. var currentLoc = {
  653. top: 0,
  654. left: 0,
  655. curTop: 0,
  656. curLeft: 0
  657. };
  658. var toMove = false;
  659. var touchmove = function (e) {
  660. e.preventDefault();
  661. var point = e.changedTouches[0];
  662. var top = -touchPoint.pageY + point.pageY;
  663. var left = -touchPoint.pageX + point.pageX;
  664. if (toMove) {
  665. top += currentLoc.top;
  666. left += currentLoc.left;
  667. currentLoc.curLeft = left;
  668. currentLoc.curTop = top;
  669. btnMuted.style.cssText += "left:" + left + "px;top:" + top + "px;";
  670. } else {
  671. if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
  672. toMove = true;
  673. }
  674. }
  675. };
  676. var touchend = function () {
  677. window.removeEventListener("touchmove", touchmove, {
  678. passive: false
  679. });
  680. window.removeEventListener("touchend", touchend, {
  681. passive: false
  682. });
  683. if (toMove) {
  684. setHistory(currentLoc.curLeft, currentLoc.curTop);
  685. fixLoc();
  686. } else {
  687. //按点击处理
  688. var set = $('.control-right-img').attr("data-id")
  689. if (set == '1') {
  690. $('.control-right-img').attr({
  691. "data-id": "2"
  692. })
  693. $(".leftmains").css({
  694. "right": "0rem"
  695. })
  696. } else {
  697. $('.control-right-img').attr({
  698. "data-id": "1"
  699. })
  700. $(".leftmains").css({
  701. "right": "-4rem"
  702. })
  703. }
  704. }
  705. }
  706. btnMuted.addEventListener("touchstart", function (e) {
  707. e.preventDefault();
  708. toMove = false;
  709. var point = e.changedTouches[0];
  710. touchPoint.pageX = point.pageX;
  711. touchPoint.pageY = point.pageY;
  712. var rect = e.target.getBoundingClientRect();
  713. currentLoc.top = rect.top;
  714. currentLoc.left = rect.left;
  715. window.addEventListener("touchmove", touchmove, {
  716. passive: false
  717. });
  718. window.addEventListener("touchend", touchend, {
  719. passive: false
  720. });
  721. }, {
  722. passive: false
  723. });
  724. var history = getHistory();
  725. if (history) {
  726. fixLoc(history);
  727. }
  728. btnMuted.classList.remove("hide");
  729. })();
  730. $("#upload").on("click", function () {
  731. clearInterval(intervaler);
  732. ws.close();
  733. wsss.close();
  734. if (navigator.userAgent.toLowerCase().includes('toutiaomicroapp')) {
  735. tt.miniProgram.switchTab({
  736. url: '/pages/home/home'
  737. })
  738. } else {
  739. wx.miniProgram.switchTab({
  740. url: '/pages/home/home'
  741. })
  742. }
  743. })
  744. window.onbeforeunload = function () {
  745. ws.close();
  746. wsss.close();
  747. }
  748. </script>
  749. <script type="text/javascript" src="aac.js"></script>
  750. </body>
  751. </html>