Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chat entries displayed in a hangouts-like format #9

Open
wants to merge 4 commits into
base: gh-pages
Choose a base branch
from
Open

Chat entries displayed in a hangouts-like format #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba39c11
Added several options:
edkief Nov 17, 2017
325ea3a
Update README.md
edkief Nov 17, 2017
2930c75
Minor cleanup and typo fixes
edkief Nov 17, 2017
9d4cc87
Merge branch 'gh-pages' of https://github.com/edkief/hangouts-reader …
edkief Nov 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,7 @@ https://jessecar96.github.io/hangouts-reader/
- View images inline with thumbnails.
- Emoji support by [twemoji](https://github.com/twitter/twemoji)
- If you have merged Google Voice and Hangouts you will also see your Google Voice conversations.

## Fork features
- Ability to only display chat entries from a certain date
- Ability to format the chat entries to appear similar to on-screen hangouts
3 changes: 3 additions & 0 deletions hangouts.css
View file
Open in desktop

Large diffs are not rendered by default.

129 changes: 120 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="hangouts.css">
<style type="text/css">
.btn-file {
position: relative;
Expand All @@ -30,11 +31,10 @@
margin-top: 40px;
}
.thumb{
width:100px;
width:200px;
height: auto;
}
.txt{
white-space: pre-wrap;
border: 1px solid #ddd;
border-radius: 4px;
padding: 14px;
Expand All @@ -43,17 +43,24 @@
.emoji{
width: 15px;
}
.settings {
border: 1px solid #ddd;
border-radius: 4px;
padding: 14px;
background: #F5F5F5;
}
h3{
margin-top: 0;
}
</style>
</head>
<body>
<body style="overflow: scroll">

<div class="container-fluid main">
<h1>Hangouts.json Reader</h1>
<h1 class="delete_for_print">Hangouts.json Reader</h1>

<form class="form-inline">
<div class="delete_for_print">
<form class="form-inline settings">
Select your Hangouts.json file:
<div class="input-group">
<span class="input-group-btn">
Expand All @@ -63,10 +70,24 @@ <h1>Hangouts.json Reader</h1>
</span>
<input type="text" class="form-control file-name" readonly>
</div>
<div class="input-group" style="margin-left: 10px">
Only include from&hellip; <input id="date-begin" type="date">
</div>
<div class="input-group" style="margin-left: 10px">
Hangouts Formatting - <input id="hangout-format" type="checkbox">
</div>

<div class="input-group" style="margin-left: 10px; float: right;">
<input type="submit" value="Prep for print" id="prep_print" class="delete_for_print">
</div>


</form>
</div>


<div class="row main-row">
<div class="col-md-3">
<div class="col-md-3 delete_for_print">
<ul class="list-group convo-list">

</ul>
Expand All @@ -81,8 +102,8 @@ <h1>Hangouts.json Reader</h1>
</div>
</div>
</div>

</body>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/1.2.1/twemoji.min.js"></script>
Expand All @@ -98,6 +119,11 @@ <h1>Hangouts.json Reader</h1>
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});

$("#prep_print").click(function() {
$('body').css("overflow","visible");
$('.delete_for_print').remove();
});

$('.btn-file :file').on('fileselect', function(event, numFiles, label) {
$('.file-name').val(label);
Expand Down Expand Up @@ -213,19 +239,104 @@ <h1>Hangouts.json Reader</h1>
}
}


function switchConvo(id){
$('.txt').text('');

var current_writer = "N/A";

var flts = ["right", "left"];
var colors = ["#cfd8dc", "#FFFFFF"];
var idx = 0;
var last_timestamp = 0;
var last_msgtime = "";
var buffer = "";
var convo_event;

function writeBlock(writeTime) {
var color = colors[idx];
var flt = flts[idx];
var appnd = '<div class="tk TmwRj pj GjkoZd" style="clear: both;" id=":i0.mw">' +
' <div class="Tn" id=":i0.ma">' +
' <div class="KL" style="float: ' + flt + '">' +
' <div class="PD IF">' +
' <div class="KRQuhe" style="background-color: '+color+'"></div>' +
' <div class="JL" id=":ie.co">' +
buffer +
' </div></div></div>';
if (writeTime) {
appnd += ' <div class="TlvAYc">' +
' <span style="float: '+flt+'; text-align: '+flt+'" aria-label="'+last_msgtime+'" class="sV" title="11/11/17, 7:25 AM">'+ last_msgtime + '</span></div>';
}
appnd += '<div class="TR"></div></div></div>';
$('.txt').append( appnd );
buffer = "";
}

var newConvo;

var startAt = $("#date-begin").val();
if (startAt != "") startAt = +new Date(startAt)*1000;

var rawFormat = ! $("#hangout-format").is(":checked");
console.log("rawFormat = "+rawFormat);

$(".txt").css("white-space", rawFormat ? "pre-wrap":"normal");

for(var event_id in Conversations[id]){
var convo_event = Conversations[id][event_id];
$('.txt').append(convo_event.msgtime + ": " + convo_event.sender + ": " + convo_event.message + "\n");
convo_event = Conversations[id][event_id];
if (convo_event.timestamp > startAt) {
if (rawFormat) {
$('.txt').append(convo_event.msgtime + ": " + convo_event.sender + ": " + convo_event.message + "\n");
} else {
newConvo = convo_event.timestamp - last_timestamp > 600000000;
if (current_writer != convo_event.sender) {
writeBlock(newConvo);
idx = (idx+1)%2;
} else if (newConvo) {
writeBlock(true);
}
current_writer = convo_event.sender;
last_timestamp = convo_event.timestamp;
last_msgtime = convo_event.msgtime;
buffer += '<div class="Mu SP" data-tooltip="'+convo_event.msgtime+'" id=":ip.ma">' +
'<span class="tL8wMe EMoHub" dir="ltr" id=":ip.co" style="text-align: left;">' + convo_event.message +'</span></div>';
}
}
}
if (buffer != "") {
writeBlock(true);
}
}

function formatEvent(convo_event) {
return convo_event.msgtime + ": " + convo_event.sender + ": " + convo_event.message + "\n";
}

function zeroPad(string) {
return (string < 10) ? "0" + string : string;
}


var monthNames = [
"Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct",
"Nov", "Dec"
];
function formatTimestamp(timestamp) {
var date = new Date(timestamp/1000);
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();

var formattedDate = monthNames[monthIndex] + ' ' + day;
var hours = (date.getHours());
var minutes = zeroPad(date.getMinutes());
var formattedTime = hours + ":" + minutes;
return formattedDate + ", " + formattedTime;

// Initial
var d = new Date(timestamp/1000);
var formattedDate = d.getFullYear() + "-" +
zeroPad(d.getMonth() + 1) + "-" +
Expand Down